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.
