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

Sagar Jauhari
Apr 10, 2016 · 2 min read

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:

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.

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.

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).

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store