django-vite - integrate Vite with Django | TailwindCSS v4 setup

☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:

In this video, we'll learn how to use Vite in a Django project for bundling static assets. We'll use the django-vite package and will see how to set it up to bundle TailwindCSS v4.

📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
00:00 Intro
00:44 Installing django-vite
04:50 Installing Vite
08:14 Serving optimised assets with django-vite
12:31 TailwindCSS v4 and django-vite setup
19:39 Setting aliases with Vite
21:30 django-vite in production

𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:

📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:

#python #django #tailwindcss #vitejs

[BenMcNelly]

Little know fact, this man is a prophet and can tell what you are working on and makes a video about just in time for it to be useful. Every. Time.

[gardnmi]

This is awesome, had to change "dev": "vite" to "dev":"vite --host" in the scripts to get django and vite to communicate but everything else worked.

[BrantScalan]

This was awesome content. I would a whole series one this. There’s so much here and it finally reduces the webpack complexities. This would be great with the Azure CDN stuff we talked about for a beginning to end project and pipeline

[shaddwatson]

This tutorial really help me a lot to get started with Vite and Tailwind with Django. Thank you very much!

[DelioC]

Awesome video! I would love to see a second part of this where you integrate nextjs using django--vite.

[sto]

I've been looking into this recently, so thank you!!

[PICO]

Bro, this is gold!! Thank you so much!!

[lilbaejing]

Genius! So IIUC you could have multiple entrypoints in you vite settings creating different bundles that you could load in different django templates. You could write Typescript and use any imports from NPM and generate unique bundles for each view if you wanted to (for code splitting). Would imports get deduplicated and shared?

[KodexAnt]

I can't belive i'm running Vite now...

[klmcwhirter]

It may be great for the demo to show the js integration, but more pertinent to django is that you do not need the main.js stuff at all.

Just configure your main.css (or app.css in my case) in vite.config.mjs and use vite_asset_url instead.

In `vite.config.mjs`:

```
rollupOptions: {
input: {
// 'main': resolve('./static/js/main.js'),
'app':
}
}
```

In base.html:
```
<link rel="stylesheet" href="{% vite_asset_url "static/css/app.css" %}">
```

The thing that pushed me to try that is that the docs for vite_asset_url says that only keys in manifest.json are supported - not dependant assets.

My django app works without the additional main.js workaround.

Also, because `npm run dev` is not watching your template dirs, any change there will need a manual browser refresh - because it can't know about them.

Enjoy!

[Anu_was_here]

Is it mostly the same with Django + CRA?

[antonpetrov]

Hey there, awesome video again, can you show us how to extend this tailwind css config to add and bundle shadcn?

[chetana]

Hey this was good video

can you show how we can deploy it on some environment or cloud with some storage like postgres or blob ?

[thekenapp]

Wow. Thanks so much. I wanted this. Can you show how to add flyonUI to vite. it a free tailwind components that extends daisyUI. especially how to load the js from the node_modules and what to add to you git ignore

[IdrisSmart-cy]

After collecting my static files and I try to deploy on railway am getting this error "/bin/bash -ol piperfail -c npm run build" did not complete docker build failed

[SumanDas-rbtz]

Heyy! Any chance you could do a video on inertia-django? Would be super helpful!

[GreyFx]

Thanks! Why not use Tailwind standalone executable? No need in Node)

[williamlee]

Thank you very much. And I tried to add DaisyUI, but it doesn't seem to work.

[sumiyaaltangerel]

Oo boy, , , when i start using django-tailwind, his era has gone :)))