Webpack #202
Webpack #202
Conversation
…nt instead of child components
| @@ -64,4 +65,5 @@ function RegistrationAuth() { | |||
|
|
|||
| RegistrationAuth.displayName = 'RegistrationForm'; | |||
|
|
|||
| export default RegistrationAuth; | |||
| // Export as hot module (see https://github.com/gaearon/react-hot-loader) | |||
| export default hot(module)(RegistrationAuth); | |||
There was a problem hiding this comment.
Do this still need to be wrapped?
| @@ -81,4 +82,5 @@ ErrorPage.propTypes = { | |||
| }).isRequired | |||
| }; | |||
|
|
|||
| export default ErrorPage; | |||
| // Export as hot module (see https://github.com/gaearon/react-hot-loader) | |||
| export default hot(module)(ErrorPage); | |||
There was a problem hiding this comment.
Do this still need to be wrapped?
| <Layout {...extractLayoutProps(props)}> | ||
| <DeletionForm entity={props.entity}/> | ||
| </Layout> | ||
| <AppContainer> |
There was a problem hiding this comment.
https://github.com/gaearon/react-hot-loader#appcontainer says that hot is preferred to AppContainer - what was the issue with the hot helper wrapper that meant it couldn't be used?
There was a problem hiding this comment.
With the way the entry points are set up with server-side rendering, we don't export a root app component.
That required me to wrap each imported module in each entry point with "hot", which isn't the best for extensibility. I'd much rather set it once in each entry point and not have to wrap any other child module.
Ultimately, the "hot" wrapper also wraps the component in and uses hot.module.accept, as the creator explains in this comment
The RegistrationAuth and ErrorPage components aren't loaded from the entry points, which is why I still export a hot-wrapped component. Some other components may still need to be hot-reloaded that I haven't stumbled upon, which I intend to keep an eye on as I get more acquainted with the codebase.
There was a problem hiding this comment.
OK, IMO we should aim to make things simpler in the future if possible, and have a single root app component per "app", so that we can just use the preferred way of doing things. But this is fine for now 👍
|
Merged in ade20c5 |
|
Rebased to add a prefix to one of the last 4 commit messages - so closing this manually. |
Problem
Ticket BB-256: Use webpack for bundling
Solution
Running the project in development (
npm run debugornpm run debug-watch-server) now uses webpack to load, transpile and bundle the client code, with hot module replacement active.That means changes to the javascript or less client files will automatically change the browser page without need for reloading the page, thus conserving the application state.
Areas of Impact
Currently, this only impacts when running in development.
Production builds I have left as before until I figure out a few remaining kinks.