Full-stack universal rendering example for React app

Only for demo purpose. Do not use in production.

This repo is a JavaScript universal rendering example for express on the server side and react on the client side.

Client-side rendering (CSR)

• create-react-app - no need to eject
• react-router-dom

Server-side rendering (SSR)

• express.js - must-have node.js web server
• react - render react app on server-side
• babel - use latest JavaScript features both on server and client side
• Yarn workspaces - use Yarn to manage this monorepo

Guides

Use yarn to install both server and client packages at the project root:

yarn install

Build the client side react application:

cd client && yarn run build

Now, it's ready to run the server and make the server-side-rendering to happen:

cd server && yarn run start

You will see the express server run on port 5000 and the web app built on top of create-react-app.

The following routes are server-side rendered by default:

• /
• /about
• /contact

References

• Making CRA apps work with SSR
• Upgrading a create-react-app project to a SSR + code splitting setup
• Awesome Universal Rendering
• Server-side rendering with create-react-app, code-splitting, preloaded data, React Router, Helmet, Redux, and Thunk