Deploy create-react-app - statically or dynamically?
I don't understand the difference when deploying a site "statically" versus using express. The docs in create-react-app say you don't need to express to deploy the server? So where and how do you deploy this application? I do not understand. I'm used to building server.js
with expression and then deploying to something like Heroku in the past.
Deployment
npm run build creates a build directory with a production build of your application. Configure your favorite HTTP server so your website visitor is serving index.html, and requests to static paths like /static/js/main
. <hash>
.js are served by the content of the file /static/js/main.<hash>.js
.
From their docs:
Static server
For environments using Node, the easiest way to deal with this is to install the service and let it handle the rest:
npm install -g serve
serve -s build
The last command above will serve your static site on the port 5000
. As with many internal settings, the port can be configured using flags -p
or --port
.
Run this command for a complete list of available options:
serve -h
Other solutions
You don't necessarily need a static server to run the Create React App project in production . It works as well as the built-in dynamic one .
There is 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 an expression (what is called "dynamically" in my opinion?). How will this work if you don't have an express install? I cannot "run this statically". I have only run applications with expression in the past.
source to share
Deploying a site statically means that you already have the ability to serve static files using HTTP on your production server (Apache, Nginx, Heroku, S3, etc.). They can handle points 2 and 3 in my explanation below, so you don't need to spin up Express or Serve on your production server.
There are several reasons why you might need to spin up an HTTP server on 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 reload hot module. Reloading the hotpackup webpack is done by injecting code into the client that listens for a change in your file using a WebSocket endpoint served by an HTTP server.
-
Sometimes you have to dynamically load static resources (images, fonts) using AJAX along with your HTML and JavaScript. Most browsers do not allow this due to cross-lookup requests being limited to HTTP.
-
If you need clean url client side routing using BrowserHistory , you need to use a rewrite rule HTTP server, which you can do quite easily with Express.
source to share