create-react-scripts-ssr
This module is useful if you want to make an universal app.
Important Note
- This Module does not automate the Server-Side-Rendeirng.
- It just make you able to require files that without js or json extensions in server side.
- The index.html is no longer necessary in universal app, and it could be cached by service-worker accidentally with default setting of create-react-app. This module will detect if index-static.html exists instead of index.html to apply HTML related webpack plugins. The generated html would also be index-static.html
Scripts
start:server
start the both client side bundling
and server side bundling
webpack tasks in development mode.
The server will auto reload if code changes.
By default, webpack-dev-server is running on port: 3001 while the server is running on 3000.
The following environment variables are injected to server side bundling
HOST
: The host that the server should be running on.
PORT
: The port number that the server should be running on.
PROTOCOL
: The protocol that the server should be running on.
PUBLIC_URL
: The absolute url that the webpack-dev-server is running.
All client side log would be supressed in the console.
The client build is located in build/client
The server build is located in build/server
An assets json manifest is located in build/assets.json
, which is useful for server-side-rendering.
If autodll plugin is detected, an assets json manifest is located in build/dll-assets.json
, which is useful for server-side-rendering.
This script will start the webpack-dev-server
and the server.js
build:server
trigger both client side
and server side
webpack tasks build.
An assets json manifest is located in build/assets.json
, which is useful for server-side-rendering.
You can start the server by node build/server
after build.
How it works?
Webpack bundle both different environment, the client side and the server side.
Make use of assets-webpack-plugin to produce assets mapping so that server side can know the filename produced in client side build.
Usage
Modify crs.config
Modify crs.config
as below.
const compose = moduleexports = ;
Modify package.json
Modify package.json
as below.
{- "start": "react-scripts start",+ "start": "create-react-scripts start",+ "start:server": "create-react-scripts start:server",- "build": "react-scripts build",+ "build": "create-react-scripts build",+ "build:server": "create-react-scripts build:server",- "test": "react-scripts test --env=jsdom",+ "test": "create-react-scripts test --env=jsdom"}
Add Server.js
Create server.js
under src
directory
;;;;;;;;; // To obtain the actual HOST, PORT, and PROTOCOLconst HOST = processenvHOST || '0.0.0.0';const PORT = || 5000;const PROTOCOL = processenvPROTOCOL || 'http'; // Assets manifest path from client-side dll build (if create-react-scripts-dll is using)const DLL_ASSETS_PATH = path;// Assets manifest path from client-side buildconst ASSETS_PATH = path; // Wait until client-side bundling finished so that assets.json is producedconsole;while !fs; // Read the assetsconst assets = // make sure dll assets before the assets of client-side build // ensure browser require the vendor module first ...JSON ...JSON; const app = ;// in production, the serving files are under build/client folderif processenvNODE_ENV === 'production' app; // render the appapp; app;
Install source-map-support
This step is to make the source mapping correct in the stack trace if error is thrown from server-side
npm i -S source-map-support
or yarn add source-map-support
Start Server in Development Mode
npm run start:server
or yarn start:server
Start Server in Production Mode
npm run build:server
or yarn build:server