Deploy your VueJS app to Heroku


Today we will deploy SPA app based on VueJS to free Heroku instance. Also we will use Express.js based server to serve our content. Let’s go.

Create your Heroku project

Let’s start from simple things - Heroku project. First - install Heroku CLI tools to get it working (docs).

heroku create PROJECT-NAME

Just pass your project name as parameter to command line command. You can skip it and just get random name from Heroku generator.

Set Heroku ENV variables

To run your application in production mode, you should set ENV variable at Heroku. It’s super simple, just run:

heroku config:set NODE_ENV=production --app PROJECT-NAME

Add server configuration

Awesome. Almost done! Let’s install and setup Express.js server.

Install first:

npm install express --save

Create single file and call it server.js inside root directory of your project.

var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname + "/dist"));
var port = process.env.PORT || 5000;
app.listen(port);

Build your project

Okay, so as a next step we need to build your project and pass to your server static files.

npm run build

Next - find line like “start”: “XXX” in your package.json, and replace command part to:

node server.js

Run your app locally

Just run:

node server.js

And open your browser at http://localhost:5000.

Push everything to Heroku

First - add Heroku remote to your project:

heroku git:remote --app PROJECT-NAME

Commit your changes

git add . && git commit -am "Express server"

Push your code to Heroku:

git push heroku master

Done! Just check logs, and open something like https://PROJECT-NAME.herokuapp.com in your browser.