awinogradov / cra-ssr-boilerplate

Create React App by Facebook with stream SSR, HMR, TypeScript and live rebuilding

Create React App (improved)

What's inside?

• create-react-app as base and react-scripts without ejecting;
• express as a server;
• stream rendering because it's fast;
• react-app-rewired for improving base react-scripts;
• TypeScript as a main language for client and server;

Usage

❯ git clone [e-mail]:awinogradov/cra-ssr-boilerplate.git react-ssr
❯ cd react-ssr
❯ npm i
❯ npm start

Point your browser to http://localhost:3000/.

How it works

react-scripts uses webpack-dev-server for incremental building and HMR, it works fine and the only one way to use it with SSR it's proxy. webpack-dev-server compiles all static files, but Express renders html on the different port. It's the reason why we need to use the proxy for static files and ws to webpack-dev-server from Express.

Building

❯ npm run build

Production

❯ npm run start:production

Point your browser to http://localhost:3000/.

License MIT