Django + Vite: The simple way

For those who want to develop a frontend app, be it with React, Vue, Angular, or Svelte, Vite is a very powerful tool. It brings the speed from esbuild, and it's so easy to configure that you'll want to leave webpack behind. But it's only for the frontend.

For those who want to work on the backend, few frameworks are as complete and easy to use as Django. I've worked with Django for about 10 years, and I've still not found a common use case for which Django doesn't have built-in tools to deal with. What it lacks is the ability to build the frontend with modern frameworks, like React, Vue, Angular ou Svelte.

When I thought about that, using both together made a lot of sense. In this video, we'll see how to use them both in the same project, getting the benefits of both stacks. Let's go!

References:

[nopee]

would love to see Django + Vite with Docker

[skyblaze]

too old template tag wont working anymore better provide full repo next time rather snippet

[rachidboudjema]

Would really love to see (Django + Vite + Svelte) integration,

Thank you for the content

[Alex-bbtv]

I tested with vue and works like a charm! Thanks for sharing

[suyyrep]

has anyone tried this with vue? i got it running but how do i handle static files in development?

i tried STATIC_URL = '/static/' and STATICFILES_DIRS = [ VITE_APP_DIR / 'assets' ] but then i don't know what syntax i should use to load an image that's in my static folder

do i use import image from '@/assets/image.png' ?

[richrecapstudio]

Clear explanation. Appreciate it! Would love to see the svelte SPA integration with django & vite

[gangadharinagarjuna]

love to see (Django + Vite + Vuejs) integration

[gd]

Could you please update video with django4.0 + vite+ vue3

[JJ-otps]

Great video, I am working with a vue js template and django as backend, but not sure how to integrate them, is it the same as vite?

[MartinoMassalini]

Hi Luciano, thanks for the content, looking this as a django developer, can you point out the advantage of using vite as SPA inside django instead of using django as an api backend and vite as separate instances. Which part of django you can still leverage using this type of architecture?

[ravikunwar]

Great content,
Can you help me with images . . .
they are not working in django react vite app . .

[wangjack]

Hello, nice job. But I am looking for a solution for SSR+Django. I want to render some data into HTML (like data= [data0, data1, ....]), use react to read the JSON data in HTML and render it to a react component. Are there some suggestions?

[QuentinVadon]

Hi Luciano, your video helped me A LOT ! Same as Ravi Kunwar, and you talk about it in the video, how can we handle the static files so ? Because you say "use the Django statics instead of vite statics", but if I do so, it works on developement, but the "npm run build" command won't work because vite isn't able to find my static images (because images are in core/static, not in src/).

[robertcosminpopa]

for clarification, this is a scenario for SPA not for a normal django site?

[alexpimentelminga]

How i can integrate django with vuejs + vite.

[fabianskarmeta]

i get sever error 500 on "production" :(