How to deploy a vuejs (Browserify) application to Heroku?

Asked

Viewed 834 times

0

I lifted the server with express, but using a schematic for the webpack because I found nothing related to browserify, follows the code...

// server.js
var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname + "/dist"));
var port = process.env.PORT || 5000;
app.listen(port);
console.log('server started '+ port);

everything is already configured correctly, but is appearing only...

Cannot GET /

Does anyone know how I can do it?

package json.

"scripts": {
    "watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js",
    "serve": "http-server -o -s -c 1 -a localhost",
    "dev": "npm-run-all --parallel watchify serve",
    "build": "cross-env NODE_ENV=production browserify -g envify src/main.js | uglifyjs -c warnings=false -m > dist/build.js",
    "postinstall": "npm install express",
    "start" : "node server.js"
  },

With the command that’s in start the server raises, but the application is not found.

Obs. to start it locally a npm run dev which could not be performed in start on Heroku.

vue.js heroku vue.js-2 browserify

  • How’s your package.json? Heroku logs can help, see if there’s anything unusual about him

  • I added the relevant part of package.json, also tried to check the logs, but it shows me nothing.

  • You can show us the server.js pf Felipe?

  • @Lucascosta, is already in the question

  • Oh yes, I listened to the comment. Try to leave the start this way: "start": "./node_modules/webpack/bin/webpack.js -p --progress && node server.js". And make sure the webpack dependencies are in package.json correctly tb

  • Sorry, I had put the wrong package.json, I already edited it, I tested the above solution and it didn’t work...

  • Hi Felipe, you have this project on github or you can create a .zip so we can test?

  • see if this tutorial serves https://medium.com/netscape/deploying-a-vue-js-2-x-app-to-heroku-in-5-steps-tutorial-a69845ace489

Show 3 more comments

1 answer

1


How are you using the http-server as a server, one option is to run npm-run-all in the start and to host on Heroku omit the host. With these changes the app will be interpreted:

{
  "name": "teste",
  "description": "primeiro projeto em vue",
  "author": "teste",
  "private": true,
  "scripts": {
    "watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js",
    "serve": "http-server -o -s -c 1 -a",
    "dev": "npm-run-all --parallel watchify serve",
    "build": "cross-env NODE_ENV=production browserify -g envify src/main.js | uglifyjs -c warnings=false -m > dist/build.js",
    "postinstall": "npm install express",
    "start": "npm-run-all --parallel watchify serve"
  },
  "dependencies": {
    "express": "^4.16.2",
    "vue": "^2.0.1",
    "babel-core": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babelify": "^7.2.0",
    "browserify": "^13.0.1",
    "browserify-hmr": "^0.3.1",
    "cross-env": "^1.0.6",
    "envify": "^3.4.1",
    "http-server": "^0.9.0",
    "npm-run-all": "^2.1.2",
    "uglify-js": "^2.5.0",
    "vueify": "^9.1.0",
    "watchify": "^3.4.0"
  },
  "browserify": {
    "transform": [
      "vueify",
      "babelify"
    ]
  },
  "browser": {
    "vue": "vue/dist/vue.common.js"
  }
}

I left as dependencies and not devDependencies so Heroku can use them, and I’ve altered the properties start and serve.

  • That’s right, thank you very much!

Browser other questions tagged vue.js heroku vue.js-2 browserify

You are not signed in. Login or sign up in order to post.