Enable React-Hot-Reloader with Webpack #631
Conversation
mtscout6
changed the title
|
I put up a youtube video demonstrating these changes. |
mtscout6
changed the title
|
@react-bootstrap/collaborators That should be everything for this to work. |
|
Actually I found one more thing, just a minute. |
|
Ok, now it should be good. |
| @@ -11,10 +11,26 @@ Pages](http://pages.github.com/). | |||
| From the repository root run `npm run docs` and navigate your browser to | |||
| `http://localhost:4000`. This will start an express base node server with | |||
| webpack-dev middleware that will watch your file changes and recompile all the | |||
| static assets needed to generate the site. | |||
| static assets needed to generate the site. In the console output you'll see that | |||
| that we bind to two ports. The first port is the one you'll use to load the docs | |||
There was a problem hiding this comment.
you'll see that that two that ?
I maybe wrong. Eng is not my native.
There was a problem hiding this comment.
If that's the worst thing in this you can find, then I guess I can fix it 😉
| @@ -21,8 +21,11 @@ if (development) { | |||
| }); | |||
|
|
|||
| app.use(function renderApp(req, res) { | |||
| res.header('Access-Control-Allow-Origin', target); | |||
There was a problem hiding this comment.
in webpack.config.js
devServer: {
headers: { 'Access-Control-Allow-Origin': '*' },
headers: { 'Access-Control-Allow-Headers': 'X-Requested-With' }
}There was a problem hiding this comment.
No the server.js script is not run in the same process as the webpack-dev-server. We need the process doing the server side rendering to allow requests to a different service. If you took this out then you'd run into errors in the browser due to cross origin request violations.
There was a problem hiding this comment.
I had commented out both lines Access-*,
then npm run docs,
then open in browser all pages with opened dev-console.
All is working and clear. Navigation, components rendering.
Then I had changed code on two pages: Components and Intro
and those changes showed up in browser as it should be.
No errors at all.
What should I do to reproduce cross origin request violations errors ?
| @@ -27,7 +27,6 @@ export default (config, options) => { | |||
| jsLoader = value.loader; | |||
|
|
|||
| return _.extend({}, value, { | |||
| loader: jsLoader + '!client', | |||
There was a problem hiding this comment.
As I understand we can remove "client-loader": "0.0.1", from package.json ?
I didn't downloaded this PR yet.
Only looking through diffs on GitHub.
(and you've already made three fixes 😄 what caused me to refresh this page three times)
There was a problem hiding this comment.
Removed 😄 thanks for finding that.
+ Enable webpack-hot-loader for css changes + Enable react-hot-loader for component changes with state retention. + Better fail over when nodemon process fail + If you change the webpack configuration this will restart the webpack-dev-server. + Video link to demo this feature in docs readme.
|
Whaaahh! Coool. And it is so fast now I like it a lot. Thank you! 👍 |
|
I've been wanting this for a while myself, just been dragging my feet on the dirty work... |
|
Actually today you already marked as done second item in my ToDo list. 😄 👍
If we could remove it at all it would be nice 😃 |
|
It's still worth keeping that plugin for the production build, since it allows us to parallelize the download of JavaScript and CSS. |
If you mean burden of maintenance, I understand you now. |
I am not finished yet my learning of the whole process, so I didn't know it. |
|
nice job |
Enable React-Hot-Reloader with Webpack
Now that we have the webpack-dev-server running in a separate process it's time to enable hot reload for an even more amazing development experience.
Issues still to resolve.
docs/dev-runscript