Universal TypeScript + React
Your React + TypeScript Swiss Army knife
Universal and up to date configuration with TypeScript and React and all modern frontend essentials, including dynamic imports, server-side rendering with prehydration and full hot module reload. Not forgetting about styles and all you need to develop webapps. Typesafely! 🙃
Heavily inspiried/influenced by: https://github.com/gaearon/react-hot-boilerplate/ https://github.com/piotrwitek/react-redux-typescript-guide
Quick checklist:
- Node 8
- Yarn 1.5
- Webpack 4
- TypeScript 2 (+ ts-loader)
- TypeScript import alias
- React 16+
- Sourcemaps (prod + dev + tests)
- HMR (with local state keeping)
- fork-ts-checker (async compile)
- tslint
- Promise polyfill
- Tests (Karma + Jasmine)
- Enzyme (for React)
- Splitted dev/prod configs
- Vendor bundle/chunks
- Styles support (LESS/SASS/PostCSS)
- One CSS file per bundle (ExtractTextPlugin)
- React Router
- Redux
- Redux Thunk
- Redux Dev Tools
- Universal rendering
- Redux state prehydration
- Server support for router paths
- Webpack Environment plugin
- Dynamic imports (Loadable) 🎆
- Styleguidist
- i18next
Prerequisites
Yarn >= 1.0 Node >= 8.0
yarn global add typescript tslint
App development
Install dependencies, test if all glues together and run the development server
yarn install
yarn test
yarn start
open http://localhost:3000
Test watch mode
yarn test:watch
Components development
This project integrates styleguidist for components development
yarn styleguidist
open http://localhost:6060
Production
A simple production setup: headless tests, prod build and run server.
Build puts artifacts into the dist directory and server should run from there
yarn test:phantom
yarn build
yarn server
SSR
An example of the server-side rendering with the state prehydration.
yarn ssr-server
Todos:
- Check preload dynamic imports with Loadable on the server side and in tests
- Hot reload of styles in the styleguidist (to avoid manual refresh css)
- Consider hot reload of styles in the HMR mode
- Loadable prefetch