Django + Vite: The simple way

hi everyone uh today i'm going to show you uh how to integrate a django project with a vite project um django is a web framework written in python which is amazing it's easy to configure easy to use uh easy to test and it gives you a lot of tools uh from the database level to the front end level for you to be to build your web application but one of the things that django doesn't do is integrate well with tools like react view angular svelt so um that's where vite comes in vite is the next generation for well they say front-end tooling um if you're used to things like browserify or webpack vita stat and a little bit more with less configuration and since it uses es build it's faster than webpack by a long shot and vite has presets for reactview angular's weld whatever front-end web framework that you choose so these two would make a good fit so i tried to to integrate them into a single project and ended up with a configuration that's kind of easy to do and everything is on this gist here i'm going to put the link on the description um but yeah let's dive in and i'm going to show you uh the the power of using django with some tools like fight so let's first start a new vid app if i'm not mistaken this is the the command it's uh npm in it yjs uh slash app uh yeah let's do it it it gives you uh uh some configuration options here i'm going to create a sample uh light app or something okay a simple django vite that's better um i'm going to use react just because uh react is what most people use i prefer svelte but since this this is like a a tutorial i'll go with react for now um i'm going to use javascript just just so yeah javascript um so if you see now we have this folder here sample djangovite it has uh an index.html let me an index.html which is like the entry point for the app uh we will only use it to point to the correct javascript entry file but it is going to be used uh for fight for bundling uh package.json which has the dependencies and the scripts white config which is the the default uh configuration file for vite it's i'm going to open it later you're gonna see that it's really easy to configure uh and the src folder which has like or um a react app okay so jsx css svgs and whatever okay so um yeah we have our vite app um so now we need to create a django app i'm not i'm not going to talk a lot about virtual om or how django works because well everyone that works with python has a different solution for using virtual lamps i use virtuon with virtual wing virtual and wrapper but with a custom command and whatever i'm not going to dive too deep into that so first of all i'm going to use django admin for you to have this command here you need to install django on your pc not inside the virtual env we will need it inside the virtual ramp as well um but this is like the scaffolding tool so uh i i just used beep three install django user but yeah we're gonna start a project called i'm going to give it the same name just so that things are consistent uh so yep it created that and then i'm going to create a virtual inf yeah i tried this uh previously so uh yeah created the virtual m and then sample django vite this is a custom command just just for me to go to the uh project folder with the virtual invective so you see that i'm on virtual m sample genovite with python394 here with this virtual inf active um and if i uh show you the the uh files here bin lib and piv are from my um virtual m uh and manage.buy and sample djangovite are from my django project um so yeah first thing is pip install django because since we're inside a virtual wave it has no packages installed so i'm installing django here again um and i'm going to django admin um start app uh if you don't know django needs uh both uh a project and apps inside that project uh apps are like different contexts for example authentication or products or whatever so you need these apps because there lies the source code for your views for your models for whatever you you need the project the project only comes in with the configuration files so i'm going to make an app core just because i'm lazy but please if you have a proper django project give beautiful names for your apps so yeah and then i'm gonna copy all of the files from our vite project because the idea is to match these projects together so copy the char home sample django fight everything from there to here the only thing that it overrides is the get ignore which is empty anyway for a new django project so it's fine uh now we have um our files from the django app and from the vi app here so index um package.json sample django src with a react app and write config npm install just to see if things are working uh this is like the the basic setup you probably you probably have already a django project or a vite project you want to integrate so i'm i'm only making the steps so you know uh what is what exactly is needed so yeah npm run dev should uh open up our fight app on localhost 3000 yeah it's here so everything's working and i need to python manage dot pi migrate just to have a development database for django so now we have a db.sqlite and i have a an alias here manage for python manage.pi so manage run server so it it it opens the development uh server on 8 000 so you see we have no views at all here uh so it just uses like a default landing page um but yeah now we can start um working on the code so i'm i'm opening vs code here um first things first um [Music] i'm going to move this index.html to inside the source folder because it's kind of weird to have an index.html file inside the root of of your project and since this is not going to be used by django only by fight it's better for it to be there but then i'm going to point my main bundle here you see that it it was source main.jsx which is this file here but now it needs to be um just main.jsx same thing for the fav icon here so yeah for divide configs uh i only have uh one more thing to configure on the vite side which is uh some configurations for the fight config the white config file uh most is mostly empty it uh since i chose a react app it put like react refresh here which is uh for a hot module replacement uh but we're gonna just uh override with this uh things that are changed here build manifest through uh this means that whenever we build for production it's going to create a file named manifest.json that contains all the build files and their paths so so django knows which files were built by the front end for production and it knows how to import them um that's the only thing that's the only reason this is needed here second thing i change the base path for the production files when we were building for production i append this slash static to the beginning of all files of all paths because django expects to find static files on the static url for development we don't need that we just use a slash and the root i'm going to change this to src this root here it points to where our index.html file is for the django app so since it it's inside the src it's going to be here um cool so that's that's it for vite everything is ready for wide so yeah let's start digging it digging into what we need to do for django so first of all we need to well some basic configurations right we need to open the settings.pi file which is the main settings file for the whole django app first of all we have this app core that i created here i need to add it to the installed apps so we can use it and inside the score folder i'm going to have some more files this is like the the basic file structure for um for a django app but we will need a couple of things more first of all we're going to need a base template for our django app and that means that by convention we need a templates folder here with the file inside so base dot html um i'm going to pass through this a little bit later i'm i'm only creating the files we need uh and then i'm going to explain what everything does so we need as well a template tag for rendering our bundle on production so we need another folder by convention it's named template tags if you don't put these with these names django won't find them so please do and since this is a python module i need an init.pi file and our template tag file which is render fight bundle dot pi so this is a script i've made so it's not that beautiful but it works so yeah let's let's start explaining what what what is happening here let's start by uh using uh by seeing base.html file so first of all we're rent we're loading the template tag that we're gonna use uh and if we're on development if the bug is true um if we're not running this app on production uh you see that i'm including the localhost 3000 vite client here uh that means that uh i'm going to well for development i'm going to need both the vite and the django web servers uh running in parallel so that django uh routes to a page which would be this one but the javascript files are pointing to the vite uh web server um so if we're on if the bug is true uh we inject the white client for a hot module replacement and whatever and since this is a react app i need to add this script as well it's it's only for react apps but it's needed um and uh if uh it's uh on the bug we also inject the main uh javascript file for our app which in this case is source main.jsx okay so yeah uh don't don't uh uh this this is the file that's gonna be used by django don't be confused with this other index.html this is only for vite to know what files they need to bundle which is only the main.jsx file uh this won't be used by django at all um so yeah um but if we're in production if we're not on debug we we just use the template tag what the tag does is it uh finds the manifest.json that file that i i told you before uh that has all of the files generated by the bundle so it it reads that and creates a script module and link tags for everything so what what that means is that for production it's uh we won't have a vite server uh we only have the build the the result of the build for production um so yeah this is the [Music] template deck that does all the magic so yeah um besides that we need some other configurations on settings.pi um let me open this and copy because well that's why guests are here so in on the static files um part i'm going to put all of this well allowed hosts is up here i'm going to delete this one uh allowed host is a configuration for production so be sure to get this right for now since we're just testing this i'm going to put all the hosts are allowed don't do this in production it's it's a security problem um but for now just for testing well and uh internal ips we need this for this debug tag to work um the link for the documentation on why that is needed is here uh the vite app there which is for the template tag to know where the manifest.json will be this points to the same place as root onvite dot config so here it's source src so here is its src as well um static url is the same as the default one but static file spheres we need to add the this folder from the vite app tier uh and since uh it's already here things are are going to work uh perfectly we need static route as well for production so yeah this is mostly it i'm going to cheat a little bit uh just for uh for me to show you um like just for me to show you better um how it works on production how it works on development i'm going to copy some urls here um so cad um we need these two here okay uh so yeah we created the template but we need to add a route to it and i do it by using this repath here the idea is that first it it tries to get all of the urls well when you go to the url on the browser and you put like dash slash admin for example it's going to first look into the django uh routes and then if it 404 it redirects to our front-end app and our front-end app will do everything for the front end so your if you for example have an api you're going to put it here another api but at the end of the day all the front end is going to be [Music] redirected to the base.html file here so this base.html is this file here so yeah and this one just ignore this one because this is just for us to test this uh simulating a production environment oh i needed a couple of things as well i need a template for you oh i shouldn't have closed that work cat uh i need these three here this four here cool so yeah that's what we we need for testing this one is needed okay it's strictly needed because this is what will render our base.html our front-end bundle uh but this one please don't do this in production this is only for us to test okay um cool so if everything is ready i'm going to npm run dev here so i have the whoops i have the vite server online so of course it's going to if i open localhost 3000 it's going to work and i'm going to run the django as well the django server as well manage run server um and localhost 8000 oh it didn't work why um localhost source main was blocked so uh probably i'm i'm pointing things to the wrong place uh probably this base.html file here needs to point to main.jsx because um it's on the same level as index.html yeah that's it so you see that um it's working well svgs are not working uh and this is this is good because you're gonna get you're gonna need to get used to using uh static files from django instead from the react app at least for static static files um everything that's related to dynamic code should be on the fight part like for example the css you see that the css is working the only thing that doesn't work are the svgs here but again it's because the svgs should have been served by django instead of the react app you're gonna need to fiddle around with it but um just to make things clear if i change the jsx file here it instantly remakes the the file that changed and injects the hot module uh here so that's most of the gain for development it's really really really really fast and it it it scales because since this uses es build it only changes the files that have changed it doesn't regenerate the bundle there's no bundle to regenerate it it only regenerates that specific file and injects it so even if your app is huge the refresh will be as fast as it is right now um so yeah cool but it's working on development but what we need for it to work on is on production as well right so we have the best of the two worlds here because we have the django admin here as well so we have um django is uh serving everything including the front end part so yeah this is it for development it works it's beautiful it's fast and let's try making the [Music] let's try a simulating product a production environment here okay so first of all i'm going to kill the vite server because we won't have a wide server on production so um then i'm going to run the production build and another good point is that vite is really fast for building as well so yeah it created the [Music] production files here and it put on on this source this folder here you should add it to get it ignored by the way but well yeah so we have um well everything on the vite part is ready for production uh we now just need to uh fool django into believing it's on production to do that we just change the bug true to the bug false um and again django doesn't serve static files on production but we are adding this static route route here so it it will in this specific case but it's only force for testing purposes okay so yeah uh oh uh and the last thing we need to do is to run collect static because it's it's a step needed for django to copy the files the static files for a specific folder um for production so um python management i collect static so you see that it copies everything here and it creates this static files folder and you're gonna see the assets here from the vida app for production and the manifest.json that that file that i told you that has all of the files for um for production so yeah um cool so now we just run the server again manage run server now it's running as it would run on production okay but it's using the dev server uh so if we refresh here you see that everything works well the svg won't work but it's fine just use just copy the svg to the django static files and point the svg to it it's fine it's not that big of a deal and you'll see here that we don't have the vite client on the head part because well we're on production and we appended all the files needed for the react app to work exactly on that part that the render fight bundle puts the things uh so yep everything works both for for development and for production it was kind of an easy thing to configure uh of course i needed a lot of time to fiddle around to get to this point but i hope this was useful for you uh i'm going to use this uh for my personal project if i need a backhand uh but i'm going to use it with svelte i still need to test it with spell in fact but um yeah that that's about it uh thank you for your time and if you liked just like and any comment is welcome so yeah thanks so much see you soon bye

Channel: Luciano Ratamero

Views: 1,347

Keywords:

Id: FCyYIVfDkhY

Length: 30min 19sec (1819 seconds)

Published: Sun May 16 2021