What is the difference to run React server-side rendering locally and on real NodeJS server (IBM Bluemix)

Question

I created a simple react app with serverside rendering using this workshop git as a base with my minor changes. So when I run locally NODE_ENV=server node server.js it works fine. But my attempts to deploy this app on a trial of Bluemix the Nodejs server failed. Here's a log : Here is my server.js code:

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 = 5050
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)
server.listen(PORT)

PS It's obvious that it doesn't understand ES6 syntax in js/App.js, but on my local server it works. By default NODE_ENV=production but according to Bluemix docs I created a file in .profile.d directory node_env.sh code:

export NODE_ENV=server;

But I'm not sure if this file changes node_env.

Answer 1

I'm hoping someone more knowledgeable than me can offer a better solution, but here is what I did to make your app work. There is probably a better answer.

Assuming that you do NOT want to run in production mode...

1) server.js: Listen to the port as set in the PORT env var.
server.listen(process.env.PORT || PORT)

2) package.json: Add start command in scripts

"start": "babel-node server.js --presets es2015,stage-2"

3) Get babel-cli

npm install --save-dev babel-cli

npm install --save-dev babel-preset-es2015 babel-preset-stage-2

4) Create a manifest.yml to set CF properties

 applications:
 - name: rvennam-node-react
   memory: 1G
   disk_quota: 2G
   env:
     NPM_CONFIG_PRODUCTION: false
     NODE_ENV: dev

5) remove eslint dependencies from devDependencies in package.json (there was a mismatch)

Again, this is assuming you want to run on Bluemix under dev mode. If you wanted production on Bluemix, I would think you would want to use webpack to build locally, and then push and serve your dist directory.