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-buildsConfiguring 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.jsPreparing 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.gitCreating 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.shVoila! 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.
