Quick & dirty: How to deploy a fullstack Vue.js app with a working node.js backend

TL:DR: Take me to the source code

As the title says, I'll make this quick, first describing what's going on in three steps, using mainly the (Power)Shell:

1. Setting up a basic node backend.
2. Setting up the Vue client.
3. Configure npm scripts to automate deployments from Github.

Make sure to execute these commands as su, should you follow on a Linux machine.

1. The Node part

# Create a new working directory, change into it
$ mkdir node-vue-app && cd node-vue-app

# Initialize an npm project and a git repos
$ npm init -y && git init

# Create a client folder to hold the vue project, 
# a public folder from which to serve it later 
# and an index.js for our server logic
$ mkdir client && mkdir public
$ touch index.js

# Install the relevant server dependencies
$ npm i express

# Add node_modules and public folders to a .gitignore file
$ echo "node_modules" >> .gitignore
$ echo "public" >> .gitignore

Then, add a minimum of the following to the index file (e.g. with sudo nano index.js or a dedicated IDE).

const express = require('express');
const app = express();
const host = http://localhost
const port = 3000

// We'll use the public directory to serve the Vue App
app.use(express.static('public'));

app.listen(port, () => {
 console.log(`App listening on ${host}:${port}`);
});

Then, stage & commit these first changes:

$ git stage --all
$ git commit -m 'Initial commit backend'

2. The Vue part

# If you do not have it yet, install the Vue cli
$ npm i -g @vue/cli

# Move into the client folder and init a new, default (-d) Vue project inside
$ cd client && vue create . -d

# Create a vue.config file and fill it with the content below
$ touch vue.config.js

The following configuration will make sure our Vue app is built inside of the public folder of the Node app. This is not absolutely necessary, but will come in handy for our use case - whenever we deploy the node app, we make sure to also deploy the client app as well.

// Inside the vue.config.js file
const path = require("path");

module.exports = {
 outputDir: path.resolve(__dirname, "../public")
}

So much for the foreplay, let's setup the actual config.

Before reading ahead, move to Github and create a new repository. You can link your local environment with the remote one according to the tooltips on Github, so I'll skip that step. Once that's done, push the changes and read ahead.

3. Configure the npm scripts

Now to the interesting part. It's a very basic setup, but should give you an idea of what to do. In a production environment, it also comes in handy to use pm2, a node process manager. Let's install that:

$ npm i -g pm2

Now, assuming you're still in the /client directory of your app, make sure to have the following script to your package.json file:

{
 // ... name, version etc.
 "scripts": {
   "build-app": "npm install && npm run build",
   "serve": "vue-cli-service serve",
   "build": "vue-cli-service build",
   "lint": "vue-cli-service lint"
 }
 // ... dependencies, other config
}

That's it. Now let's step out of the client directory and configure the final step.

cd ..

Being in the root directory, make sure to have the following scripts available in your package.json file. The following is going on:

1. If there are changes, they'll be pulled down from the remote git repos.
2. Node builds up the client app in the public folder.
3. It also installs project dependencies.
4. Then, it starts up the app with pm2 and opens a basic monitor where you can see it running.

{
 // ... name, version etc.
 "scripts": {
  "build-app": "git pull && npm run build-client && npm install && npm start",
  "build-client": "mkdir -p public && cd client && npm run build-app && cd ..",
  "start": "pm2 start app.js -n Convertible9000 && pm2 monit"
 }
 // ... dependencies, other config
}

Note: If the app is already running with pm2, you'll need to reload it

# Instead of --all, you can specify the app's name
$ pm2 reload --all 

Finally, push the changes back to Github.

$ git stage --all
$ git commit -m 'Setup the build configuration' 
$ git push

4. Wrap up

And that's it. Assuming you deleted the whole project from your mashine, cloned it and ran the build-app script, your app will be up and running in a productive manner. It takes as much as:

# Pull down the demo repos
$ git clone https://github.com/tq-bit/node-vue-fullstack-automation.git

# Step in and start the build process
$ cd node-vue-fullstack-automation && npm run build-app

I tried to pull the same on my raspberry at home, here's the result.

The built app is up and running on port 3000. 

Next, you could also use Git hooks  or Github webhooks to automate your workflow even further, say to always pull down the master branch when a merge was done to it or to notify your colleagues when a deployment failed. Perhaps you've already got something in mind?

This post was originally published at https://blog.q-bit.me/quick-dirty-how-to-deploy-a-fullstack-vue-js-app-with-a-working-node-js-backend/
Thank you for reading. If you enjoyed this article, let's stay in touch on Twitter 🐤 @qbitme