How to deploy Vue.js on Heroku

Uday Yadav

May 26, 2020·3 min read

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.

Together they define synergy.

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 :

and select the repository containing your vue.js project

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

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.