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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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 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