How to Deploy Vue.js App on Heroku

Heroku is one of the tools used by developers to deploy, manage, and scale modern apps. You can choose Heroku as your host, because this is free and easy to use as deploy. There are lot of articles to deploy Vue JS application on Heroku. But some of articles are giving me an errors. The first time I was to ever host a Vue app on Heroku and it gave lot of errors. Let me show you some points that I got with that errors.

Server.js File issue
Heroku update Warning
Package.json file’s script issues

Okay, then lets start deploying your Vue JS app to Heroku. There are some steps you need to follow.

Create your Vue JS Project
Create Node server and Configurations
Create a git repository and push the code
Heroku create
Run you application

Before get into deploy you need some basic requirements.

Install Node – If you not installed node yet. click here to install. This is very easy. download and install it.
Basic knowledge of npm and git commands

1. Create your Vue JS Project

If you have already create your vue JS project skip this step. This step is for beginners who try to learn vueJS.

First you have to install Vue CLI. If you are not instaled Vue CLI, you have to install it first. click here to install. The you can create a project by calling ,

vue create YOUR_PROJECT_NAME

Then follow the steps that is come from Vue CLI. After you create the Vue App, you need to install some npm packages before deploy.

npm install express serve-static –save

2. Create Node server and Configurations

Change your Package.json file first. in the Script command you need to replace this below code.

“scripts”: {
          “serve”: “vue-cli-service serve”,
          “build”: “vue-cli-service build”,
          “lint”: “vue-cli-service lint”,
          “start”: “node server.js”
},

After that you have to create a server.js file in your root folder. It means in your “cd YOUR_PROJECT_NAME” folder. then paste this below code inside the server file.

const express = require(‘express’)
const serveStatic = require(‘serve-static’)
const path = require(‘path’)

const app = express()

app.use(‘/’, serveStatic(path.join(__dirname, ‘/dist’)))

app.get(/.*/, function (req, res) {
res.sendFile(path.join(__dirname, ‘/dist/index.html’))
})

const port = process.env.PORT || 8080

app.listen(port, () => {
console.log(“Server is up and running on port number ” + port);
});

Just don’t care about the dist folder called in the server.js file. It will automatically build when we are building the vue App. So lets build your Vue JS App. To do that, you can type below command.

npm run build

Now you can see a dist folder in your root folder. You can check your application successfully build or not, using “node server.js” command. or “npm start“. and use “localhost:8080” to preview.

3. Create a git repository and push the code

Create a git repository on GitHub and push your files to that repo. Below I provide some commands to push your codes.

git init
git add README.md
git commit -m “first commit”
git branch -M main
git remote add origin https://github.com/OWNER_NAME/YOUR_PROJECT_REPO_NAME.git
git push -u origin main

4. Heroku create – lets deploy on heroku your Vue JS app

If you are a new user, first of all you have to create Heroku account. To do that you can use this link – https://signup.heroku.com/login.

Then get you terminal or a command prompt in your root folder. then run this below command.

heroku login

Then it will asked about to press any key to open with web browser to identify your login as oAuth. After you login successfully, you can run this below command.

heroku create

How to Deploy Vue.js App on Heroku — Heroku create command

After that you need to run this command.

heroku git:remote -a frightening-werewolf-01134

The following “frightening-werewolf-01134” code came from the above “heroku create” command. You can see the that code the above image in purple color.

After that you can push your code to heroku repository.

git push heroku main