How to Integrate Django and React JS (from scratch)

what is going on everybody today i'm going to show you the complete procedure and how you can integrate your react front end to your django back-end what i mean is that we will only use one server for running both of our front-end app and our back-end app instead of using two of them because when we run our react app it runs on port 3000 as default and our back end runs on port 8000 and of course before you dive into this video i assume that you already have at least a basic knowledge of django as your back end as well as a basic knowledge in creating your react as your front end and you can apply these steps to your existing django back and and react front-end app but i'm just going to create this app from scratch to really understand how to implement this so without further ado let's start integrating our web app i'm just going to create our django up first so let's create the folder here let's call this one as dj react integra ops integration and let's open this folder i'm going to launch this into our visual studio code so let's type cmd in this directory and the shortcut to run this in our visual studio code is to type code space dot and now i'm just going to close this one oops so let's launch our terminal into your visual view code by pressing the control back text i'm just going to create a virtual environment real quick and i will use virtual ops virtual env but you can use different like ppnv or you can directly install this to your machine but i prefer to use virtual environment to avoid conflicts in the future like if there's an update and it needs to have an exact version of the python modules that you use and if you don't have a virtual environment just install this one by a pip typing pip install work 12 in 3 since i already installed this one it says requirement already satisfied so now let's create our virtual environment just clear this one say virtual in v i'm going to call this one as v e and v we have this folder right now so if we um go to this folder and inside the scripts we have this activate this is what we're going to use so let's just type in source vnv scripts activate for linux or for [Music] um mac users it's gonna be bin instead of scripts but oops bin but for windows it could be scripts so let's activate this virtual environment now you can see this open and close parenthesis it means that you are activated so let's install our django and now we can create our django app by typing django admin ops admin start project and it's called this one back end back and that because we are already in the main directory and to avoid nested folders like what we are in right now so i just added that after that okay just close this and now we have this back end okay so this should be the structure of your project for now and then let's also create our front end by creating it via npm so or in px in px create react app and then say front end since i'm using yarn i will not do i will not use npx but if you use npx just type like this so if you're using yarn this could be yarn create react dash app then the name of your app so front end okay so this is the structure of our project inside this dj react integration folder we have three folders in it we have the back end the front end and the virtual a and v we have also the manage the pi file and then let's go ahead and build our front end so to build this front end you should go to this directory first let's see the front end and now let's run like npm run build for using the node package manager or pm but for me since i'm using yarn i'm just type yarn run build and this will build my project so after we totally build our app which means that it's ready for production we should have this build folder in the front-end folder and now since we're done here let's go back to the main directory cd dot to go back oops cd dot dot i mean cd dot dot and now we are here so let me just go to my back end to settings.pi and then let's here we have to configure something we have to import the os and then scroll down and go to templates inside these deers we have to put some os that path that join the base directory and then we have to join the front end and then build say like front end comma build oops and now let's save this one okay let's go ahead to our urls.pi now let's import the from django.urls importantrypath we also have to import from django that views that generic import template view and then let's put the template view here say re path that asterisk and then template view that as view the template name because you index.html okay so this index that html is from our build folder and then this one since we already connected our templates here the front end and then build we can access these files and we have to we have to access this index.html and put it into our urls so save everything save and then let's run our back-end python manager by run server it should run to port 8000 okay now let's go to this link follow this link 127.0001 and now we have this blank blank page okay instead of that default django page we have this blank page and now if you see the title we have this react app it means that we already connected our react to our django so but we need to load the static files here so what we want to do is go back to your visual studio code and inside these settings scroll down to the bottom we have to add the static files there's static props files and viewers and then this is going to be the os that path that join base directory front end the build and then this one this is what we're going to join here the static folder static okay save everything and go back to our browser now let's reload this should work boom so here we go we are now successfully integrate our jungle back end to our react front end but let's just make some like a little bit of changes into our front end to really see if this works so let's go to our front end let me just close this one since we are done with connecting this i'm just doing this extra stuff to front end in source here let me just make it changes here and remove everything inside this div then let me just display just an each one of hello world from react save it and before this one's changes you should build this because we the build folder inside here is not updated so let's just close this for now it's the cd front end and say yarn run build so you build everything again and it's go back cd dot dot then it's python money by run server okay go back to this and if we reload we should have this hello world from react so thank you guys for watching i hope you enjoyed this video and i hope this helps you and if it is consider to drop a like in this video and i really appreciate if you subscribe to my channel and turn on that notification bell to stay updated to my new uploads in the future bye everyone

Channel: kenLovesToCode

Views: 1,525

Rating: 4.9595962 out of 5

Keywords: django + react, django with reactjs, django, reactjs, python programming, react + django integration, combining django and react, react js programming, javascript programming

Id: zlykQtuWbQY

Length: 12min 34sec (754 seconds)

Published: Wed Apr 07 2021