Django & React JS How To Integrate React Into Your Django Project | Full Stack Web App Tutorial

yeah so hello guys so in this video we're gonna take a look how to integrate Django with react so let's get right into it so for this tutorial we are going to use Python that's the programming language and then we're going to even using node.js so you have to install node.js in your machine for to work with npm commands we are going to use whitejs to bind our front end and to bundle our front end and then we are going to use Django so that is just going to be a framework and then we are going to use react as a front end and we are going to type our our code at vs code so this this software I'll be using so first this is so let's open an empty directory and let's open it in vs code yeah and now let's actually create a npm in it white so let's create a white in the following directory so I'll have react and typescript so npm I to install so you need to have node.js installed so in my machine I'm running node yeah I'm going to use node version 16. and my python version is going to be I'm going to use Python 3.9 for this tutorial so yeah and now if I hit npm and and now if I go to my frontal Port I see this yeah and so now I'll stop it and now LS so this is our files present in this and now let us create a virtual environment so it's going to be python 3.9 hyphen m M virtual EnV and then put a period to create a virtual environment in the same directory and now let's activate it Source pin slash activate and for you Windows users will be dot backslash groups slash pivot so this will be the path for Windows users and for Linux and Mac this is the path and now I'm gonna install I'm gonna install Django it's going to be version 3.2 greater than equal to 3.2 comma less than 3.3 so this will be the Django version I'll be installing because Django version 3.2 is dlts version so it installed Django version 3.2.16 [Music] Now flip I'm gonna install white noise for Django to serve the static files so afterwards you'll get to know more about it and now I'll create a Django project so Django Dash project out of this yeah Django Dash project um oops is going to be Django admin start project I'm gonna call it back end with a period so yeah the period indicates that it's going to create in the same directory so if I go to backend and settings yeah it created over here and it has the manage.pi so and now we should integrate it with the our backend so I'll just create a file so HTML slash base dot HTML so I'll just create a base.html for now and now I'll be going through this yeah so this is the official whitejs backend integration so I'll be following this so at first I'll just copy these two lines for live reload for hot reload and now I'll again copy this and I'll hit paste and now I'll just have a div ID it's not app s it's actually root yeah and then whatever path you are giving over here this will be the path over here yeah it's going to be localhost byte client and this will be this now if I hit paste and now if I run my Django server so python manage.ie run server and if I go to my localhost port 8000 I don't see anything because I haven't mapped the urls to this page so now if I go to settings and templates is based HTML yeah I've created a folder named HTML so now if I go to URL start by it's going to be path off is going to be comma and then it's going to be template View index.html it's actually base.html so template you will come from from Django Dot views dot generic import template View and now let's check for any errors no errors and now if I hit reload okay I don't see anything and if I go to my console logs it should fail to connect so this will only work when you run your npm run Dev in your other terminal so let me hit the npm render and now if I hit reload okay can be okay this okay so wait a second now the based.html and this should be over here oops yeah and now we are getting it yeah so now it's actually working and even the count but the only thing the images are not working that will okay so now let's configure that so let's go to White config so in the white config I'll just have a public deal so it's going to be Pub yes probably there and then it's going to be slash probably I'll give it dot slash public and now it's going to be build and then inside build you're gonna have rolled roll up configuration yeah for all of options and then over here it's going to be output and then you are going to change the assert file name it will take in and it will take in a file and then an arrow function and then it will return it will return I'll assets k y is a throwing error okay so this should be yeah now I got it assets your assets file name is actually the CSS file name so I'll just give it a CSS file name yeah and now I'll give it I'll declare it over here so const CSS file name is gonna be index dot Min dot CSS and that will be our actual file name and now let us now let's go for the entry file so yeah it's entry file and now this will return JS file name it's not actually file name it will be name Dot main.js yeah so this will actually be our there and now now since the white config is actually changed let's stop it and run it again and now let's see okay so even now these logos aren't loading so for that these logos will only be loaded by Django so we should configure static files for Django so static URL slash static and then it should be static files Builders yeah yeah and then it will be not based it's going to be dist ress where the build files go and then it's gonna be slash public is where is where you put all the public files and now let me hit static root it's going to be oops static root is based on static I'll just yeah and all these things are configured I'll even configure the White Noise middle back so it will be white noise middleware and then white noise middleware yeah and now um Okay so okay so it's white noise Dot middleware and then I'll stop it and I'll again run it yeah and now if I hit enter there is still even now the logo won't load for the logos to load let's go to the react and then I'll move this into the public folder and I'll just delete the assets folder just to keep things simple I don't need the assets folder and now if I go to app.tsx I see this is actually so I'll const it's gonna be react logo I'll give it a name of react.svg so that is actually correct and then const White logo it is white dot SVG advanced react logo path so that is gonna be slash it's going to be slash static slash yeah I should do the string substitution so yeah so it will be react logo so the same way it will be for white logo yeah and now instead of SRC I will replace it too logo path and then this will be react logo path and now okay Okay so this has some error and now in the Django URL you are getting this and this even performs the hot reload so wait Django I'll put a plus and then hit Django once I save it and go to my server boom I get hot reload in my Django and I can even add react Dom and have routing to this and that's also possible and then it's highly reactive and now let's go for the production settings yeah so if you want to deploy this it won't work so now let's build our front end npm and build so let's wait for the build to complete boom it's done and in the dist folder I see assets and JS index.js it's just one single file and the CSS is also a single file so everything is perfect as of now so the only thing is yeah so if I go to so where is my settings if I go to settings and if I set the debug to false a and yeah if I set it to false and allow the host to Star and not this if I hit run server and it won't work so for it to work so now let's go for internal IPS so that is going to be it's going to be localhost and then 127.0.0.1 so these two are this so why we are including this is that you can have the debug inside the template so let me explain to you so let's go to HTML base so percentage if debug I can have a H1 H1 saying debug and then else I can have another H1 saying not debug yeah and then I can have a end of yeah and now if I hit reload I see not debug since the debug is false I am getting a naughty bug okay yeah so if debug only this should run in debug mode and this should not run in production in production White Noise should serve your static files so I will have so let me load static load static and let's just go to the dist folder this folder index.html and these are the two parts and now go to our base.html in not debug I'll paste this it's going to be static assets index.js yeah and then this same this is far this and and now if I run even now it won't serve yeah it's showing internal server error because we didn't run python managed or pickle ecstatic so python 9 Edge dot pi collect static it collected the static and now let me run my server python manager by run server and now okay still I'm getting an internal server error failed to load servicon okay there is some error I don't know actually okay so I didn't run python manage dot pi migrate yeah that one actually did not run and now if I hit run server it will actually show okay even now it's not showing so let us go to settings.pi and let me set that to true as of now and now let me run okay if debug oh okay so that was a small type of else I did not have an end of statement okay and now if I hit refresh okay so and now I think it's actually working so if I go to settings and then if I put that to false and if I again restart my server and boom our code is production ready yeah so now I need to remove that not debug and boom so Django is serving the static files our HTML CSS and even the images boom and now if I hit npm and Dev and boom it is also serving both yeah so this is really nice I think this won't work if the Django is stopped think no no okay so this is actually a production ready app which you can deploy it right now I haven't configured the react router so I think you can also configure it there is no big issue you can actually configure it and you can you can have the urls.pi so instead of path you can just point it to Star so it will handle all the routes your react router Dom will handle all the routes or if you are having if you want only posts to handle to have a react component and rest others Django should handle your URLs you cannot post slash star and then this should actually work foreign yeah for any other doubts you can comment down below and what you want next to see in this channel so Yeah the code will be on the GitHub so you can clone it Fork it start it okay so see you thank you

Channel: Coding for Innovations

Views: 11,406

Keywords: django, reactjs, full stack, vitejs, vite js react, django tutorial, python

Id: 9Iq-0OYkoX0

Length: 20min 57sec (1257 seconds)

Published: Thu Jan 26 2023