Quick-n-dirty way to deploy Vue + Webpack apps on Heroku

If your Vue app is even a little large, Webpack makes it very easy to manage it. You can use the webpack boillerplate to create a vue app and get running in an instant. It comes with a lot of goodies like state-preserving hot reload which can speed up development by orders of magnitude. Seriously!

Now when its time to deploy your app, and if you’re planning to do it on Heroku, there are several ways:

  1. Ideally, you would want to build your app locally and then only push and serve your minified files from Heroku. This way your app size is minimum and the deployments are super fast.
  2. One not-so-great but simple approach is to let Heroku do the build for you and serve the static pages out of the ‘dist’ folder. This way, you can just push to Heroku and if automatic deploys are enabled, Heroku will build your app for you and then serve files out of the created ‘dist’ folder.

Assuming you’ve used the webpack template from Github, here are the steps if you want to go with Step 2:

1. Create server.js

Create a file in the root of your app named server.js with the following contents:

var express = require(‘express’);
var path = require(‘path’);
var serveStatic = require(‘serve-static’)
app = express();
app.use(serveStatic(path.join(__dirname, ‘dist’)));
var port = process.env.PORT || 5000;
app.listen(port);
console.log(‘server started ‘+port);

This configuration allows you to use the express server to serve static files from the ‘dist’ folder in your app.

2. Add build scripts

Now, how do we use the server.js file we just created? In your ‘package.json’ file, add the sections ‘start’ and ‘postinstall’. Post-install is run by Heroku before starting the server. My ‘scripts’ section looks like this:

“scripts”: {
dev”: “node build/dev-server.js”,

build”: “rimraf dist && mkdirp dist && ncp static dist/static && cross-env NODE_ENV=production webpack — progress — hide-modules — config build/webpack.prod.conf.js”,

postinstall”: “npm run build”,

start”: “node server.js”
},

dev’ and ‘build’ scripts are the default ones that come with the webpack-template. ‘postinstall’ simply runs the build script after installation and ‘start’ uses the server.js file that we created earlier to server the built app.

3. Build locally

Make sure that all the dependencies have been added to package.json using ‘npm install XX — save’ and try building the app locally to make sure that the installation will work on Heroku:

$ rm -rf node_modules
$ npm install --quiet --production
$ npm start

This would invoke the exact commands that Heroku would when deploying your app. If everything goes well, you should be able to push to Heroku and your app will be served after building.

If you see errors in any of the steps above check out Heroku’s troubleshooting guide for node apps.

Update (5/18/2016): It wasn’t planned earlier, but later I wrote another post to describe how you could deploy your app using the 1st way (push only the build app to Heroku).

Like what you read? Give Sagar Jauhari a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.