Content howto hmr

[jmreidy]

Add documentation for a basic How Module Replacement (HMR) setup. The example uses Babel, React, and CSS modules, and explains how to edit webpack.config, what dependencies are needed, and how to structure the source code.

[bebraw]

/s/partiular/particular

[bebraw]

Add link to "open up a PR".

[tleunen]

Thanks a lot @jmreidy for the guide! It helped me a lot.

I have an issue though, when trying to execute this code:

Which then executes this:

And then fails on:

[nodkz]

    "babel": "^6.5.2",
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.13.2",

Upgrade pakages, after that you may replace deprecated https://github.com/gajus/babel-preset-es2015-webpack on

{
    "presets": [
        [
            "es2015",
            {
                "modules": false
            }
        ]
    ]
}

[jmreidy]

Hey all - thanks for the feedback! I've begun integrating the changes suggested here, and will update you when they're complete.

[jmreidy]

Docs are updated. If the review looks good, I'll rebase to a single commit.

@tleunen, could you try using the updated example information and see if it works?

[tleunen]

I was already using the same configuration, for the presets. So I updated every dependency again and now the error is a bit different.

I both tested the normal webpack and the webpack-dev-server.

webpack runs fine, and the generated code works perfectly. (at least from what I saw).

The problem comes from webpack-dev-server. With or without the hot reload, it fails at the same place. But the error is a bit different though.

There's somewhere a call to __webpack_require__(request) with an undefined request. Not sure why :/ Always when loading something in react-proxy/node_modules/lodash it seems

[TheLarkInn]

Cc @bebraw

I think since there are many different HMR recipes, maybe we could structure this in like How-To -> HMR Recipies -> Babel/React/Redux

I think that way we encourage other recipes in here for many state libraries and frameworks. And it reinforces a much asked 'cookbook' for certain topics.

[tleunen]

@jmreidy I went through your entire guide again and in fact I had missed one important detail...
I forgot to import the AppContainer and wrap my app with it ;)
import { AppContainer } from 'react-hot-loader'

[TheLarkInn]

@tleunen was it something easily missed or do you think it could be stated better. It's things like this which I believe help developers from getting tripped up.

[tleunen]

To be honest, the first time I read it was quite in diagonal. And the setup for rendering the component was very similar to what I already had in my application so I just missed the fact "AppContainer" was something specific to add.
But after re-reading it, I noticed it. I believe adding a quick comment could help because it's the only part of the documentation that has not any comment so it could be easy to miss the fact it's required for the hot reload.

Maybe something like:

// Render the Application inside the Hot Reload AppContainer
ReactDOM.render(
    <AppContainer>
      <App/>
    </AppContainer>,
    document.getElementById('root')
);

[jmreidy]

@tleunen @TheLarkInn Yeah, I think I should update the docs with both an inline comment and a note. AppContainer is such a generic name that it's easy to gloss over it.

@TheLarkInn @bebraw I like the idea of breaking this out into a specific HMR with React and CSS Modules thread. Do you think there'd be a benefit of structuring it with the actual source code? And switching this guide into a README.md for that code? That way, people could both read the docs AND fire it up in an editor.

[bebraw]

@jmreidy Maybe we'll end up with articles like this:

• concepts/hot-module-reloading - Something like this Stack Overflow answer.
• how-to/set-up-hmr-with-react (just an example) - There can be more specific how tos like this.
• how-to/set-up-hmr-with-redux (simple setup, but good to mention)
• api/hot-module-reloading - Literally the HMR interface.

These can cross reference to each other.

[andreypopp]

I'd advice to have an example wit HMR without react-hot-loader. It's not yet finished according to its author (Dan Abramov) and Webpack HMR works fine with React on its own (you lose preserving React state and DOM but that's not really too bad).

[jmreidy]

I like @bebraw's idea of making this a specific example of HMR working with React. Shold I close this PR in favor of switching it to a how-to/set-up-hmr-with-reach doc?

[TheLarkInn]

we will have a general documentation page for just hmr too.

[TheLarkInn]

You don't have to close the PR. Just go ahead and create the how-to folder if it doesn't already exist, and if it does drop the file in there instead.

[ericclemmons]

@TheLarkInn pinged me on Twitter about this, and I think Webpack on the server + HMR is worthy of a post. Having "recipes" (like those listed above) would be good to answer HMR for each situation so that users, such as myself, can see how it all works together.

https://github.com/ericclemmons/webpack-hot-server-example

[bebraw]

@jmreidy Ready to review again? Do you have anything else in mind for this PR?

[jmreidy]

IMO it's ready to go!

On Tue, Aug 30, 2016 at 10:08 AM Juho Vepsäläinen [email protected]
wrote:

@jmreidy https://github.com/jmreidy Ready to review again? Do you have
anything else in mind for this PR?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#64 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AACMbRv-ZZRgIa40yVwE3o_PWZ7XCeneks5qlGIJgaJpZM4JeKLy
.

[bebraw]

Thanks!

I split up related issues: #85 (concept), #86 (API), #88 (Redux how to).