Django React Setup – Best Project Structure

Learn the best way to setup your Django and ReactJS Project by following best folder structure practice. We will use Django Rest Framework with ReactJS with to create interactive beautiful dynamic website. This is best Folder structure for React and Django REST.

Let’s get started

Django + ReactJS Project Setup

Django and Django Rest Framework Setup

We will keep all our project files in one folder, so create folder and change directory to that folder. E.g – folder name : django-react

mkdir django-react
cd django-react

Now lets create virtual environment in that folder – virtualenv and activate it.

virtualenv env
. .\env\Scripts\activate

Install Django, Django Rest Framework in our virtualenv.

pip install django djangorestframework

Now its time to create our django project.

django-admin startproject myproject

Change the outer name of your django project myproject to backend and change directory.

cd backend

Once project is been created, now create a app with name frontend for serving our front-end react services.

django-admin startapp frontend

Its time to configurations. Open with project with editor.

In settings.py file, add following under INSTALLED_APPS.

INSTALLED_APPS = [
     
    'rest_framework',
    'frontend',
]

In urls.py file add following code.

from django.contrib import admin
from django.urls import path,include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('frontend.urls')),
]

Now create urls.py file in frontend app and add the following code inside it.

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index)
]

Last in views.py of frontend app, add following code.

from django.shortcuts import render

def index(request):
    return render(request, 'build/index.html')

So basically we are point to build/index.html of our reactjs project, which we are going to create soon.

Runserver and see if any error occurs.

python manage.py runserver

React Project Setup for Django

Open a new terminal, change directory to django-react.

For installing react js apps, you need node.js.

For creating react app, type the following command in your terminal.

npx create-react-app frontend

The above command will create a react app with name frontend.

Change directory to frontend.

cd frontend

Now run the build of react app.

npm run build

Finalizing Django Setup for React App

In settings.py file, add to TEMPLATES DIR.

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, '../frontend')],
        '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',
            ],
        },
    },
]

And at last of settings.py file add following code for serving static files.

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, '../frontend/build/static'),
]

Done!!!

Now just the Python Server and go to http://localhost:8000/.

python manage.py runserver

Note – We are using two terminals for our project. One for Django and another for ReactJS.

This is the best way to organize your Django + React Project for better coding experience.