Deploying create-react-app - Statically vs. Dynamically?

Question

I don't understand the difference of deploying a site "statically" vs. using express. The docs in create-react-app says you don't need express to spin up a server? So where and how do you deploy this app? I don't get it. I'm used to creating a server.js with express and then deploying to something like Heroku in the past.

Deployment

npm run build creates a build directory with a production build of your app. Set up your favourite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main.<hash>.js are served with the contents of the /static/js/main.<hash>.js file.

From their docs:

Static Server

For environments using Node, the easiest way to handle this would be to install serve and let it handle the rest:

npm install -g serve
serve -s build

The last command shown above will serve your static site on the port 5000. Like many of serve’s internal settings, the port can be adjusted using the -p or --port flags.

Run this command to get a full list of the options available:

serve -h

Other Solutions

You don’t necessarily need a static server in order to run a Create React App project in production. It works just as fine integrated into an existing dynamic one.

Here’s a programmatic example using Node and Express:

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(9000);

I don't understand why you wouldn't want to run it with express (what I guess is called "dynamically"?). How would that work if you don't have express setup anyway? I don't get "running this statically". I've only ever run apps with express in the past.

The keywords you need to research for understanding this topic is "client-side rendering vs server-side rendering". You can start here: https://medium.com/walmartlabs/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8 — cinnaroll45, Jun 05 '17 at 04:46
@cinnaroll45 I think the question is asking for the importance of HTTP server (Express or Serve) in development environment — Evan Sebastian, Jun 05 '17 at 04:50
The question mentions the "deploy" word 5 times, I doubt the question has anything to do with development. — cinnaroll45, Jun 05 '17 at 04:51

Evan Sebastian · Accepted Answer · 2017-06-05T04:53:32.070

Deploying your site statically means you already have a mean to serve static files using HTTP in your production server (Apache, Nginx, Heroku, S3 etc). These can handle point 2 and 3 in my explanation below, so you don't need to spin up Express or Serve in your production server.

There are several reasons why you might need to spin an HTTP Server in your production machine, and this is not limited to create-react-app.

You can use Webpack Dev Middleware and Webpack Hot Middleware attached to express server to have hot module reloading. Webpack hot module reloading works by injecting code in the client that listens to change in your file using WebSocket endpoint served by the HTTP server.
Sometimes you need to dynamically load static assets (images, fonts) using AJAX alongside your HTML and JavaScript. Most browsers does not allow this due to Cross Origin Requests being limited to HTTP.
If you need client side routing with clean URL using BrowserHistory, you need to use HTTP server with rewrite rule, which you can do pretty easily using Express.

Deploying create-react-app - Statically vs. Dynamically?

1 Answers1