Can't deploy React App to Heroku

1

I am trying to run my simple node app on Heroku.
Here is my server.js(starter point):

require('babel-register')

const express = require('express')
const React = require('react')
const ReactDOMServer = require('react-dom/server')
const ReactRouter = require('react-router')
const StaticRouter = ReactRouter.StaticRouter
const _ = require('lodash')
const fs = require('fs')
const PORT = process.env.PORT || 8080
const baseTemplate = fs.readFileSync('./index.html')
const template = _.template(baseTemplate)
const App = require('./js/App').default

const server = express()
server.use('/_public', express.static('./_public'))

server.use((req, res) => {
  const context = {}
  const body = ReactDOMServer.renderToString(
    React.createElement(StaticRouter, {location: req.url,
      context: context},
    React.createElement(App))
  )

  res.write(template({body: body}))
  res.end()
})

console.log('listening on port', PORT)

Here is the package.json:

{
  "name": "medium",
  "version": "1.0.0",
  "description": "SSR react static website",
  "main": "server.js",
  "scripts": {
    "build": "node_modules/.bin/webpack",
    "dev": "node_modules/.bin/webpack-dev-server",
    "lint": "eslint js/**/*.js server.js",
    "watch": "node_modules/.bin/webpack --watch"
  },
  "engines": {
    "node": "6.10.3"
  },
  },
  "keywords": [
    "react"
  ],
  "dependencies": {
    "axios": "^0.16.1",
    "babel-loader": "^7.0.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-register": "^6.24.1",
    "express": "^4.15.3",
    "history": "^4.6.1",
    "lodash": "^4.17.4",
    "react": "^15.5.4",
    "react-disqus-thread": "^0.4.0",
    "react-dom": "^15.5.4",
    "react-google-maps": "^7.0.0",
    "react-icons": "^2.2.5",
    "react-redux": "^5.0.5",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "react-transition-group": "^1.1.3",
    "reactstrap": "^4.6.2",
    "redux": "^3.6.0",
    "redux-thunk": "^2.2.0",
    "shortid": "^2.2.8"
...
}

In the console it prints app is starting at xxxx port. But then the app crashes with the following message

heroku[router]: at=error code=H10 desc="App crash

2

Can you post all the logs from Heroku?

3

These links might be of help.

Deploying React with Zero Configuration

Deploying your React app to Heroku with Webpack

GETTING A SIMPLE REACT APP ON HEROKU

1 Like
4

I think I’ve found a problem -
when I try to run heroku local - it doesn’t work either
Here’s an error screenshot:

herlc.png987×379 83 KB

5

Do you have a Procfile setup? If not, add a start script to your package.json:

"start": "node server.js"

6

I have a Procfile : web: node ./server.js

7

Add presets for es2015 and react to babel-register

edit:

require('babel-register')({
   presets: ['es2015', 'react']
})
8

Thank’s for your help, it’s helped but didn’t solved the problem. The proccess finishes by itself
Here’s an example’s of commands

123.png840×258 46 KB

But npm run dev works properly.
I tried even heroku local -f Procfile -p 5051 but result is the same
Screenshot from 2017-06-02 00:19:17.png837×140 26.2 KB

9

Oh
I accidentally have deleted server.listen(PORT) in express(. THat’s why it didn’t work

10

thanks for share. i try to solve a problem similar and your answer save me. thanks a lot