React-Vite & Django: 2 Powerful Integration Techniques!

[Music] hello guys let's see Detroit into it so today we're going to integrate our application with example backend so there are two main ways of doing it there are others these are the answer we talk about today others to currently react to upington dangle that's against half separate infrastructures for both the react application in the demo backend so when you commit into jungle it is basically having a downward backend and adding the reacts application details into a demo backend is having separate infrastructures wherever you have two separate code bases for the front end and bucket so the backing is there then we'll rest API that is built tested and deployed independently of the fountain the front units needed from the back end Ali to the jstpi calls and since they're in different sours they have different domain names yes it will provide coins for each let's start today coming into reacting to Jungle so the first book is that it has seen the infrastructure after being deployed hair can run is the First Data integration whereby you can pass context data from the back into the front end via calculates the currency is that it takes longer million and processing case of any changes whereby if you make a small change for example in the bucket you'll need to build different once more which will take more time compared to having them separately secondly have the time will text acquire the back end available need to know some reacts and the front interval doesn't need to know some will dangle for the system to work and then the its integration is not a piece of cake so having separate infrastructures those houses explosion coins the first one is that it has independent deployments there is no delete that in waiting on either end second it is division of responsibilities by the back-end developers stick to the back end and the front-end developer sticks the front end if the embarkling goes down the front end is still in action therefore you even build users may experience the errors the site will not appear as broken and then there is more productivity in both development team since they each have power to deploy a given time irrespective rewards the other side is doing a concert that it has more infrastructure leading to more luck and more complexity it also has extra configurations to the Jungle settings that allow the fountain to stop to be back in the group so this will include some cross domain settings which may be a pain some sometimes it's just a close reading results sharing they include the course origin allow all cause low credentials cause origin Red X Y at least here serf cookie Domine csrf trusted Origins sessions among others you can run pit install download the next thing we'll have to do is to create a new project to use them with jungle I'll call it reacting the angle once it has been created two folders will be created there main folder and a subfolder that contains the python files such as the settings that Pi URLs Etc once you have this let us migrate everything I actually move my needs to buy my grids oh sorry let's first move into the react jungle folder that you have created then my grids once that has been done we can run this over to make sure that everything is working correctly yes and is considering still locked success since you have confirmed that this is working you can quit it and then we can create a front-end demo up which is going to store all the python front-end files and then we're going to create a front-end reactful in that the person set up front end once it has been created it's going to come in in the reaction of main folder it's going to have all those details actually have made once I've done that you're going to add the front-end application in the installed apps in the state settings to try so you can get the name frontend config settings let's now move into the front-end folder and create the reacts for a folder in there I'm going to use wheat we run npm phds sweetest I also call it front-end but if it's just going to cause some confusion cheek or name it however you want I will choose react JavaScript yeah the front ends the ACT folder has been created in here you can see all those the packages so you're just going to follow these processes I highlighted there see if foreign and with that it's going to create a better Easy experience since it's going to line BS compared to the previous create reactor once it has been created we can go and take the back end right integration for reads once it's been uploaded depending when you check the button integration for reads and full steps the first thing that I like to do is to create add new HTML file that is going to be linked to the back end I can create a new folder which is young men you feed stereo they can create a new file and this is new that HTML climation Mark yes first thing you have to do is create a div in the theory of the ID of fruits about this not to be going to be displayed in the index HTML anywhere trying to pass everything into this new heat stereo so the first thing I know is that I take is the script and they put it here and then there's something else that can cause an error because you can see that there's no mean.js in our wheat folder it's main.jsx and it's in the source folder so you're going to add here the surface flush mean that jsx the leading errors then you change this lupus to the local lists that you know it is between 73 actually you can check their leads and piano so you can see it's running I feel fast enough to have taken that come here and take these screens because they're using reacts this one is only even using reaction since we are we have to add it to put it above I don't know why but if it comes below this means the effects it it brings up an error I have not yet figured out why but you could experiment and see if it's going to be any different once again come here let's look at those 2000 is G1 73 after that let's import this to our app .js X and obedience to avoid which config it's actually all there so this bill will help generate some content in the manifestation as we shall see this part is not necessary it's just going to cause the errors and I believe at the moment that's that's it once it is done let's go and create a view in our front-end app so we'll Define from arguments return you to teach them after that you create a new URLs that buy in the front end up all movies that are over here it's okay so Imports front front is the review that we created in the uvs.com more there so you give this an app name which we shall see how it's going to be used later content and then URL particles once you've created those your the URL patterns we go to the URLs that Pi in the main projects folder Union euros and adding queued but there front end materials so this will go to these these URLs over here are the ones that are going to be used once you call the front-end slash something so after their localhost 8000 slash Fountain slash in url that you have found here a path that you form here so I prefer using this because it brings some sort of abstraction in the different apps that you create because it's normal for you to have just why not people have cereal they can tell you differentiate the URLs that you create in one up from the other so this creates a more treat for adapt routes that even other developers can see where the serials come from usually for example you know you create your rest apis you're going to create a backend fold and the backend folder could have a past weekend just do something like or Canon slash and then it'll cleared back in the URL somehow create that Slayer obstruction that I prefer compared to having all the urls in this mini or elsewhere once you've done that the other settings that you're supposed to do so that this can work so the first thing is that you'll have to come to the settings to try and add these templates directory in here so I will import OS to import new s come here in the directory OS dot path let's join this directory yay of the best there to read we have we're looking for this value here so in order for us to get there we have to go to front end and then front end and then HTML tool only terms front end HTML so this is going to take us here into this directory that contains the new.html after we have done that you need to add the static files directories under the static URL so this static static files the actuaries are going to be connected to the public and update file folder in the front end the build folder has a different name when you use of it it's called list as you see in a few minutes to come so in the spirit static files years hey to The Sims in process this comment could paste this path So the faster here will be Public Access and then action will add each one is your Beats the front end for products developed yeah so we thought you can link everything is in order options that you have to create such that when the build happens they're going to help in creating the files for the JavaScript and CSS so we thought we're going to write some code here in under the roll-up options as follows file Arrow function so these are going to be in the assets file in the new build folder that will create so CSS slash CSS then we'll have an entry file name yes name yeah so we're going to create the files that are going to be in the manifest.json so that's that's another server your npm run build yes so you can see here this this will that's the new build button took yourself file that the source the index of this HTML everything the assets they're all there so if we now npm run down oh there's something we forgot forgot to add it to the settings the static file and then returns this to guests .com now we have to run the python he reacts yeah so let's follow this link you can see it mean in front end but the buttons let's to try and tent it works back in hugers so now for the logos they have to change something everything else Works see the counts so for the logos and come to the Apple CSX first of all let's move them this logo from this accident click radically and creates a new constants static from the static files which is in the oblique the X dots every Gene then we can have the same for delete logo beats this is deep so you can really eat both of these let's see if it works yes so everything is in order if you want to take this to a production level this several changes you have to make so we really done in camera and build and you have Edition assets and everything so now we have to go to the settings settings to buy and then nembug has to be false you can see here do not run into the back turned on in production so since this is where I assume that you want to deploy it for production purposes gs4s nonsense spooters Falls allowed hostiles needs to have something so you can put a statue so if you run this again it's most definitely will not work for certain reasons we have not configured it to run under production so if you feel that chemical resists come here you started talking yeah and it's like let me see students would hit like to make it more stable you create an internal IPS localhost Aries well I'm doing so many seriously yeah it's shocking me that's okay and and it is funding I have to install called White Noise it helps out the static files when it's an approduction pip install oh I have it already installed if you didn't install the white noise then you come to the middleware under the first I don't need this with anything I just prefer doing it pushing it there so why it's nice that's made where do Sprites base we thought we can now go to our new to HTML and want to configure such such if debug is on it runs descriptor but if it's not on bug is false it will run the index HTML from these assets around that has been built for production saluting to use and eat we feed stem health if debug it will run that and now suddenly like a H1 is in debug if you debug else Nancy another h1c no and hearts debug let's see oh values it by your own server the nbm running bills both don't forget about that and if and if is not there that's an error yes oh that's and this notes debug do you see we have successfully done something here such that we have built it in such a way that this new HTML this template is what surrounds what controls the debug and whether the debug is true or false so there's some strips that have been known if it's true and others that that should be around when force is once it will be around when it's false Advanced that we be there in the production lose at once in this index.html here in the assets and at least or in the beasts so what should you do let's test copy with two lines here with script and Link and put them under the new HTML under that not sleep bug we have some some quotable words to do some and brackets dollar sign and you know the same proof that's outside the brackets other thing tactic because from the static pain and quotations on top of assets slash index to nbc4907.ts do they seem to do something too so the first thing is there alibra greasing black they do the things that he and that once you have done that come back to the python and it's lucid dreams run Bill sorry something my lead stitched by collect at yes ah oh we need to we need the static crew tool sorry for that sorry such a good settings and uh and there is static files directories you have you need our attic if we see each other disability they come up on your side you will most definitely know what to do with them come in up this there too Splash static so then you touch it should look you know nice Great Bridge and now we can run this up come here and reload so error it's not getting that after some deliberations I found out where the error is had not added the loads that each year so person dudes it looks static yes you can see the most debug it has worked so I think we can remove this year because I've already seen it's not a hoax they read the deal you know that it could add and then we read this for the Aesthetics beats plus reacts blasts jumbo yeah all we have to in PM reveal that so that's and jungle and Camera name let's hope the and jungle is shown again for the Aesthetics and will often much deliberations with me won't error that every dense in your scripts and static files you have to Learn Python image to try conduct starting so as it gets all the new change static files and then python manage that point that migrates after that you can learn yourself distance photos let me just collect static settings into new Js because it had a very long ad name here okay see now I did another round beam and you can see the index has changed so in this country and changed again too next there you are and so and yeah that's we're on seven and so and if that's okay we come here elect static yes I agreed well I can run yourself and do that also as soon as we come here you move the emergency debug yes so the other area over here was that this one was 7s instead of FCS these small errors can introduce your mind yeah index View and send for Fe 750.js which matches what is there it has now run this beautiful beautiful so you can see the icons are there the plus Tango for Aesthetics is there count works yes that is how you deploy each plus reacts less jungle when you crumb everybody actually into the jungle folder as we have done here so the other method is having two separate code bases uh the reacts sorry they believe that you based on this information the trails lunch today we can create your own reacts up using weeds so we'll just show you the configurations to setting up reactions and settings that's why to ensure that it works first thing you do is populated circuit here you have to keep install cause headers as we had said initially there is a cross-origin resource sharing should be PNP installed jungle course headers once you've done and installed apps are because headers then go to the middleware uh close headers that middleware calls we made blueware and single radio on on so once you've done that below the defaults auto field you could add colors allowed Origins so at this point you will have http so it's normal way to be localhost so depending on a domain name that you have if you deploy it you could add it to the other reasons to local costs if John 73 73 so you can also use the course load allowed all Originals true but that means no security is better internet before to able to do these quotes I don't know I'll ask you to the security service was once you've done that I did a framework details so linking the download standard variation such as return open triple and allow reading the access for annotated with users so it does not block the reaction work from interacting with them let's step up ourselves this rest framework we will go to defaults or Mission classes and the default of the institution classes here we can have the rest framework commissions allow any here's how the identification session Authentication so we will set in the vehicle if we are here front end separate from you The Accidental markings need to be able to connect to it using all those settings that are showing you through this this crossover those Origins the origins the rest framework adding the course origin middleware and the course headers if you don't have the course headers you can install it using payp install jungle courses feel free to read more about them online with that I believe that you have and all that you are supposed to do to integrate reacts front end to a tangled back and it's not a piece of cake as you have seen the angle is a bit complicated but once you get the handle it it's going to be more manageable that's a security battery thank you very much and uh coming down what you want to know next

Channel: Jsil Tech

Views: 4,570

Keywords: reactjs with python django, how to connect django with react, react js with python backend, python django web development, react setup with vite, django cors headers, django, reactjs

Id: NJVaySJAbw0

Length: 40min 36sec (2436 seconds)

Published: Fri Sep 08 2023