3 ms·
Yes. I have large portions of a server-rendered, django web application that uses react largely as you've described. I wanted to bring a single react app into
by bredren 6y ago
Yes. I have large portions of a server-rendered, django web application that uses react largely as you've described.
I wanted to bring a single react app into the django project using a root dom element from a django template using the same template inheritance as the rest of the site. (common navbar)
Benefits of this approach on Django side were adherence to Django structure and session-based auth for the react app's API calls.
My goal was to minimize customization while retaining the "spirit" of both Django and react.
I decided the react app should flow from an unejected Create React App (CRA) project. This provides the developer experience of CRA's development environment hot-reload and production build bundling.
It also makes it more likely the react app can be migrated to new versions of CRA.
The webpack config changes needed to pull this off are not extensive but do leverage Create React App Configuration Override (CRACO). [1] CRACO is the best-supported config layer for CRA today, supporting CRA 4.*.
Key aspects of my implementation are:
- Use of package.json poststart to move files generated by CRA's run script and update paths made by CRA-generated files to work inside django.
- Use of the package.json postbuild script to move and rename files to nestle assets into their proper place in a django static path.
- Customization of HtmlWebpackPlugin to modify CRA's:
- Out-of-box behavior of webpack bodyTags and headTags.
- webpackConfig.output to use a project-excluded directory that facilitates hot reload during dev
While my implementation doesn't currently support N react apps bundles at this time I could see it being done provided they share a single package file.
Being relatively new to modern web front end toolchains I ended up rewriting much of the of the user documentation for CRACO as part of my learning process for this mash of Django and React. [2]
I have not released my solution but I have stubbed out the problem and solution description [3].
If someone is very much in need of this project, please write me. I have wanted to release it but have just not had time yet, and I need to update it to CRA 4.
All this said and done, having accomplished my initial goals, I am less certain now that it is worth trying to integrate a CRA-app into Django, at least if the goal is to retain shared sub templates from the rest of the Django app.
Instead, I suspect the better method would be to expect to have to maintain a react-compatible implementation of say a navbar or other "common" portion of the UI on the server-rendered pages and leverage only django's session auth on the SPA.
Ultimately, this integration experience made me take a hard look at my investment in Django. I know and enjoy python and the Django framework. But at least for new projects, I can't help but feel they faces an existential threat from modern web (react) paired with a node backend.
[1] https://github.com/gsoft-inc/craco https://github.com/gsoft-inc/craco
[2] https://github.com/gsoft-inc/craco/pull/203 https://github.com/gsoft-inc/craco/pull/203
[3] https://github.com/banagale/create-react-app-django https://github.com/banagale/create-react-app-django