How to deploy a vuejs project to heroku

Question

I am working on this project locally https://github.com/misterGF/CoPilot but now that it is finished, I would like to push it to heroku. the problem is telling heroku to start the app.

In the heroku example, the demo server runs after picking up the info from Procfile with contains this data

web: node index.js

But in my vuejs project, there is no index.js that servers the content.

I only have the main entry point which is index.html and the procfile doesn't work with HTML.

Answer 1

You need to update your package.json file to let heroku know about the packages, for example if you are using express to serve your files:

"scripts": {
   "postinstall": "npm install express"
 }
 // "start": "node server.js" (executing server.js) during start

server.js

var express = require('express')
var path = require('path')
var serveStatic = require('serve-static')

var app = express()
app.use(serveStatic(path.join(__dirname, 'dist')))

var port = process.env.PORT || 8000
app.listen(port)
console.log('server started ' + port)

Don't forget to build.

Look here to read more about build conf: Customizing build process - Heroku

You can also install the http-server globally like this if that is a option:

npm install -g http-server

and update the Procfile to add the configuration as mentioned in above answers.

Just to know:

• npm install will install both "dependencies" and "devDependencies"
• npm install --production will only install "dependencies"
• npm install --dev will only install "devDependencies"