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

 

server.js

 

 

 

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