cannot deploy to heroku

[hommalex]

2016-07-29T09:56:23.974242+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=simplestarter3.herokuapp.com request_id=28a9fd73-85ca-4b7d-9215-726d332cb64a fwd="87.198.158.214" dyno= connect= service= status=503 bytes= 2016-07-29T10:02:14.620007+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=simplestarter3.herokuapp.com request_id=c4e6cd5b-c295-4532-b789-865b9e394b31 fwd="87.198.158.214" dyno= connect= service= status=503 bytes= 2016-07-29T10:02:15.144654+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=simplestarter3.herokuapp.com request_id=c29c0cae-27c3-4c29-b8b9-2f3164cf3c04 fwd="87.198.158.214" dyno= connect= service= status=503 bytes=

[guruganeshm]

I also encountered with same issue when deploying in heroku, if someone else looking for a solution, here it is :

we need to make changes in package.json as below added "prod": , "postinstall":, "express" dependency and new files "server.js" lastly "Procfile"

In file: package.json

  "scripts": {
    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "prod": "NODE_ENV=production node server.js",
    "postinstall": "webpack -p",
    "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
    "test:watch": "npm run test -- --watch"
  },
"devDependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "chai": "^3.5.0",
    "chai-jquery": "^2.0.0",
    "jquery": "^2.2.1",
    "jsdom": "^8.1.0",
    "mocha": "^2.4.5",
    "react-addons-test-utils": "^0.14.7",
    "express": "^4.13.3",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  }

newly create "server.js" file

var express = require('express');
var app = express();
app.use(express.static(__dirname + '/'));
app.listen(process.env.PORT || 8080);

newly create "Procfile" no extension or anything.

web: node server.js

Once done with above files,

git push heroku master

Working!!

[haquezameer]

@guruganeshm I was facing the same issue while deploying and then I used your method. For me, I had to add babel-core and webpack, express all into dependencies instead of devdependencies which solved deploying issue. But when I visit my app link it displays nothing. The console shows following error Uncaught Error: Cannot find module "./src/index.js" at bundle.js:1 at Object.<anonymous> (bundle.js:1) at n (bundle.js:1) at bundle.js:1 at bundle.js:1 My package.json is

  "name": "Youtube-Player-React",
  "version": "1.0.0",
  "description": "Simple app built using react that uses youtube api to search youtube videos and display them",
  "main": "index.js",
  "repository": "git@github.com:StephenGrider/ReduxSimpleStarter.git",
  "scripts": {
    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "prod": "NODE_ENV=production node server.js",
    "postinstall": "webpack -p",
    "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
    "test:watch": "npm run test -- --watch"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "babel-preset-stage-1": "^6.1.18",
    "chai": "^3.5.0",
    "chai-jquery": "^2.0.0",
    "jquery": "^2.2.1",
    "jsdom": "^8.1.0",
    "mocha": "^2.4.5",
    "react-addons-test-utils": "^0.14.7",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "babel-core": "^6.2.1",
    "express": "^4.15.2",
    "lodash": "^3.10.1",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-redux": "4.3.0",
    "react-router": "^2.0.1",
    "redux": "^3.0.4",
    "webpack": "^1.15.0",
    "youtube-api-search": "0.0.5"
  }
}

server.js file is

const express = require('express');
const port = process.env.PORT || 8080;
const app = express();

app.use(express.static(__dirname + '/'));
app.listen(port);

console.log("server started");

webpack config is

  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

Please help!

[guruganeshm]

@zamhaq I have the same setup as yours, It works fine for me. I hope you resolved it !!

[haquezameer]

Yes I fixed it by moving all the babel modules too from devdependency to dependencies. However, now I am stuck with deploying the weather forecasting app to heroku. It deployed perfectly but doesnt run.

[kira2247]

Excuse me! @zamhaq @guruganeshm can you guys handle front end router with this issue. I did the same solution above but when redirecting (refresh) the page, it render an error likes: CANNOT GET /....

[khanhhq2k]

@kira2247 add these lines in your server.js:

app.use(express.static(__dirname + '/'));
//////////////////////
app.get('*', (req, res) =>{
  res.sendFile(path.resolve(__dirname, 'index.html'));
});
//////////////////////
app.listen(port);

to tell server to serve index.html when you make a request, react-router will decide which component to render

[kira2247]

@khanhhq2k thanks for your response. I just found it yesterday xD

[hwchan91]

Had the same problem: Followed @guruganeshm method, then had to run 'npm install express', and finally copied everything in devDependencies and pasted under dependencies (per https://stackoverflow.com/questions/41973338/hosting-a-production-react-app-built-with-wepback-on-heroku)

Works!

[sri1214]

Thanks all , got it working with all the above changes. So do we really need an express server for a react app to run on heroku?