Django React project structure

Question

I have a project with Django as back-end.

And for the client side I have 4 different sections:

Django Admin Panel for super user which renders by Django itself.
User Login and Signup section which is rendered by Django-Jinja template system.
App admin panel which is a react app
Main app front-end which is a react app

The structure that I have in my mind is like this:

├── djangoproject
│   ├── __init__.py
│   ├── settings.py (can be folder)
│   ├── urls.py
│   └── wsgi.py
├── apps
|   ├── admin_panel
|   ├── core
|   ├── auth
|   └── ...
├── templates
|   ├── admin_panel (react)
|   ├── core (react)
|   └── auth
├── static
└── manage.py

I have two questions:

1- should I change the structure of my project (for example bring react folders outside or use frontend folder naming instead of templates?)

2- Is it common (or reasonable) to use git sub module for react apps and only commit build of them in main project? If it is can you give any example or best practice?

user_6889477 · Answer

For the best practices of the project structure, I think you should create a different repository(folder) for front-end(react) outside the back-end repository (folder).

Backend Structure

I follow this project structure:

├──djangoproject
|
|__config
|  |
|  |__settings
|  |  | 
|  |  |__base.py
|  |  |__local.py
|  |
|  |__urls.py
|  |__wsgi.py
|  |__ __init__.py
|
|__djangoproject
|  |
|  |__users (user app dirctory)
|  |__products (product app dirctory)
|  |__ __init__.py
|
|
|__static
|  |
|  |__css
|  |__js
|
|__media
|
|__manage.py
|__gitignore

Front-End Structure

├──djangoproject(React)
|
|__app
|  |
|  |__assests
|  |  | 
|  |  |__fonts
|  |  |__images
|  |
|  |__components
|  |  |__your components
|  |__containers
|  |  |__Your containers
|  |__app.js
|
|
|__README.md
|
|__package.json
|__gitignore

For a better understanding of project structure I recommend you follow the Django cookie cutter (https://cookiecutter-django.readthedocs.io/en/latest/index.html) for back-end and use react boilerplate (https://www.reactboilerplate.com/) for front-end.

Django React project structure

1 Answers