Deploy a VueJS App with DigitalOcean

So there really doesn’t seem to be much help online when it comes to deploying a VueJS application. So I’m going to present an easy step-by-step guide on doing so. It’s very much similar to deploying other SPAs such as React.

Note: This guide assumes you have proper knowledge of using VueJS with the Webpack template, Git, and Nginx.

So let’s get started by setting up our Digital Ocean server. For this tutorial, we’ll use the NodeJS 6.11.2 on 16.04 One-click app.

Depending on how big your VueJS application is, it is recommended that you use the $10/mo droplet plan. If you want to add SSH keys to your server, check out this article, but for now, we’ll skip this step. Name your droplet whatever you want and click create.

Your droplet will be created and an email containing the password will be sent to you. Now let’s enter into our droplet.

Note: We’ll be using the default root user for this tutorial. If you want to change users, check out this article.

SSH Into Droplet

ssh root@YOUR_DROPLET_IP

You’ll be prompted about the authenticity of the host. Simply type yes and hit enter. Then enter in your password if you’re not using SHH keys. Continue following through the password prompts until you’ve set a new password.

Install Nginx

We now need to add Nginx to our droplet to serve our application. For a more in-depth guide on installing Nginx, check out this article. For now, I’ll cut to the chase for what we need to do to accomplish our app deployment.

sudo apt-get update
sudo apt-get install nginx -y

The updates and installation may take a few moments. We now need to allow HTTP traffic through our firewall.

sudo ufw allow 'Nginx HTTP'

And that’s it. Nginx is now installed on our droplet.

Nginx Configuration

We’re going to jump into the Nginx configuration to point where our application files will be server from.

sudo nano /etc/nginx/sites-available/default

Cut out all the comments with ^K. Your file should then look something like this:

Now let’s make some minor edits and be done with the configuration. We’re going to change the root path to /var/www/html/Vue/dist. Next we’ll remove the try_files $uri $uri/ =404; line. Lastly, you’ll add the following 404 redirect below the server_name:

error_page 404 /index.html;

We set the 404 redirect to our index.html file because that is the entry point for our VueJS application if you use Vue-Router. Our configuration should now look like the following:

Save the file with ^O and press enter to confirm the change. Then exit the editor with ^X. We have now finished our Nginx configuration.

Test and Reload Nginx

We’ll now test to see that our Nginx configuration is valid.

sudo nginx -t

You should get a confirmation that says:

Now let’s reload Nginx with the command:

sudo systemctl restart nginx

Now we are completely done working with Nginx.

Git Repo Setup

Now we’ll need a way to deploy our app. Here’s the TL;DR of our plan:

• Create app repo
• Create bare repo
• Create githook to receive our commits and direct them to app repo

So let’s get started. Let’s create and navigate to our app repo.

cd /var/www/html
sudo mkdir Vue
cd Vue

This will be our repo for our application’s files. We’ll now need to initialize a Git repo inside of our app folder.

git init

That’s all we’ll need to do for this folder. Exit back out and let’s create the bare repo and do its setup.

cd ..
sudo mkdir repo
cd repo

From here, we’ll need to initialize a bare repo with the Git command:

git init --bare

We’re going to create a post-receive githook in our hooks folder. This will intercept our commits and push the files to the Vue folder.

sudo nano hooks/post-receive

Paste the following code:

#!/bin/bash
git --work-tree=/var/www/html/Vue --git-dir=/var/www/html/repo checkout -f

Save out the file with ^O, press enter, and exit the file with ^X. Next we’ll need to give this file permission to be executed.

sudo chmod +x hooks/post-receive

And that’s all we’ll need to do for our Git setup.

Deploy VueJS Application

Keep your terminal for your droplet open, as we’ll come back to it in a few moments. Switch over to your local files and navigate to your Vue application. We’ll need to initialize the local Vue app folder as a Git repo and set it up.

git init
git remote add origin root@YOUR_DROPLET_IP:/var/www/html/repo
git add .
git commit -m "Initial commit"

This will prepare all of our files to be deployed to our bare repo on our droplet. To deploy, simply push your commit.

git push origin master

If you’re not using SSH Keys, you’ll be prompted to enter your droplet’s password. Do so and then the commit will be pushed to the droplet.

Anytime you want to push new changes from your local Vue app to your droplet, you will need to git add and git push the commits as we did above. So that’s it! We’ve now deployed our VueJS application to our droplet. But there’s a few last steps to complete!

Finalize Vue Application

Switch back over to your droplet console and navigate to your Vue folder.

cd /var/www/html/Vue

If you run the ls command, you should now see your application’s files all in the folder.

We’ll now need to install the app’s dependencies.

npm install

Depending on how many dependencies your app requires, this may take a few moments. Once they’re installed, we’ll need to “bundle” our application. Since we’re using Webpack with our app, we have a built-in command to bundle our code for production. Let’s run it.

npm run build

This will create a dist folder containing all of our bundled code. Depending on how many modules you’ve added to your application, this process may take a few moments.

Once the bundling is done, your Vue application should now be available to view on the web! If you’ve setup a domain name to your droplet, head to the address, otherwise enter in the droplet IP in your browser. For my application, mine shows the default template for a Vue application.

Note: Anytime you push new changes to your droplet, you’ll have to run the npm run build command from your droplet console.

I hope this step-by-step guide for deploying a VueJS application to Digital Ocean was easy to follow and clear to understand. If you have any questions or comments, feel free to send them my way. Also, check out my website!