How to Server-Side render a Create React App with ForrestJS
We start from a CRA boilerplate and end up with a Universal and Server-Side rendered PWA that you can build upon.
In this step-by-step tutorial you are going to take a Create React App (CRA) app, and turn it into a fully featured Universal PWA with server-side rendering, served by an ExpressJS server.
NOTE:
If you just want to enjoy a ready-to-use app, type this in a terminal:npx forrest run my-new-universal-cra -p 8080
Step n.1 — Kickoff your CRA
Initialize a new CRA project (*):
npx create-react-app my-new-universal-cra && \
cd my-new-universal-cra
Step n.2 — Add a few Dependencies
Now install some ForrestJS
modules:
(I personally use because is much faster than npm
)
yarn add @forrestjs/package-universal && \
yarn add @forrestjs/package-universal-dev -D
The
package-universal
contains a set of common dependencies like React, Express, react-router, ect... We work hard to keep all the internal versions up-to-date so you can enjoy and update just this package :-)