Serving React and Django together

Reactjs is a nice framework for frontend and Django REST framework (DRF) is another great framework for API development. I wonder how to serve React and Django projects in the same server and same port! Finally, I’ve reached a solution and today I’ll discuss it.

In this article, we’ll create an API using Django REST Framework and a React project (frontend) which will consume the API. The idea is very simple, React will fetch some book names from the backend (Django) and render them.

Backend (Django) project

I’m using Django 2 for this project. At first, create a Django project named book.Install django-rest-framework using pip install django-rest-framework and add rest_framework to INSTALLED_APPS list in settings.py .Create two apps named api and core using python manage.py startapp apiand python manage.py startapp core , then add the app names to INSTALLED_APPS list in settings.py .

This is our INSTALLED_APPS list in settings.py :

<a href="https://medium.com/media/c66198483de30a010b180b27d4d79d91/href">https://medium.com/media/c66198483de30a010b180b27d4d79d91/href</a>

Edit /api/views.py and add the following codes :

<a href="https://medium.com/media/b3f1ebcf6a9d26585e1aaca7b648d57e/href">https://medium.com/media/b3f1ebcf6a9d26585e1aaca7b648d57e/href</a>

Configure the url in book/urls.py (url configuration can be done in more elegant approach but I’m skipping it for brevity) :

<a href="https://medium.com/media/e48f30418df59019de790c3b514bc19c/href">https://medium.com/media/e48f30418df59019de790c3b514bc19c/href</a>

Start the server using python manage.py runserver , (it will run the server at default port 8000).

Test our API

Postman is a great tool for testing APIs. Open Postman and navigate to “http://127.0.0.1:8000/book/” :

Our API is working fine! Now we’ll develop the frontend using React.

Frontend (React) Project

We’ll use create-react-app package to create React project. At first, install “create-react-app” package using npm install create-react-app .

Now create the react app named “book-frontend” create-react-app book-frontend inside the project directory (book).

Change the current directory to “book-frontend” and run npm start .

It will run our frontend server at default port 3000.

Navigate to localhost:3000 in your favorite browser (I’m using google chrome) :

We’ll use two more packages in the frontend. Let’s install them first:axios : npm install axiosreact-router-dom : npm install react-router-dom

Create a folder named Component inside src folder, then inside Component folder create a folder named Book. Inside book create a javascript file name index.js (That means: /src/Component/Book/index.js).Put the following code into index.js (this code will fetch data from backend and render them to frontend).

Our index.js :

<a href="https://medium.com/media/b60407433c593973599e0e247f8b6446/href">https://medium.com/media/b60407433c593973599e0e247f8b6446/href</a>

And modify App.js like this :

<a href="https://medium.com/media/f7fb2113e477790cff10f4c406f06316/href">https://medium.com/media/f7fb2113e477790cff10f4c406f06316/href</a>

All the features of our million dollar book app are complete now!Navigate to localhost:3000 to see the output :

OPS! Nothing is showing without the word “books”, right?

Open the console of your browser :

We have to solve the CORS issue.We can solve this issue using django-cors-headers library.

My settings.py solving CORS issue :

<a href="https://medium.com/media/df121c214c3abfce7fd242456932df38/href">https://medium.com/media/df121c214c3abfce7fd242456932df38/href</a>

Now, navigate to localhost:3000 and see our desired output!

Serving React and Django together

This is the key point of this article, we’ll serve these two apps together in the same server.

Create the “build” version of our frontend app

Navigate to the book-frontend directory and run npm run build . This will create a build directory.

Then go to setting.pyand add the following lines :

<a href="https://medium.com/media/e5e50460207b5a0510b728e669b68064/href">https://medium.com/media/e5e50460207b5a0510b728e669b68064/href</a><a href="https://medium.com/media/652e40f5c788522916e95de35feb2515/href">https://medium.com/media/652e40f5c788522916e95de35feb2515/href</a>

Goto cors/view.py now, we will serve our frontend view from here. Update it like :

<a href="https://medium.com/media/6af73633a8937b48e3e56d4187fed691/href">https://medium.com/media/6af73633a8937b48e3e56d4187fed691/href</a>

Update /book/urls.py :

<a href="https://medium.com/media/ba3c7d45aa4396df36cb4c4abaf799da/href">https://medium.com/media/ba3c7d45aa4396df36cb4c4abaf799da/href</a>

Now close all the previous servers (if they’re active until now). Run the Django server using python manage.py runserver. Go to your browser and navigate to http://127.0.0.1:8000/ and BOOM! We’re serving our Django and React app in the same server!

You can also read :

1. Understanding Python decorators
2. Functions as first class object in Python
3. Playing with inheritance in Python
4. Closure in Python and Javascript
5. Developing our first PWA using React
6. React navigation cheatsheet
7. Min priority_queue in C++
8. Naming your variables
9. Serving React and Koa together