Awesome Open Source
Awesome Open Source

Typescript React Redux Isomorphic Hot Example.

About

This is a starter boilerplate app I've put together using the following technologies:

  • React
  • React Router
  • Express
  • Typescript
  • Webpack for bundling
  • Webpack Dev Middleware
  • Webpack Hot Middleware
  • Redux's futuristic Flux implementation
  • Support ReduxDevTools (developer experience)
  • TSLint to maintain a consistent code style
  • style-loader, sass-loader and autoprefixer to allow import of stylesheets in plain css, scss,
  • react-helmet to manage title and meta tag information on both server and client

Feature:

  • Support docker
  • Server side render + fetch data
  • React hot reload
  • Server render supports react hot reload
  • Server does not reload after change client code

How to use

$ npm run docker:run

# Connect to docker container
$ npm run docker:exec

# NOTE. After work you should stop container
$ npm run docker:stop
# Developer mode
$ npm run start

$ npm run build
$ npm run server
# TSLint
$ npm run tslint

# Unit test
# TODO

Explanation

Client side

The client side entry point is reasonably named client/index.ts. All it does is load the routes, initiate react-router, rehydrate the redux state from the window.__PRELOADED_STATE__ passed in from the server, and render the page over top of the server-rendered DOM. This makes React enable all its event listeners without having to re-render the DOM.

Server-side Data Fetching

...

Routing and HTML return

...

TODO:

  • Storybook
  • test (mocha, chai, chai-http, enzyme, sinon, jsdom)
  • webpack/plugins/assetsManifest.js
  • Dockerfile

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
typescript (10,415
react (5,175
redux (1,152
express (472
server-side-rendering (144
webpack3 (49

Find Open Source By Browsing 7,000 Topics Across 59 Categories