create-react-app-django VS reactivated

Yes. I have large portions of a server-rendered, stateful web application that leverages django’s view/templating.

However, being new to React I wanted to bring a single react “app” into the django project using a django template that includes the use of the same navbar template used by every other page in the site.

While it doesn’t support N react apps bundles at this time I could see it being done provided they share a single package file.

One important point for me was that this also be done using an unejected base CRA project, so that it would enjoy all of the benefits of the CRA standard dev and production build capabilities.

This was no small feat because I’m relatively new to modern web front end toolchains and in fact I ended up rewriting almost all of the user documentation for CRACO as part of my learning process.

Which is a key point I was able to accomplish this by using a mix of CRACO and options available to a standard CRA application.

In particular the package.json postbuild script action which moves and renames files to nestle assets into their proper place in a django static path.

I have not released my solution but I have stubbed out the problem and solution description here: https://github.com/banagale/create-react-app-django

Though it's not in the main branch, I've POC-ed a lot of it and use it in production on this branch. You can... sort of see the ideas behind it. https://github.com/silviogutierrez/reactivated/pull/207

https://www.reactivated.io/documentation/deploying/ https://github.com/silviogutierrez/reactivated/blob/main/development/scripts/deploy.sh https://github.com/silviogutierrez/reactivated/blob/main/development/Dockerfile

Theoretically, the Dockerfile should "just work"™ with Render.com as well. Right now I focus on fly.io only because their free tier offers PostgreSQL without time limits. Render, I believe, only does so for a period of time.

See here: https://github.com/silviogutierrez/reactivated/blob/main/dev...

https://github.com/silviogutierrez/reactivated/blob/main/dev...

https://github.com/silviogutierrez/reactivated/blob/main/dev...

Shameless plug: If you want seamless SSR with Django logic, but React templates, check out my project at https://www.reactivated.io .

It's like HTMX but uses React, and the JS bits are rendered on the server. You can then hydrate on the client.

The Reactivated docs site itself uses the project: https://github.com/silviogutierrez/reactivated/tree/main/web...

Here's one https://github.com/silviogutierrez/reactivated/blob/main/website/client/templates/HomePage.tsx

You can use any React library with Reactivated. Here's an example from the site, using react-markdown just like you would anywhere else: https://github.com/silviogutierrez/reactivated/blob/91d87e66c61c849895cabcc1ce07574111084c3a/reactivated.io/client/templates/Documentation.tsx

reactivated – Zero-configuration Django and React.

That's exactly what https://github.com/silviogutierrez/reactivated does. It's a work in progress and docs are coming.

But it's the best of both worlds: Django SSR using statically typed JSX.

See for example my blog or business sites (on profile). Both SSRed by Django using React templates.

Then when the client loads, it gracefully "attaches" for dynamic interactive behavior as needed.

By far the biggest pain point is having to run node and python on the server. So I'm working on the best way to do that.