As a Django backend developer you might need to collaborate with a frontend dev who uses react or you might be a full stack Django developer interested in building the front end of your applications with react( which I believe we all love by the way ๐). Then you need to learn how to interface a react frontend application to your Django backend. The article contains the easy steps to set this up. Have a good read. Cheers!!!
Faruq Abdulsalam
2 years ago | 4 min read
As a Django backend developer you might need to collaborate with a frontend dev who uses react or you might be a full stack developer interested in building the front end of your applications with react( which I believe we all love by the way ๐). Then you need to learn how to interface a react frontend application to your Django backend. This tutorial will guide you through the easy steps. We are going to set up the Django backend first then we'll set up our react frontend and then connect them together.
Setting up the Django backend.
Iโll assume that you already have python installed on your machine. If you don't, you can download and set it up via this link. Please ensure you download the latest version of python. (Python 3.97)
Open the Command Line on Windows, Terminal on Mac and Linux and navigate to the directory where you want to store the project and create a new directory
mkdir React-Django
Move into the new directory
cd React-Django
Create a Virtual environment.
It is recommended to always create a virtual environment before you start your project. This helps you to separate the packages you use in this application from other applications; any change you make here wont affect the same package in another application on your system. To create a Virtual environment on your system; run this command:
For mac/unix users: python3 -m venv env For windows users: py -m venv env
After creating the environment, activate it by running :
For mac/unix users: source env/bin/activate For windows users: .\env\Scripts\activate
You can deactivate it by simply running the command below, but you don't have to deactivate it yet.
deactivate
Installing Django
Now let us proceed to installing Django,
pip install django
Create a new django project and name it โproject1โ
django-admin startproject project1
Move into the project directory
cd project1
Migrate your โchangesโ with this command
python manage.py migrate
Then you can start your server to ensure that everything is working properly
python manage.py runserver
Copy this url: http://127.0.0.1:8000 and open in any browser of your choice. You should be able to see something similar to this ๐
Setting up the react frontend.
Next create the frontend react application by running
npx create-react-app frontend
Move into the frontend directory
cd frontend
and then start the frontend application by running
npm start
You should see the default react application page in your browser now; if you cannot see it open this link in your browser.
http://localhost:3000
We wont be making changes to the installed react application so we are done here but we need to build the package which the backend will make use of by running:
npm run build
Now let's head to the backend setup and connect it to the react application we just created.
#Interfacing the front end application to the Django backend.
Move back into the root folder
cd ..
Next we'll be making some changes to the settings.py file in the backend project file so that the django backend can recognize the react application we created as the default frontend directory. Open up the settings.py file and make the following changes.
Import 'os' at the top of the file
import os
then configure the template directory by pointing it towards the build folder in our frontend react directory.
Then we map the created view to a url in our urls.py file in the project1 folder. We import the "front" view function from the core app and we map it to the default url " ".
from django.contrib import admin from django.urls import path from core.views import front
Reload the page in your browser and you should now see the react page we saw earlier.
Notice that the url is now http://127.0.0.1:8000.
We have successfully connected our Django backend to a react frontend. You will definitely need Django rest framework to create the api's the react frontend application will make use of to get backend data. Now you can get started on that great project idea of yours!! Cheers!!