Django + Vite: The simple way

[@Alex-bb4tv]

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

[@rachidboudjema8807]

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

[@luciano_ratamero]

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

[@vizupcommerce]

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

[@luciano_ratamero]

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

[@JJ-ot3ps]

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

[@rad0f]

@@JJ-ot3ps making the same transition, how do you find Nextjs for bigger projects?

[@gangadharinagarjuna2399]

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]

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]

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 ``.

[@the__chuchuu]

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

[@PaxNot]

Fantastic video! Much appreciated!

[@robertcosminpopa7499]

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

[@luciano_ratamero]

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 :]

[@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.

[@gd9464]

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

[@luciano_ratamero]

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!

[@nopee11112]

would love to see Django + Vite with Docker

[@luciano_ratamero]

I’ve been using them together, so I could probably just make a quick video about it :)

[@nopee11112]

@luciano_ratamero thank you so much bro. I can share an example I made myself

[@ravikunwar188]

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

[@luciano_ratamero]

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!

[@wangjack5316]

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]

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]

@@luciano_ratamero Thank you very much

[@happycolours8551]

Amazing for vuejs, thank you

[@haroldquek1655]

thanks for the video!

[@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!

[@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]

i get sever error 500 on "production" :(

[@fabianskarmeta4997]

not anymore :d

[@김상은-j3o]

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.

[@김상은-j3o]

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

[@mtalhaaygen8193]

I should have read the comments first

[@RifazNahiyanFWS]

"Vite" 👍

great work!