-
Notifications
You must be signed in to change notification settings - Fork 398
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
18 react hot loader implementation #69
Changes from all commits
d6cdcab
a34c4f2
10ee722
0d872c6
8b18abe
737edb1
f1500ef
deed45f
ddd6ebd
c0d2dc0
09d2b39
a9155d1
9b6825e
9aeec9e
3eab277
bf0138d
fe382c6
7743bdf
b253260
141f1fb
416518f
744234a
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
) | ||
); | ||
```` |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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' | ||
}, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. You can still using this configuration instead of create devServer.js and more dependencies like express. Configuration:
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I Will.give a try There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Done |
||
|
||
//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(), | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I don't know why we need this plugin. It's to avoid show erros while webpack is compiling There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Let's remove it and.checi There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. About noErrorsPlugin, we have to be careful: |
||
//Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin | ||
new HtmlWebpackPlugin({ | ||
filename: 'index.html', //Name of file in ./dist/ | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We were writing this info in AboutPage, isn't it?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In the about page we can have a summary, but is a good idea to have detailed readme.md when a given user navigates to this sample in Github the readme.md will be automatically displayed