Missing commands in readme about django-react-polls-example HOT 4 CLOSED

Cool, thanks for reporting.

I´ll update the readme and try to look in to hot-reloading from django-rendered content on friday.

from django-react-polls-example.

I did not find the time to implement a POC, but I have been doing some research and I think am leaning towards the proxy feature in BrowserSync. Which also ease testing on multiple devices.

I am going to evaluate these two modules:

• browsersync-webpack-plugin created for and used by Sage and works nice in their stack
• browser-sync-webpack-plugin Seems a bit more popular and better documented

from django-react-polls-example.

Did you find some time to investigate on the issue of hot reloading. I spent the afternoon trying but was quite unsuccesful. I feel like I'm pretty close but don't know which steps to take next.

The most promising approach up to now was to change webpack.config.js similar to the approach taken here: https://owais.lone.pw/blog/webpack-plus-reactjs-and-django/ and build the frontend via npm start instead of npm run build (or watch).

webpack-stats.json changes to

{
  "status": "done",
  "publicPath": "http://localhost:7000/assets/bundles/",
  "chunks": {
    "index": [
      {
        "name": "index.js",
        "publicPath": "http://localhost:7000/assets/bundles/index.js",
...

This is also processed correctly by django webpack loader. And if I make changes to the frontend code, npm start rebuilds the files and my page rendered by Django is notified for the change (the reload is not working fine yet, but I think this due to CORS-settings).

However, the index.js is quite different to the one generated by npm run build. It neither exports Components nor Containers. I think this is due to npm run start essentially running node bin/server.js while the build calls webpack --mode=development. But I don't know sufficient about node, webpack and all this stuff in order to fix it.

I assume this approach is quite different to the ones you proposed using the browser sync libraries. Do you know about the required steps for getting these approaches to work?

from django-react-polls-example.

Hi. I suppose your problem is due to the fact that we are monkey-patching the webpack-config in bin/server.js and replacing the entrypoint './index.js' with another one tailored for the frontend dev-server. That endpoint does not export Components and Containers to window.

I did a commit with a working version a few minutes ago which you may want to look at for further reference.

Basicly what it does is:

1. Adding a custom npm script ´npm run start:proxy´ which start a custom server (´bin/server-proxy.js´)
2. Patch one internal function so that we may choose a custom entrypoint for the dev-servers (not hardcoded to ´./Container.js´anymore
3. Configure ´bin/server-proxy.js´ to start a proxy server towards localhost:8000 using the entrypoint ´index-hot-reloading.js´ which patches all the containers to use the ´hot´-HOC from react-hot-reload
4. Fix some application specific things for HMR, (HOC wrapInAppContainer did not work with HMR without a unique displayName, and a bad path-config in .frontendrc)

After starting the dev-server with start:proxy you should be able to develop the Django application with HMR on port :7001.

I suppose you could use that version with django-webpack-loader, however that library does not really solve the problem of getting props from Django to React, also i think that BrowserSync is really nice for testing local applications on external devices.

Good luck :)

from django-react-polls-example.