https://github.com/zdanowiczkonrad/universal-typescript-react
Frontender's React + TypeScript Swiss Army knife
https://github.com/zdanowiczkonrad/universal-typescript-react
dynamic-imports enzyme hot-reload react redux typescript universal webpack
Last synced: 2 months ago
JSON representation
Frontender's React + TypeScript Swiss Army knife
- Host: GitHub
- URL: https://github.com/zdanowiczkonrad/universal-typescript-react
- Owner: zdanowiczkonrad
- Created: 2018-03-30T14:33:03.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-17T16:24:55.000Z (over 6 years ago)
- Last Synced: 2024-04-25T09:02:38.310Z (about 1 year ago)
- Topics: dynamic-imports, enzyme, hot-reload, react, redux, typescript, universal, webpack
- Language: TypeScript
- Size: 470 KB
- Stars: 11
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Universal TypeScript + React
=====================
Your React + TypeScript Swiss Army knife
[](https://travis-ci.org/zdanowiczkonrad/universal-typescript-react) [](https://badge.fury.io/js/universal-typescript-react) [](https://david-dm.org/zdanowiczkonrad/universal-typescript-react.svg)
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:
* [x] Node 8
* [x] Yarn 1.5
* [x] Webpack 4
* [x] TypeScript 2 (+ ts-loader)
* [x] TypeScript import alias
* [x] React 16+
* [x] Sourcemaps (prod + dev + tests)
* [x] HMR (with local state keeping)
* [x] fork-ts-checker (async compile)
* [x] tslint
* [x] Promise polyfill
* [x] Tests (Karma + Jasmine)
* [x] Enzyme (for React)
* [x] Splitted dev/prod configs
* [x] Vendor bundle/chunks
* [x] Styles support (LESS/SASS/PostCSS)
* [x] One CSS file per bundle (ExtractTextPlugin)
* [x] React Router
* [x] Redux
* [x] Redux Thunk
* [x] Redux Dev Tools
* [x] Universal rendering
* [x] Redux state prehydration
* [x] Server support for router paths
* [x] Webpack Environment plugin
* [x] Dynamic imports (Loadable) 🎆
* [x] Styleguidist
* [x] 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:
* [x] 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