Skip to main content

Deploying Vue.js App to Heroku

Deploying a Vue.js App to Heroku

In this tutorial, we are going to learn how to deploy a Vue.js application to Heroku, a popular platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.

Prerequisites​

Before we start, make sure you have the following tools installed on your computer:

  • Node.js and npm: Vue.js requires Node.js version v4.0.0 or above.
  • Vue CLI: This is a command-line tool for scaffolding Vue.js applications.
  • Git: A version control system required by Heroku.
  • Heroku CLI: This is a tool for creating and managing Heroku apps from the command line.

Step 1: Building a Vue.js App​

First, let's create a new Vue.js application using Vue CLI. Open your terminal and run the following commands:

vue create my-app
cd my-app

This will create a new Vue.js application in a directory named my-app.

Step 2: Preparing the App for Heroku​

Heroku needs a Procfile, a text file in the root directory of your application, to know how to run your application. Create a Procfile and add the following line to it:

web: npm run start

This tells Heroku to start your app by running the command npm run start.

Next, we need to modify our package.json file to include a start script. This script will be used by Heroku to start your app. Add the following line to your scripts section:

"start": "node server.js"

Now, we need to create the server.js file in the root directory of our project. This file will be responsible for serving our Vue.js application.

const express = require('express');
const serveStatic = require('serve-static');
const path = require('path');

const app = express();

app.use('/', serveStatic(path.join(__dirname, '/dist')));

const port = process.env.PORT || 8080;
app.listen(port);

In this file, we are creating a simple Express server that serves our Vue.js application from the dist directory.

Don't forget to install the express and serve-static dependencies by running the following commands:

npm install express serve-static --save

Step 3: Building the App for Production​

To prepare our app for deployment, we need to build it for production using the following command:

npm run build

This command will create a dist directory with a production-ready version of our app.

Step 4: Deploying the App to Heroku​

First, initialize a new Git repository in the root directory of your application with the following commands:

git init
git add .
git commit -m "Initial commit"

Next, create a new Heroku application with the following command:

heroku create

Finally, deploy your application to Heroku with the following command:

git push heroku master

Heroku will receive your code, install the necessary npm packages, and start your app using the npm run start command.

Congratulations! Your Vue.js application is now live on Heroku. You can open it in your web browser with the following command:

heroku open

And that's it! You have successfully deployed a Vue.js application to Heroku. Keep exploring Vue.js and happy coding!