A React example project to demonstrate how to achieve code splitting plus server rendering using TypeScript 😍😍😍.
Its main goals are:
- Implement React code splitting
- Implement React server rendering
- Use Redux with server rendering
- Use React Router in both case
- Build all this features
And the last but not the least, this project demonstrate and explain how to make compatible and take advantage of TypeScript in all this features 💪.
Install
npm install
Build
npm run build-dev
Run
npm run serve
This project implements the minimal requirement to demonstrate its purpose.
- TypeScript v2.8
Universal
- React v16.3
- React Loadable v5
- React Redux v5
- React Router v4
Server
- Express v4
- Express es6 template engine
Build tools
- Webpack v4
- Babel v6
Source code is under source folder.
Server code is built into server folder.
Client code is built into client folder.
Both Client and Server application are built through Webpack.
Code splitting is made possible using React Loadable and Webpack dynamic imports.
Server rendering is dependent on build step below.
TypeScript type check and emit JavaScript es2015 (TypeScript without types) consumable by Babel.
babel-preset-react transform React jsx and babel-preset-env es2015 syntax into code understandable by the browser.
Babel apply plugins to make code splitting compatible with server rendering:
On server build
dynamic-import-node transpile import() to a deferred require() for node.
On client build
syntax-dynamic-import allow babel to parse dynamic import syntax but not transform it. Then Webpack split code via dynamic import.
On both build
react-loadable/babel declare wich modules are being loaded.
This sample project was made according to these documentations.
Code Splitting
Server Rendering