Django + React Integration

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.