Deploying Vue.js Applications built with Webpack to Heroku

iRonin IT Team - Experts in software development

Built your interactive web application using Vue.js with Webpack and wondering how to deploy it? We explain how to deploy Vue.js Single Page Applications to Heroku.

In today’s post we will explain how to deploy Vue.js Single Page Applications built with Webpack to Heroku. As you may remember, we already described how we develop Single Page Applications with Vue.js, and this post is a continuation of this subject, focusing on the deployment phase. At the time of writing, Heroku does not have an official Vue.js buildpack so we need to rely on a custom one.

First, let’s share a few choice words about Webpack and why it is so beneficial to build your Vue.js SPA with it. WebPack is a module bundler, that takes an application’s files and bundles them into static assets, which then can be served to, and displayed by the browser. It respects all the dependencies between files and has a plugin system, which allows us to extend its functionality to support new preprocessor languages, JavaScript features (through babel) and more.

Requirements

Before we deploy the app we need to ensure that we have the following utilities:

If you are on OS X you can install all dependencies with a single command:

brew install heroku gnu-tar && heroku plugins:install heroku-builds

Configuring the application

In this article we assume the app uses Webpack template for vue-cli.

Ignoring dist directory in git

Since we are going to deploy the dist folder directly to Heroku, we need to make sure all files in that directory, except package.json and server.js, are ignored from our git repository in order to avoid conflicts and unnecessary diffs in pull requests.

We can do this easily by creating a dist/.gitignore file with the following content:

*
!.gitignore
!package.json
!server.js

Preparing for distribution

Because we are going to use Express to serve static files we need a minimal package.json manifest (in dist/package.json directory):

{
  "name": "your-project",
  "version": "1.0.0",
  "description": "Your project description",
  "author": "Your name",
  "private": true,
  "scripts": {
    "postinstall": "npm install express"
  }
}

This basically instructs Heroku Node.js buildpack to install the express package as the part of the deployment.

We also need a very simple app to serve our Vue.js application’s files:

// dist/server.js
var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');

app = express();
app.use(serveStatic(__dirname));

var port = process.env.PORT || 5000;
app.listen(port);

console.log('server started '+ port);

Adding Heroku git remote

We need to add Heroku as another git remote for our project repository so we are able to get the application’s name in the deployment script below.

git remote add heroku https://git.heroku.com/your-app-name.git

Creating the deployment script

Since we want to automate deployment as much as possible in order to make the process easier and less error-prone, we are going to create a deployment script that will push the application to Heroku with a single command (eg. deploy.sh):

#!/usr/bin/env bash

app_name=$(heroku apps:info | grep === | awk '{print $2}')
version=$(git rev-parse HEAD)
npm run build
$(cd dist && heroku builds:create --version "${version}" -a ${app_name} --tar $(which gtar))

These few lines of code get Heroku’s application name, assign a new version (based on the current git revision), build the app and upload it to Heroku.

Deploying the Vue app to Heroku

All we need to run is the deployment script:

./deploy.sh

Voila! The Vue app should be now deployed to Heroku.

Summary

With this step-by-step process, we are able to easily deploy Vue.js apps to Heroku without an official buildpack. Should you have any problems with your current deployment process or not trust that Heroku is fit for your web apps, feel free to contact us and we we will be happy to help you find the best option to host and deploy your applications.

Author's Bio
iRonin IT Team

Experts in software development

We are a 100% remote team of software development experts, providing web & mobile application development and DevOps services for international clients.

Similar articles
Comments

Bulletproof your development with remote team augmentation

Read how
This page is best viewed in portrait mode
Our websites and web services use cookies. We use cookies and collected data to enhance your experience, provide additional communication channels, improve marketing materials and enhance our offer. IRONIN SP. Z O.O. SP. K. is committed to protecting all the data that we collect or process in any way, especially data of personal nature. By accepting these terms you agree to our usage of cookies and processing your data, according to our Privacy Policy, and you declare that your browser settings reflect your preferences. Read more You have the right to revoke this agreement at any time, based on the terms of our Privacy Policy. You can change cookies settings in your browser. If you do not agree with us using cookies and processing your data, please change your cookies settings in your web browser and reject these terms. You can find more information about cookies, your data privacy This site uses cookies. By continuing to browse the site, you are agreeing to our use of cookies. data processing, and your rights in our Privacy Policy.