How to Auto Deploy Vue.js App From Github to Heroku Platform in 2020 Full Tutorial For Beginners

You are currently viewing How to Auto Deploy Vue.js App From Github to Heroku Platform in 2020 Full Tutorial For Beginners
  • Post author:
  • Post category:Vue
  • Post comments:0 Comments


Welcome folks today in this blog post we will be talking about how to auto deploy vue.js app from github to heroku platform in 2020 This is a tutorial for Beginners in 2020. All the instructions are given below. All the source code is also given below. A step by step youtube video is also shown below.



You need to have basic knowledge of node.js vue.js and npm


Create Vue.js Project


You need to create the vue.js project and go into that directory and run the vue.js app like this


cd testproject


npm run serve


This will start the application at port 8080


Building Vue.js Project


Now first of all we need to build our vue.js project and create the dist directory inside the root directory of our project.

To build the vue.js Project you can execute the following command as follows:


npm run build





Configuring Express Server in Vue.js


Now we need to configure the express server which is very much necessary for deployment purpose. So go to the command prompt and execute the following command


npm i --save express serve-static


Now you need to create a server.js file inside your root directory of your vue.js project






Now after this if you run your node.js server by executing the below command as follows:


node server.js


Now we need to tell Heroku to run our node.js server like this for this go to your package.json file annd make these changes like this




Here we have added a simple start script which will start the node server for us in heroku


Create Github Repository


Now we need to deploy our code to github so that everytime we make a change to our code it will be automatically deployed to heroku .For this you need to go command prompt in the directory of your project


git add .

git commit -m "first commit"

git remote add origin ##yourgithuburl##.git

git push -f origin master


So with the help of above commands you will be able to deploy your code to Github


Configure Heroku App in Dashboard




Click on Automatic Deploys option and also click on Deploy Branch to manually deploy the app for the very first time and then now if you update your code and push to github then heroku will automatically build your app


Leave a Reply