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.