Request for a django example using python-react and python-webpack

[krisfields]

This isn't an issue so much as it is a request. I had everything working with python-react but then I upgraded the package and now I'm struggling really bad to get it working again. The server side rendering is working but nothing is interactive. So I've been trying to get python-webpack working but it's throwing fun errors like "Unexpected response from http://127.0.0.1:9009/build - 404: Cannot POST /build" and I have no idea how to even go about debugging. I'm brand new to webpack and fairly new to most frontend development in general so if you have time to throw together an example that puts the two packages together I would be extremely grateful.

Thank you!

[markfinger]

The client-side build integration proved to be the most complicated part of the system, and produced the largest amount of issues, questions and frustrations. It's a similar story for react-rails.

The approach taken by python-webpack's pretty crappy and I personally consider that project to be deprecated. It's much simpler to interact directly with external build tools. There are a couple of tools which take this approach and produce manifest files, which the python process can consume and introspect.

Owais has a bunch of examples up at his django-webpack-loader project

I've got a similar project: python-webpack-manifest. Given that it's a tiny codebase, I doubt I'll ever document it to the degree that Owais has.

Cheers, Mark

[markfinger]

I'll leave this open as a reminder to update the docs with regards to front-end stuff

[krisfields]

Thank you for your reply. I've since got client side integration somewhat working with django-webpack-loader, but I'm not sure how best to go about a few things that were just "magically" working before.

I now need to define an entry point (let's say it's called index.js) for the app which mounts the appropriate component onto the container div. Would you be able to suggest how best to let index.js know which component is to be mounted? And how do I pass the props from the view to index.js? I only have a single html page for the entire project with the rendered component (which differs based on which url/view is called) being passed in as context data.

I have a few ideas of how to handle this but they all feel sort of sloppy so I was wondering if you could tell me how it was being handled before, or perhaps what is considered best practice.

Thank you for all your time and effort you've put into python-react and in answering my questions. It's much appreciated.

Cheers,

Kris

[markfinger]

Hah, feel free to make something sloppy - the solution that was previously in place wasn't so great either.

So, formerly, calling render_component would do the following:

• send a request to the build server so that it can build a UMD module which exports the component, blocking until it sent back a signal
• serialise the props to json
• send the json and a path to the built file to a render server, blocking until it returns markup
• the serialised data and markup are bound to an object and returned from the function so that you can interact with it

When interacting with the object, the typical workflow would be:

• when injecting the markup into a template, it would wrap it in a <span> element containing a unique id attribute
• the mount_js method would:
  • inject a <script> element pointing to the built file - which exposes the component under a unique global variable
  • inject the serialized props
  • inject a little mount script which grabs the component and the props, finds the <span> element containing the unique id, and then mounts the component with the props into the <span> - in effect replacing the pre-rendered markup with markup controlled by React

I've omitted the details about webpack and build server, as it's long and messy. It was the most complicated and limiting part of the old codebase.

[markfinger]

I feel like the principle of all the above is not too bad, the big issue was too much magic such that it was difficult to debug and somewhat limited in the flexibility of the functionality.

[markfinger]

python-webpack is pretty much abandoned and I'd recommend against using it.

The docs have some suggestions for front-end integrations: https://github.com/markfinger/python-react#using-react-on-the-front-end