Django + Vite: The simple way
ฝัง
- เผยแพร่เมื่อ 10 ก.ย. 2024
- 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.djangoproj...
Vite - vitejs.dev/
Using Vite with Django, the simple way (gist) - gist.github.co...
I tested with vue and works like a charm! Thanks for sharing
Would really love to see (Django + Vite + Svelte) integration,
Thank you for the content
sure, I'll make a quick second video on it, then!
Clear explanation. Appreciate it! Would love to see the svelte SPA integration with django & vite
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
love to see (Django + Vite + Vuejs) integration
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' ?
i simply typed "/static/image.png" and it worked so i guess its fine
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.
Amazing for vuejs, thank you
Fantastic video! Much appreciated!
Could you please update video with django4.0 + vite+ vue3
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!
thanks for the video!
"Vite" 👍
for clarification, this is a scenario for SPA not for a normal django site?
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 :]
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?
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!
@@luciano_ratamero Thank you very much
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?
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?
@@luciano_ratamero hey no worries, I actually moved to nextjs and react lol, i find react better somehow
@@JJ-ot3ps making the same transition, how do you find Nextjs for bigger projects?
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?
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
Great content ,
Can you help me with images . . .
they are not working in django react vite app . .
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!
too old template tag wont working anymore better provide full repo next time rather snippet
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!
How i can integrate django with vuejs + vite.
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 :)
@@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.
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/).
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 ``.
@@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?
i get sever error 500 on "production" :(
not anymore :d
How did you fix it? I faced same problem.
I'd love to know as well! this video is starting to get old, so things should start breaking really soon.
@@luciano_ratamero I made up django + vite with django-vite package.:) Thanks for a reply
great work!