How to setup with react-hotloader?

[ntucker]

hotloader makes developer much faster, but it's not clear how to set it up with python-react as python-webpack seems to have its own way of checking for file changes. I know how to set it up with a normal webpack setup, but since python-webpack works differently I am not sure how to make this work.

I would love some documentation about this? Thanks!

[markfinger]

Yeah, there's currently no easy way.

This has been on my todo list for a while now and I'm afraid I'm not familiar enough with webpack's HMR to provide any real pointers. Happy to help where I can though

[markfinger]

@ntucker can you point to any good docs on the topic?

[ntucker]

For me all I really need is a way for webpack to see django static directories as all in one place. Then I suppose you could juse use the python-jshost to run webpack there for dev.

hotloader isn't really that magical, it's just another loader (you set ["react-hot-loader", "babel?experimental"]). So all that happens is when you run webpack and a file changes, it executes some function in the hotloader. All that function does is send the new code over a websocket that the page had opened up when you're using hotloader. There's javascript loaded on the page that replaces the existing components with the new code.

Apparently the 'hot module replacement' part is a webpack thing: "Hot Module Replacement, which is a Webpack feature;" http://webpack.github.io/docs/hot-module-replacement-with-webpack.html

Everything else should be at the project: https://github.com/gaearon/react-hot-loader

[ntucker]

Honestly I'd totally be ok with running webpack seperately for dev, I just don't know how to set it up to work with django static files directories. If you can tell me how you did that here, that's really the only missing link for me.

[markfinger]

You can use django's static file finder to map rel paths to abs paths pointing at app directories.

[markfinger]

from django.contrib.staticfiles import finders

finders.find(path)

[ntucker]

How do I tie that into JS-land? Are you procedurally generating a webpack config in python-webpack?

[markfinger]

Yeah, python-webpack's got a config util which does a bunch of magic. Check the tests or https://github.com/markfinger/python-react/blob/master/react/bundle.py for examples. It lets you mix js strings with python data structures. It converts the structures to JSON, concats all the strings, and writes it a file.

You can always use strings though. I found them a nightmare to test though, so I switched to the config thing

[ntucker]

An important component of the hotloader is to run the server that communicates changes through websockets. Traditionally this is done by using entry: [ 'webpack-dev-server/client?http://0.0.0.0:3000', // WebpackDevServer host and port 'webpack/hot/only-dev-server', './scripts/index' // Your appʼs entry point ]

So when you run webpack in a normal way that tracks changes, it serves the files through the first entry point, and then the second one is the websocket server that updates them. Since I need to use python-webpack to get the paths right, how exactly would I hook up the hotloader service? How are you replacing the normal dev server anyway?

[ntucker]

I think this is probably the best resource for understanding the hotloader. http://webpack.github.io/docs/hot-module-replacement-with-webpack.html

This is mainly a webpack thing and the react one just integrates it with react components.

[ntucker]

Does python-webpack work by proxying static file requests to a js-host run webpack-dev-server?

[markfinger]

It uses https://github.com/markfinger/webpack-wrapper to provide programmatic access to webpack.

Most of the ecosystem's tools - webpack-dev-server, webpack-dev-middleware, et al - only handle single compiler instances. Which is alright for small projects, but their APIs are too limited to build on top of.

[ntucker]

So how would you integrate the hotloader then? You'd have to build that yourself?

[markfinger]

Yeah, the complexity of setting things up is unfortunate and part of the reason as to why there's so much proliferation of react/webpack starter kits which all deviate slightly from the previous one.

Most of the browserify/webpack tooling is built with conventions in mind, rather than configurability. Hence why I've had to replicate a lot of things :(

Anyway, it's all early days with this type of tooling. There's plenty of boilerplate to write and lots of lessons to be learnt.

[markfinger]

Regarding the actual ticket, gearon's been kind enough to roll out the react-hot-loader core into https://github.com/gaearon/react-hot-api

So an integration will need to be worked out.

I'll defer this ticket until https://github.com/markfinger/python-webpack/issues/22 has been completed

[ntucker]

Hmm, but I like webpack. I just want webpack integrated in django's collectstatic and grabbing the static files from the finders.

[markfinger]

python-webpack now has support for HMR

also https://github.com/markfinger/python-react#using-react-on-the-front-end