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.
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:
Configuring the application
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:
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):
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:
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.
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`):
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:
Voila! The Vue app should be now deployed to Heroku.
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.