Django and React can be daunting to put together. One recipe I like for monorepos is using Yarn workspaces.

The folder structure provided by create-react-app encapsulates all the frontend, and it doesn't feel connected or aligned to the Django project. Workspaces allow organizing the frontend entry points in different folders without losing CRA's capabilities.

To start, let's create a Python virtual environment. Use Pipenv or Poetry as you prefer:

$ python -m venv .venv

$ source .venv/bin/activate

Installing Django:

$ pip install django

Then, create a Django project named djreact. The dot after the command will avoid an unnecessary subfolder:

$ django-admin startproject djreact .

Assuming you have npx installed, let's initiate a react project named client at the same level as the djreact folder:

$ npx create-react-app client

In the client folder, delete the files below. They will be re-created in the root directory:

$ rm -rf .git node_modules yarn.lock .gitignore

In the root directory, outside of the client folder, create another package.json and declare the workspace:

$ touch package.json

In package.json, put:

{
  "private": true,
  "workspaces": ["client"]
}

More details on why it needs to be declare as private here.

Now we can re-install the dependencies:

$ yarn workspace client install

To start the client project, run:

$ yarn workspace client start

On a separate tab, activate the virtualenv and start Django:

$ python manage.py runserver

Check the final structure on GitHub: augustogoulart/djreact