CODEWITHSUNDEEP
node.jsherokuvue.jsvuejs2
hidar
hidar

Reputation: 5939

How to deploy a vuejs project to heroku

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.

Upvotes: 9

Views: 2743

Answers (3)

bhansa
bhansa

Reputation: 7504

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"

Upvotes: 3

madllamas
madllamas

Reputation: 518

Using http-server. but the package is not installed globally, so you will have to use the full path to it like so:

web: ./node_modules/http-server/bin/http-server ./ -p $PORT

Upvotes: 2

kano
kano

Reputation: 5920

You also need to define a small static server to serve your index.html file. A simple example setup would be with http-server:

npm install -S http-server

And your Procfile becomes:

web: http-server ./ -p $PORT

Upvotes: 8

Related Questions