Folder structure for React and Django REST

Question

I'm in the process of refactoring a rather basic/traditional Django webapp to a more modern React-plus-Django-REST setup. I'm far more familiar with Django than React, so where to put the React part is what's confusing to me.

My question is: what are the best practices for folder structure in using both Django and React? Ideas I've had:

1. Put all React files in their own folder like this: . ├── app1 │   └── example-files.py ├── app2 │   └── example-files.py ├── manage.py ├── react-django-project │   ├── settings.py │   └── urls.py ├── requirements.txt ├── some-app-1 │   └── example-files.py ├── some-app-2 │   └── example-files.py ├── src │   └── components │   ├── component1.js │   └── component2.js └── ...

2. Put all React files in the static folder, but this doesn't seem right to me.

Is there an established set of best practices for this?

Answer 1

Most of the time there are two separate projects for the back and the front end:

To build a ReST API using Django I'd strongly recommend you to check out Django REST framework if you haven't already. There is a simple tutorial on that home page that should get you up and running.

For the React app "React Create App" seems to be the standard way to start a project nowadays. See the linked GitHub page for step-by-step instructions.

Then follow this "Proxying API Requests in Development" guide to proxy requests to your API for your development setup.