I don't know what to use with django

[pliant jungle]

i have tried Vuejs and HTMX but I didn't like them. recently I started using React and I fell in love with that, that is super cool and easy to me.
I'm have using Django for 4 years and I like that really much I want a good front-end for Django instead of pure html CSS or jQuery when I decided to use React with Django I was very happy but when I noticed that Django and react doesn't integrate and something like that I got disappointed
Now what's your **suggestion **to use with Django??

[fair hawk]

They do integrate. It's not super duper easy, but many people have done it.

[pliant jungle]

i know but when u using react it's you don't have django template language anymore and I don't like this such hard integrate

[hoary oar]

It's not hard to integrate, it's just that you have to use frontend framework more

If you like Django templates, why not just stick with them?

I much prefer them overdoing things in JS, and not seeing why most projects would need a full-scale frontend framework

[true junco]

Whenever you use any front-end franework. Django becomes your backend through the use of DRF (Django Rest Framework) that serves APIs where as your Frontend consumes or interacts with API.

FYI only do it when your scaling up with a team that has that skillsets to split ppl to support either frontend or backend.

The other option is the use of Tailwind CSS that interacts with Django along with HTMX. But you still run the problem in tailwind configuration and making them work well together with django.

[jagged shuttle]

I think you have to use inertia

[copper zealot]

Hey, i found this super duper easy django tailwindcss integration package

https://django-tailwind.readthedocs.io/en/latest/installation.html

[silent jacinth]

There are several ways of integrating a reactive js frontend framework like React/Vue/Angular with Django. Some are very much separated apps that only talk JSON to each other, others are more hybrid as you may want to still be able to use the Django templating mixed with some pages/"islands" that use the js frontend for improved UX.

https://fractalideas.com/blog/making-react-and-django-play-well-together/

[buoyant thicket]

This pattern only really works well when the components don't interact with the server and are moreso for querying data already on the client than mutating it across client/server boundary. Otherwise you need to set up rest endpoints in addition to normal routes which imo feels more complicated than it needs to be. IMO use Django (with HTMX/JS if desired) or DRF or django-ninja as just the backend and have a seperate client app.

[jolly siren]

Your react code should be separate from Django. Really, Django is best suited to acting as an API Gateway in 2023. Use it like that, and React accessing your API built on Django will be a breeze.

I personally recommending building out your API using graphene to make a scalable graphql API.

You can use the graphql type generator for typescript and python to share data models without having to rebuild them in each lanhuage, but seriously, it's not even bad if you're doing it manually, because you don't have to worry about poor Django frontend performance and Django-isms.

[warm gazelle]

They do integrate and depends on your project setup.
One of the easiest way is using separate frontend and backend which may have more cost considering the different hosting.

[scarlet moth]

There’s Inertia-Django, based on Inertia.js (from the PHP based Laravel project). But it’s not as complete as the original one used for Laravel.

https://pypi.org/project/inertia-django/

[scarlet moth]

https://inertiajs.com/

[jolly siren]

Sorry for the late response. nginx can handle FE and BE on the same server. I happen to be using two containers for my setup, but it's not actually required.

[near rivet]

https://github.com/picomet/picomet

[fervent trout]

I think that you should make an API with DRF and make the react app consume that API. All other things are hacky and frustrating IMO

[true junco]

Yup having separated FE (any FE framework consuming API calls) & BE (Django serving as backend capabilities include GraphQL and websockets) is still alright since it makes it easier to maintain & scale the codebase.

[mossy juniper]

all my CRUD is manage via htmx : hx-get load the List in a dedicated div. Clicking Add_item open a modal (bootstrap) with the form inside. When I close the modal, htmx reload only the content where List is "included", with a fade-in effect. I use hx-delete to remove item, without reloading nothing. I user Sortables.js to manage some items, in a moal, and htmx make the "backpage" updating alone, without the user living modal or reloading nothing. That a great UX.

[vestal arch]

(sorry to hijack) can you link to an example project that accomplishes this? Curious about how one deals with routing and bundlers in this setup.

[fervent trout]

You create your react app separately

And Django seperately

Run both separately

And consume data via fetching the Django server

https://youtu.be/c-QsfbznSXI?si=0WK_INm7Bj696qMI

See this

[clever turtle]

Or you can use CDN links https://stackoverflow.com/questions/40230101/single-react-component-rendering-with-babel-standalone-with-only-index-html-and

[split token]

Personally I would rather retain the benefits of Django templates and only use JS where necessary instead of making a REST API and a separate SPA app unless I need to. I'm considering using Inertia.js + Vue or Alpine.js but I also just discovered Unicorn which looks nice due to how closely tied to Django itself it is. https://www.django-unicorn.com/

[true junco]

I won't touch it since more unknown tooling increases your stack amount in experience for your other team members