Django + Vite: The simple way

3 роки тому

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:
Django - www.djangoproject.com/
Vite - vitejs.dev/
Using Vite with Django, the simple way (gist) - gist.github.com/lucianoratame...

КОМЕНТАРІ: 40

@Alex-bb4tv 7 місяців тому

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

@PaxNot 2 роки тому

Fantastic video! Much appreciated!

@rachidboudjema8807 2 роки тому

Would really love to see (Django + Vite + Svelte) integration, Thank you for the content

@luciano_ratamero 2 роки тому

sure, I'll make a quick second video on it, then!

@haroldquek1655 Рік тому

thanks for the video!

@richrecapstudio 3 роки тому

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

@luciano_ratamero 2 роки тому

thanks for the comment! I tried this setup with a svelte + vite app, and it's mostly the same, without the react specific code :] I'll make a follow-up video later this week, it should be really straightforward

@happycolours8551 Місяць тому

Amazing for vuejs, thank you

@gangadharinagarjuna2399 2 роки тому

love to see (Django + Vite + Vuejs) integration

@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?

@luciano_ratamero Рік тому

hey! so, the main advantage is that you can use any front-end framework you like (even split the teams between front and back), while having everything in the same codebase. having only one repo and project helps a lot on team integration. and if you get to the point where having it all together is being a pain, it's really easy to decouple the front-end app. since everything is being served by Django, you keep all of the pros and features of it. you can, for example, keep serving Django admin, or introduce specific Django powered pages, while keeping the frontend app as the main app

@QuentinVadon101 2 роки тому

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/).

@luciano_ratamero 2 роки тому

hey, Kantan, sorry for the delay! what I mean by that is that you put the static files on django static folders and use the url directly, instead of importing them as you would in a normal vite app. so, for example, instead of having an `import img from 'somewhere.jpg';` you'd pass the url directly to the image tag, like ``.

@atrax96 2 роки тому

@@luciano_ratamero Hello, thank you for this video. I am facing issue that when I use dev server and have image in the static directory and use `` it works fine, but when I run `npm run build` I get error: `[vite]: Rollup failed to resolve import "/static/somewhere.jpg"`. Do you know any solution?

@JJ-ot3ps 2 роки тому

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?

@luciano_ratamero Рік тому

first of all, sorry for the delay, I totally forgot to look at comments =_= and yes, probably. the newest vue templates should use vite under the hood, but I can't be sure, since I don't know which template it is if you got it done, could you share the code with us?

@JJ-ot3ps Рік тому

@@luciano_ratamero hey no worries, I actually moved to nextjs and react lol, i find react better somehow

@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' ?

@suyyrep Рік тому

i simply typed "/static/image.png" and it worked so i guess its fine

@luciano_ratamero Рік тому

yeah, since it's all served by django, I figured it was easier to just use the '/static' prefix too. there may be a fix to it, but it's a small detail, I think.

@wangjack5316 2 роки тому

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?

@luciano_ratamero 2 роки тому

hey! for now, I didn't dive into the SSR world, at least not in Django + Vite apps =/ seems a bit hard to synchronize the exported html files from SSR with the Django URL router. maybe, for what you're describing, Django + React SSR wouldn't be the best fit. if you need SSR with React, I'd probably point you to something like nextjs or gatsby instead, since they give you better integrated solutions. I hope it was helpful!

@wangjack5316 2 роки тому

@@luciano_ratamero Thank you very much

@ravikunwar188 2 роки тому

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

@luciano_ratamero 2 роки тому

hey Ravi! sorry for taking so long to answer =/ I responded that question for Kumar, here's the gist of it: instead of importing them as you would in a normal vite app, you'd need to put the static files on django static folders and use the url directly inside your components. so, for example, instead of having an `import img from 'somewhere.jpg';` you'd pass the url directly to the image tag, like ``. I hope it was helpful!

@robertcosminpopa7499 2 роки тому

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

@luciano_ratamero 2 роки тому

yeah, but at the same time, since django is serving everything, you still have the possibility of using django admin, for example. both backend and frontend work together, on the same codebase, using the frontend as SPA, and backend as API. makes it easier to decouple later, if the apps ever get that big :]

@gd9464 2 роки тому

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

@luciano_ratamero 2 роки тому

I may do that, but, as far as I know, there shouldn't be any big differences between Django 3 and 4 that could change the integration. when I have the time, I'll take a look!

2 роки тому

great work!

@alexpimentelminga6551 Рік тому

How i can integrate django with vuejs + vite.

@luciano_ratamero Рік тому

it's essentially the same thing, just importing a vue app instead. I'd recommend creating a new vue app in another directory, then copying what you need :)

@alexpimentelminga6551 Рік тому

@@luciano_ratamero Thanks for answering, I'll try it, I'm not a programmer but I've learned from vuejs and Django and I don't have a clear idea of how to integrate them, maybe for others it's very easy for me it's a bit difficult.

@fabianskarmeta4997 2 роки тому

i get sever error 500 on "production" :(

@fabianskarmeta4997 2 роки тому

not anymore :d

@user-cv1lt3sl7j Рік тому

How did you fix it? I faced same problem.

@luciano_ratamero Рік тому

I'd love to know as well! this video is starting to get old, so things should start breaking really soon.

@user-cv1lt3sl7j Рік тому

@@luciano_ratamero I made up django + vite with django-vite package.:) Thanks for a reply

@skyblaze6687 Рік тому

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

@luciano_ratamero Рік тому

hi, thanks for the comment! if there's anything wrong with it, be sure to share the fix on the gist. also, on the gist there's a link to a full repo, if you're interested. it's not up to date, though, so I invite you to open up a PR with the fixes. thanks!