How to deploy your Vue.js application to Heroku from a GitHub repository

When deploying your applications you need to choose a Cloud- or hosting provider. Heroku is one example – which is easy to use and supports lots of application types, databases, etc. – for developers to deploy, manage, and scale their apps. In addition, you can connect directly to your GitHub repository and enable default deployment, so your app get’s updated each time you push some new code into your repository.

To follow along in this tutorial you need to create a Vue.js application as well as an express server with Node.js (By the way you can also run your Express apps on IBM code engine).

Create a node express server

The first step is to create a node express server inside your Vue.js application to serve your Vue files. Therefore, run the following command:

npm install express serve-static

Then create a file in the root of your Vue.js app called server.js and then add the following code:

const express = require('express');
const serveStatic = require("serve-static")
const path = require('path');
app = express();
app.use(serveStatic(path.join(__dirname, 'dist')));
const port = process.env.PORT || 8080;
app.listen(port);

Finally add the following lines inside your package.json file under scripts:

"postinstall": "npm run build",
"start": "node server.js"

The “postinstall” script will run after installing the dependencies and before starting the app. The “start” script is the default script that will run once all dependencies are installed to start the app.

Set up your GitHub repository and connect to Heroku

Now push your ready to be deployed code from your Vue.js application into a GitHub repository.

In your Heroku dashboard click the New button to create a new app, select things like name and region, and afterwards choose connect to GitHub as your deployment method. You can also create a pipeline to have a staging and production app – e.g., for your staging and main branches – as well as enable automatic deploys, so your app updates each time you push new code to your repository. Under app settings you can configure your app further, for instance add config variables or connect to a domain you own.

The original tutorial can be found here.