How to Architect a Django + Vue, React, Svelte, Etc. Project (Hint: Decoupled Design)

[@MaxProgramming]

I'm glad KZbin recommended me the perfect video!! A lot of videos showed how to *connect* it and I was like, if we can just call the API then why bother messing with the settings and connections etc Thanks a lot Zack 😀

[@arjunsaili1458]

You're a great speaker! I was thinking about this exact thing. I'm making a Django + React project and I wanted to decouple the front and back end but I wasn't able to find any resources that discussed this method.

[@zackplauche]

Wow, so I really need to make more tutorials here haha.

[@JJ-ot3ps]

hi, so you mean build api to connect the frontend and frontend?

[@zackplauche]

Precisely 🙂

[@JJ-ot3ps]

@@zackplauche i see, but django has a template and vue also has a template, how to solve the conflict, i mean you still need to combine them in a single/multiple html page though....

[@zackplauche]

​@@JJ-ot3ps You don't use Django templates. You only use Vue templates, and use Axios or fetch API to get from and post to your django REST API urls :)

[@JJ-ot3ps]

@@zackplauche ok sounds complicated, will need to figure out how to do it as I am still new to vue

[@MaxProgramming]

@@JJ-ot3ps It's simply that the Django part will be a REST API so from the frontend/Vue what you can do is use that API. Like this // To get the posts fetch(djangoAppUrl) // To add a post fetch(djangoAppUrl) // with the post config and all

[@str1ve450]

Thanks a lot for this video! Right now I'm searching a lot info about django + vue, and this video help me find new way to do it. If it possible, can you make simple practice video with this stack, or github repo?

[@zackplauche]

Hey str1ve! Totally 🙂 I can show how it's done. I'm not a master on this, but I'd be happy to show how I do it pretty quickly.

[@str1ve450]

@@zackplauche The main thing is to believe in yourself and find ways to improve the content. In any case, your content looks very original, and partly reminiscent of KZbin from about 9 years ago, which is very warming. Your videos are very lively and interesting. I will be very happy to follow the development of your creativity :)

[@zackplauche]

@@str1ve450 wow! I super appreciate this feedback! Thanks 😁

[@AppaloosaMichael]

It would be great if you compared the process (visually) between setting up Vue.js against the overcomplexity of trying to force a django-vite/react project! I believe you, but am stubbornly trying to avoid learning vue.

[@zackplauche]

Hey appaloosa! Hmm, good point! I've been meaning to touch up this video. I think I'll release one soon to show a proper structure 🙂. VueJS is really something special though, especially with Nuxt 🙂 i use it on my personal website www.zackplauche.com with DRF as my backend.

[@erdhyernando]

i'm a super beginer and this is probably sound stupid, so in order to access the API from the django in a react app i have to deploy it first?

[@zackplauche]

Hey erdhyernando! If your React app is in production already, yes 🙂

[@erdhyernando]

@zackplauche THANK YOU SO MUCH FOR REPLYING, again so sorry if the question is so dumb 😅, I'm still in development doing react and my other team build the django backend ih his laptop is there a way i can connect to his django without deploying?

[@zackplauche]

You'll need to download and run the backend on a port (typically port 8000) and point your fetch endpoints to that url 🙂

[@felyppe6509]

I've just spent the whole day trying to config react + django with vite 😢 I'll just use the django framework api...

[@zackplauche]

Hey felyppe! So I'll be making new vids on this soon I believe. It's been a challenge to learn how to setup and work with both, but in the end it is fun & worth it in my opinion 🙂

[@Michael-kq3qm]

Good video, im experimenting with decoupling Django myself. I have a question though, how do you deal with Django authentication and csrf tokens for forms?

[@maverick5056]

Add this after everyform you create {% crsf__something %} (forgot the syntax, then it should be fine). THen set the method to post.

[@not.yet.famous9418]

@@maverick5056 but if it's decoupled how would you use django tags?

[@maverick5056]

​@@not.yet.famous9418Sorry brother, that was a mistake, you actually use svelte/vue etc.. for the frontend and use create rest api in django, and through those rest api, both your django and frontend(which ever it is), can interact. How ever i suggest that you use sveltekit's built in backend(i tried it out myself, and it actually does feel better than django). If you need any more info, feel free to ping me, will be happy to help.

[@zackplauche]

@maverick that doesn't work for decoupled lol.

[@zackplauche]

Hey Michael! Wanted to give proper response. About CSRF: Good question haha. I actually haven't set that up with DRF yet. About AUTH_TOKENS: I really see there's not a lot of great tutorials on this exact step, so I believe I'll make one soon 🙂 With authentication: You need to setup something like `rest_framework.token_auth` and send POST requests with { username: 'yourusername', password: 'yourpassword' } as the body WITH the header of { `Authorization': `Token ${yourAuthToken}` }. I need to make a tutorial on this for sure...

[@destinyefe8996]

Great job 👏

[@MrValVet]

This is super useful. Thank you.

[@zackplauche]

Sure thing! I plan to make more vids with better examples in the future :)

[@MrValVet]

​@@zackplauche Looking forward!

[@justins4996]

Thanks!

[@zackplauche]

Of course! Happy to help 🙂

[@shareefhassan8197]

shorter answer use jamstack

[@MaxProgramming]

Yea I am a JavaScript developer but recently started learning Django for a Hackathon. I have mixed feelings. I like the syntax a little bit, and the separation of everything done is perfect!

[@zackplauche]

I haven't heard of Jamstack. I'd love to know though 🙂. Would you be willing to explain what it is a bit and why you think it's the way to go?

[@MaxProgramming]

@@zackplauche So JAMStack is basically JavaScript, APIs and Markup stack. This is where you use JavaScript for almost everything (front and back both) Like you showed how to use Django in a React/Svelte or any other frontend project, instead NodeJS is used for building the backend or something like NextJS (React + Node) together is used as a full-stack framework