Overview for Django + React Integration
Django is a very powerful framework built for the perfectionist and if we pair this framework with the react then it becomes a legendary combination for our web app. Django + React Integration is very easy and simple and the results are very powerful. In this article, we will see how we can integrate react in our Django web app. so before starting here are some pre-requisite.
- Basic Knowledge of Django
- Basic Knowledge of React
Step 1: Configuring the Frontend with React
firstly we will start with the react app but before that install Node JS on your PC. in my case I am using windows but commands are not much different for other OS too. open the terminal/CMD on your desktop to avoid any Complexity. make a new folder with the below command.
C:\Users\saurav\Desktop>mkdir Django-react
Now go to that folder like this
C:\Users\saurav\Desktop>cd Django-react
C:\Users\saurav\Desktop>Django-react>
Now we will create a react app in this folder so type the below command to do this
C:\Users\saurav\Desktop>Django-react>npx create-react-app frontend
The above command will take approx 1 – 3 minutes depending upon your PC and Internet Connection Speed and after that, you will see a success message. Now after this go to the frontend
folder type npm run build
command like this.
C:\Users\saurav\Desktop>Django-react>cd frontend
C:\Users\saurav\Desktop>Django-react>frontend>npm run build
Here below is an image for reference.

npm run build
command will copy all the static files and templates to the build
folder and tell Django to use these files for template rendering. every time we make changes, we have to run this command. Now let’s get out from this directory and make a Django project parallel to the frontend folder
Step 2: Configuring the Backend with Django
C:\Users\saurav\Desktop>Django-react>frontend>cd ..
C:\Users\saurav\Desktop>Django-react>django-admin startproject backend .
here we have used ” . ” because we don’t want a separate folder for our Django project. now open vs code or any editor of your choice. in my case I am using vs code so I will type the below command to open vs code in this directory. Also, run the server and open that localhost URL in your browser.
C:\Users\saurav\Desktop>Django-react>code .
C:\Users\saurav\Desktop>Django-react>python manage.py runserver
Here is the image for reference

Our Codebase structure

Step 3: Integrating the Frontend with Backend
Now we will tell Django to refer to build files for static and templates. so import os
in the top of the setting.py
file and add the path of the template like this.
TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': ['os.path.join(BASE_DIR, 'frontend/build')'], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ]

Now add staticfiles_dirs
to the bottom of settings.py
like this
STATICFILES_DIRS= [ os.path.join(BASE_DIR,'frontend/build/static') ]
After that, configure the views.py
like the below code
from django.shortcuts import render
from django.shortcuts import shortcuts
def index(request):
return render(request, 'index.html')
Urls.py
should be like this below code
from django.contrib import admin
from django.urls import path
from . import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.index),
]
After everything is done then restart the server and refresh your Browser. Hopefully, if you have done everything correctly, you will see the screen like in the image below.

Congratulations, You have Successfully Integrated React in your Django App. if have any problem in any of the step, then please let me know in the comment section.