diff --git a/18 ReactHotLoader/package.json b/18 ReactHotLoader/package.json index 7705afa..f371d82 100644 --- a/18 ReactHotLoader/package.json +++ b/18 ReactHotLoader/package.json @@ -3,6 +3,7 @@ "version": "1.0.0", "description": "", "scripts": { + "clean": "rimraf dist", "postinstall": "tsd reinstall --overwrite --save", "start": "webpack-dev-server", "test": "karma start" @@ -15,7 +16,7 @@ "lodash": "^4.5.1", "object-assign": "^4.0.1", "q": "^1.4.1", - "react": "^15.2.1", + "react": "^15.3.0", "react-dom": "^15.2.1", "react-redux": "^4.4.5", "react-router": "^2.5.2", @@ -41,7 +42,9 @@ "karma-webpack": "^1.7.0", "mocha": "^2.4.5", "react-addons-test-utils": "^15.2.1", + "react-hot-loader": "^1.3.0", "redux-mock-store": "^1.1.2", + "rimraf": "^2.5.4", "sinon": "^1.17.3", "style-loader": "^0.13.0", "ts-loader": "^0.8.1", @@ -49,6 +52,6 @@ "typescript": "^1.8.9", "url-loader": "^0.5.7", "webpack": "^1.12.13", - "webpack-dev-server": "~1.10.1" + "webpack-dev-server": "^1.14.1" } } diff --git a/18 ReactHotLoader/readme.md b/18 ReactHotLoader/readme.md new file mode 100644 index 0000000..4617793 --- /dev/null +++ b/18 ReactHotLoader/readme.md @@ -0,0 +1,84 @@ +# React Hot Loader + Redux dev tool support + +React Hot loader allows us to introduce changes in the application +source code meanwhile we are running our web server and get the changes into our page without having to reload the browser and not loosing the application +state. + +Redux dev tool is a chrome add-on that allows us to browse the state, replay actions, inject actions, export / import state... + +# Steps to configure hot Loader + +You don't need to update the source code of the app, all we have to do is install a list of npm packages, add some babel configuration, and then set a web server + updates on the webpack.config. + +Packages to install (dev dependencies): + + - react-hot-loader + +``` +npm install react-hot-loader --save-dev +``` + +webpack config updates: + +```javascript +//(...) +module.exports = { + + // TODO: remove hot loading entry points in production + entry: [ + 'webpack-dev-server/client?http://localhost:8080', + 'webpack/hot/only-dev-server', + './index.tsx', + './css/site.css', + '../node_modules/toastr/build/toastr.css', + '../node_modules/bootstrap/dist/css/bootstrap.css' + ], + + devServer: { + contentBase: './dist', //Content base + inline: true, //Enable watch and live reload + host: 'localhost', + port: 8080, + noInfo: true, + hot: true, + historyApiFallback: true + }, + + + // (...) + + module: { + loaders: [ + { + test: /\.(ts|tsx)$/, + exclude: /node_modules/, + loaders: ['react-hot', 'ts'] + }, + // (..) + }, + + plugins:[ + new webpack.HotModuleReplacementPlugin(), + new webpack.NoErrorsPlugin(), + // (...) + ] +} +``` + + +# Steps to configure Redux dev tool + +First we have to download the app from the chrome store. + +Then we have to add a line of code to the create store to check +wether is enabled the dev tool (app.tsx). + +````javascript +let store = createStore( + reducers, + compose( + applyMiddleware(ReduxThunk) + ,nonTypedWindow.devToolsExtension ? nonTypedWindow.devToolsExtension() : f => f + ) +); +```` diff --git a/18 ReactHotLoader/src/components/about/aboutPage.tsx b/18 ReactHotLoader/src/components/about/aboutPage.tsx index 85e96d9..d24eaab 100644 --- a/18 ReactHotLoader/src/components/about/aboutPage.tsx +++ b/18 ReactHotLoader/src/components/about/aboutPage.tsx @@ -10,6 +10,9 @@ export default class About extends React.Component { return (

About Page

+

React Hot loader allows us to introduce changes in the application source code meanwhile we are running our web server and get the changes into our page without having to reload the browser and not loosing the application state.

+

Redux dev tool is a chrome add-on that allows us to browse the state, replay actions, inject actions, export / import state...

+

More info about how this sample works in readme.md

Members
); diff --git a/18 ReactHotLoader/src/components/app.tsx b/18 ReactHotLoader/src/components/app.tsx index 85acadc..28bb4c5 100644 --- a/18 ReactHotLoader/src/components/app.tsx +++ b/18 ReactHotLoader/src/components/app.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createStore, applyMiddleware } from 'redux'; +import { createStore, applyMiddleware, compose } from 'redux'; import { Provider } from 'react-redux'; import Header from './common/header'; import reducers from '../reducers'; @@ -9,9 +9,14 @@ import SpinnerContainer from './common/spinner.container'; interface Props extends React.Props { } +const nonTypedWindow : any = window; + let store = createStore( - reducers - ,applyMiddleware(ReduxThunk) + reducers, + compose( + applyMiddleware(ReduxThunk) + ,nonTypedWindow.devToolsExtension ? nonTypedWindow.devToolsExtension() : f => f + ) ); export default class App extends React.Component { diff --git a/18 ReactHotLoader/webpack.config.js b/18 ReactHotLoader/webpack.config.js index 5f95e85..292b416 100644 --- a/18 ReactHotLoader/webpack.config.js +++ b/18 ReactHotLoader/webpack.config.js @@ -14,7 +14,10 @@ module.exports = { extensions: ['', '.js', '.ts', '.tsx'] }, + // Toake into account: remove hot loading entry points in production entry: [ + 'webpack-dev-server/client?http://localhost:8080', + 'webpack/hot/only-dev-server', './index.tsx', './css/site.css', '../node_modules/toastr/build/toastr.css', @@ -26,23 +29,25 @@ module.exports = { filename: 'bundle.js' }, - //https://webpack.github.io/docs/webpack-dev-server.html#webpack-dev-server-cli devServer: { - contentBase: './dist', //Content base - inline: true, //Enable watch and live reload - host: 'localhost', - port: 8080 - }, + contentBase: './dist', //Content base + inline: true, //Enable watch and live reload + host: 'localhost', + port: 8080, + noInfo: true, + hot: true, + historyApiFallback: true + }, // http://webpack.github.io/docs/configuration.html#devtool - devtool: 'inline-source-map', + devtool: 'source-map', module: { loaders: [ { test: /\.(ts|tsx)$/, exclude: /node_modules/, - loader: 'ts-loader' + loaders: ['react-hot', 'ts'] }, //Note: Doesn't exclude node_modules to load bootstrap { @@ -64,6 +69,8 @@ module.exports = { }, plugins:[ + new webpack.HotModuleReplacementPlugin(), + new webpack.NoErrorsPlugin(), //Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: 'index.html', //Name of file in ./dist/ diff --git a/readme.md b/readme.md index 3e2250e..1a17210 100644 --- a/readme.md +++ b/readme.md @@ -16,7 +16,7 @@ start working with React and Typescript. Characteristics: + Using Immutablejs. + Using React Hot Loader. - + ##Call for contributors: Some months ago this project started as something internal... let's create some simple samples that cover react / redux / typescript scenarios that could serve as a guidance and reference in the future... now, we and other developers are using this repo as quick by sample guidance. We keep on adding more samples to it, but we have found that older samples need some updates / refactoring. @@ -166,3 +166,12 @@ Redux Saga it's an interesting alternative for redux-thunk, worth to take a look Use webpack require.ensure to load routes on demand. * [Lazy Loading Webpack / React Router](http://blog.mxstbr.com/2016/01/react-apps-with-pages/) + +## 18 Add support for ReactHotloader and ReduxDev Tools. + +React Hot loader allows us to introduce changes in the application source code meanwhile we are running our web server and get the changes into our page without having to reload the browser and not losing the application state. + +Redux dev tool is a chrome add-on that allows us to browse the state, replay actions, inject actions, export / import state... + +* [React Hot Loader](https://github.com/gaearon/react-hot-loader) +* [Redux Dev Tool](https://github.com/gaearon/redux-devtools)