React Transform Typescript Boilerplate

Enables React development with Typescript featuring Hot Module Replacement and CSS modules.

Based on react-transform-boilerplate

Integrates following technologies:

• Webpack
• Typescript
• React
• Sass - (To replace extension in line 32 and sass-loader in line 33 of webpack.config.*.js)
• CSS Modules

To import Sass files in JS use the require function instead of ES2015 import syntax, due to conflicts with typescripts module checking.

• react-transform-hmr - enables hot reloading react components
• react-transform-catch-errors - catches errors inside render()

For convenience they are packed in a single preset called react-transform-hmre but you can make your own.

Syntax errors are displayed in an overlay using @glenjamin’s webpack-hot-middleware, which replaces Webpack Dev Server. This project does not use React Hot Loader.

Installation

git clone https://github.com/gaearon/react-transform-boilerplate.git
cd react-transform-boilerplate
npm install
npm start
open http://localhost:3000

Proxying another project:

git clone https://github.com/gaearon/react-transform-boilerplate.git
cd react-transform-boilerplate
npm install
npm start -- --proxyTarget http://yourdomain.tld
open http://localhost:3000

and integrate script reference to http://localhost:3000/static/bundle.js in the proxied project in dev mode.

Discussion

You can discuss React Transform and related projects in #react-transform channel on Reactiflux Discord.

License

CC0 (public domain)