Easy 4 Steps: Auto Deploy Vue.js App on Heroku

I was searching to deploy my Vue.js app on Heroku in best possible way. found articles which were now old to deploy Vue.js app on Heroku. Here, I am writing this to deploy your Vue.js app with continuous integration delivery and deploy your Vue.js app on Heroku.
Prerequisites:

• basic npm knowledge
• basic git knowledge
• basic Vue.js knowledge

Topic covered in this tutorial:

1. Create a Vue.js project
2. Configure Vue.js app to serve app on express server locally
3. Create a git repository on GitHub and push your code
4. Create and configure Heroku app
5. Configure Vue.js project and Heroku app with GitHub, so that Heroku can serve our app on every new push

Step 1. Create a Vue.js Project

if you don’t have Vue locally. first install Vue.js (instructions here). We’ll also need Vue’s CLI to easily crate project. I believe, you are already familiar with npm package manager:

npm install vue
 npm install -g @vue/cli
 vue create <YOUR-PROJECT-NAME>
 cd <YOUR-PROJECT-NAME>
 npm install
 npm run serve

Now your project should be up and running at localhost:8080

Step 2. Configure app to serve on express server locally

Go back to terminal and stop running app using ctrl+c command.

Now install express and add a server.js file to serve Vue.js app

npm install express serve-static --save

Create a server.js file under you YOUR-PROJECT-NAME dir, it should look like below:

Add following script to serve your app on express static server in server.js file.

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

const app = express()

//here we are configuring dist to serve app files
app.use('/', serveStatic(path.join(__dirname, '/dist')))

// this * route is to serve project on different page routes except root `/`
app.get(/.*/, function (req, res) {
	res.sendFile(path.join(__dirname, '/dist/index.html'))
})

const port = process.env.PORT || 8080
app.listen(port)
console.log(`app is listening on port: ${port}`)

Now we can run run our server.js file to test our app running on configured port.

Note: before running server.js. we must need to build our vue.js app to create dist dir
npm run build

your dist directory should be build and ready to serve.

Run following command to test your server.js file locally

node server.js

test this on your browser navigating at localhost:8080

Now edit your package.json file to tell heroku to serve app from your server.js file.

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "start": "node server.js" <--- add this line under scripts block
  },

you are done now with your project locally. no more work here.

Step 3. Create a git repository on GitHub and push your code

GitHub is a Git repository hosting service, but it adds many of its own features. While git is a command line tool, GitHub provides a Web-based graphical interface. It also provides access control and several collaboration features, such as a wikis and basic task management tools for every project.

Create a git repository on GitHub and setup with your created project

setup remote GitHub repository in your project terminal using command as follows:
git remote add origin https://github.com/<your-user-name>/<repo-name>.git

Push your code to GitHub

Tip: Don’t forget saving all edited files before pushing on GitHub.
git push -u origin master

cool!! 🙂 you should have your source code on GitHub now.

Step 4. Create and configure Heroku app

Heroku is a cloud platform as a service. That means you do not have to worry about infrastructure; you just focus on your application. ... Full Logging and Visibility - easy access to all logging output from every component of your app and each process.

Create an app on Heroku(if you don’t have an account yet, signup for one.)

here is snip to add a new app:

When app is created, it will redirect you to app deploy tab on Heroku dashboard.

• connect your Heroku account to GitHub if you haven’t already connected.
• Under deployment method choose connect to GitHub option
• search your repository name, after successful search, you should have your GitHub repository as follows:

connect to it and enable auto deploy option on Heroku. first time it does not deploy because there was no new push. it would deploy automatically on every next new push on selected branch.

Do a manual deploy for now and open your app from Heroku dashboard.

Kudos!!! 👏 you are finally done.

If deployment is successful, test out your project’s URL https://<YOUR-PROJECT-NAME-HERE>.herokuapp.com and you’re done!

I hope this tutorial was helpful to anyone looking to auto deploy your Vue.js app from GitHub to heroku on every new push.

Please add you feedback and comment if you have any issue or need any help on above.