How to deploy Vue.js on Heroku

You don’t have to(mostly), just click a button!

Vue.js is probably the best js front-end framework, and Heroku is probably the best PaaS.

Image for post
Image for post
vuejs — Heroku

Together they define synergy.

  1. Install the following npm dependencies
npm install express dotenv serve-static

2. Create a file named server.js in the project folder

Add the following code snippet in it

// Server fileconst express = require('express')const serveStatic = require('serve-static')const path = require('path')const dotenv = require('dotenv');dotenv.config();const app = express()// All urls goto to index.html in /dist folder [build folder]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 || 8081;app.listen(port)console.log(`App is listening on port: ${port}`)

The above code is pretty easy to understand, we first import all the required and serve the index.html to all paths (vue router handles them after this, if you have it, else don’t worry, it will work fine)

Also, add PORT in .env file, if you don’t know about this thing, don’t worry, it will use 8081 port.

3. In your package.json, add the following code snippet

"scripts": {...
"start": "node server.js"
...
},

4. Remember to add your build folder ( /dist is default ) and node_modules/ to .gitignore file. ( they are added by default, just recheck)

5. Add, commit, and push your repository to GitHub.

6. On Heroku :

6.1 Create a new App

6.2 In deploy section, connect your GitHub account :

Image for post
Image for post

and select the repository containing your vue.js project

6.3 In settings, configure your environment variables if you have them.

Image for post
Image for post

6.4 Deploy setting :

you can keep automatic deploy setting ON on Heroku if you want, but it’s better to return it off because free tier gives u only 5 builds and if you git push more than 5 times, 6th time you won’t be able to deploy your project.

Image for post
Image for post

Then just click deploy and

That’s it, you are DONE !!!

CONGRATS !!!

I hope you were successful :

Follow me on

Github: https://github.com/dev117uday

Linkedin: https://www.linkedin.com/in/uday-yadav-4995a818a/

Sophomore && CSE Undergrad

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store