Deploying a create-react-app

As assignment 3 comes to an end, just wanna share a few options for deploying the app which was built upon the create-react-app boilerplate.

The no-backend option

These are mainly the options stated in the documentation, which makes use of the build folder generated with npm build script command. There’s heroku buildpacks, modulus, now and, and probably more being added soon. These had been useful for deploying the frontend of the app, when our backend was not ready yet.

With backend

Deploying the backend comes with its own set of challenges. Before that, developing one to work with the webpack dev server was also a tough one, here’s a tutorial that came in useful for us. We eventually used Express for out backend, and it worked out quite well for us.

These were steps that worked from the discussion in the issues:

  • Delete Procfile
  • Move "react-scripts": "0.2.3" from devDependencies to dependencies

In the server’s package.json:

To tell npm to run server.js:

  • Replace "start": "nf start -p 3000" with "start": "node server.js"

Heroku runs npm install as default so to also run npm i in our client build’s package.json:

  • Replace "server": "API_PORT=3001 ./node_modules/.bin/babel-node server.js with "install": "cd client && npm install && npm run build && cd .."

In server.js

To tell serve up the static site on the root domain:

  • Add const path = require('path');
  • Replace process.env.API_PORT with process.env.PORT
  • Add app.use(express.static(path.join(__dirname, 'client/build')));

In routes.js (or wherever your routes are)

var router = express.Router();

router.get('/api/feeds', FeedsController.getFeeds); // Get all the feeds

// ... other API routes

router.get('*', function (req, res) {
res.sendFile(path.join(__dirname, '/../client/build/index.html'))

This is so that if I type in a direct url for example, I won’t get a 404.

It sucks that heroku puts dynos to sleep, but a simple workaround I googled was to do:

var https = require("https");
setInterval(function() {
}, 300000); // ping every 5 minutes (300000)

So yea, check out, and phew, time to start studying for midterms.