How to deploy a Vue.js app to Heroku

This is the quickest way that I have found to deploy a Vue + webpack app that was generated by the vue-cli to Heroku. The idea is to have Heroku build the app and serve it with express in minimal time.

Step 1. Add these postinstall and start hooks to your package.json scripts section:

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

Step 2. Create a server.js file in the root of your app:

var express = require('express')
var path = require('path')
var serveStatic = require('serve-static')

var app = express()
app.use(serveStatic(path.join(__dirname, 'dist')))

var port = process.env.PORT || 5000
app.listen(port)
console.log('server started ' + port)

Step 3. Configure Heroku to install dev dependencies:

This step is required to get the necessary packages installed to run and serve the build on Heroku, since all the required packages were placed into devDependencies when the app was generated.

$ heroku config:set NPM_CONFIG_PRODUCTION=false

The alternative to this step would be to move all the devDependencies into dependencies.

Sources

https://medium.com/@sagarjauhari/quick-n-dirty-way-to-deploying-vue-webpack-apps-on-heroku-4ab964ee536#.uer4mup5h
https://devcenter.heroku.com/articles/nodejs-support