Django + Vite: The simple way

Подписаться 549

Просмотров 18 тыс.

50% 1

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

Наука

Опубликовано:

15 май 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 41

@Alex-bb4tv 9 месяцев назад

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

@PaxNot 2 года назад

Fantastic video! Much appreciated!

@richrecapstudio 3 года назад

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

@luciano_ratamero 3 года назад

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

@rachidboudjema8807 3 года назад

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

@luciano_ratamero 3 года назад

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

@haroldquek1655 Год назад

thanks for the video!

@happycolours8551 2 месяца назад

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

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

@rad0f 28 дней назад

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

2 года назад

great work!

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

@ravikunwar188 3 года назад

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!

@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

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

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