django-webpack-loader

The biggest challenge to using Django with React IMO is getting the right blend of isomorphic rendering down. I don't want to go full SPA with Django as this defeats the purpose of Django IMO. Most parts of the site I want server-rendered, while in stateful parts I want React. So, let's say I have a site with 20 different React "apps" (i.e. stateful components) that I want to distribute amongst my various Django sections (Django "Apps" within the same project). And I want to do that with one webpackconfig. How do I tell my webpack where to put all those react bundles? The answer I've found is django-webpack-loader[1], however as you can see in the Issues section, one of the biggest limitations here is the inability to chunk React (and other issues). Does anyone have a solution they like for this kind of isomporphic Django problem? 1. http

> This post aims to show that you can start to use Vue with your Django projects immediately without any sophisticated setup that will take hours to complete. Therefore, we will use the simplest method to use Vue.js: Including it via a <script> tag. Nice. Yeah, sometimes it's easier to get started this way without investing a day in getting webpack working... When the time comes and you need webpack, then this package has been known to help the integration between the frontend build system (webpack) and django's static file serving functions: https://github.com/owais/django-webpack-loader

It's also possible to use Webpack with Django easily. With working hot module reload and everything. https://github.com/owais/django-webpack-loader

I've been using react for various components inside a somewhat standard django application through https://github.com/owais/django-webpack-loader . It works by having your webpack pipeline spit a webpack-stats.json that a django's template tag reads and uses to output things in your template. The setup is not really straight forward, and generally I have problems mixing django static files in my .scss url() , so this is far from perfect. I'm using it with a main .ts file that requires various components based on the class of body tag, so I can use this in simple reload request use case. Also I've complicated things a little so my webpack bundles are collected as other static files and my static template tag also works. But yeah, using react in typescript and sass in this way for the frontend has accelerated my development a lot.

If you want to use the Django staticfiles system (which you do - it's good and useful for non-js stuff as well), it kinda does. We use Django Webpack Loader for our sites: https://github.com/owais/django-webpack-loader - This allows us to do `{% render_bundle ... %} which pulls in the appropriate script tag. But even then you can really feel how painful it is to work with, especially if you're adding typescript/scss to the mix. Solutions like Django Compressor are not really the right model anymore. And there's other issues as well. If you want to share settings between Django and the JS stack for example, you'll need to build your own pipeline for that. Building a form in react? Say goodbye to DRY on the form fields. Just, in general, Django predates JS apps being anything more than in-place enhancements and it shows.

I use https://github.com/owais/django-webpack-loader together with https://www.npmjs.com/package/webpack-bundle-tracker to handle (hashed) file loading from webpack

I see some comments about static assets management, reactjs and webpack. If anyone is interested, I've written an app that integrates these things with django in a clear and easy way. Check it out: https://github.com/owais/django-webpack-loader/