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.
You suggest to make react-app using create-react-app cmd . It comes with a git initialized folder , now when u try to upload the whole root project folder to github, it displays error stating that the inside folder is already git initialized. How can you solve this ?
Just go to your folder where git has initialized and just delete .git folder and initialize git wherever you want.
Just delete the .git folder in react code