Just an example of how React and Django can play nice.

Warning: starting the docker compose project will create a superuser with the name ADMIN and the password ADMIN. Please change these if you use this project in production.

Create a .env file in the root of the project and paste (and edit as necessary) these variables.

DATABASE_NAME="MyAwesomeDatabaseName" DATABASE_USER="postgres" DATABASE_PASSWORD="MyDatabasePassword" DATABASE_PORT=5432 DJANGO_SECRET_KEY="my-secret-key" DEBUG=True ALLOWED_HOSTS='["*"]' CORS_ALLOWED_ORIGINS='["http://localhost:1337","http://127.0.0.1:1337"]' CSRF_TRUSTED_ORIGINS='["http://localhost:1337","http://127.0.0.1:1337"]' CSRF_COOKIE_SAMESITE="Strict" SESSION_COOKIE_SAMESITE="Strict" CSRF_COOKIE_HTTPONLY=False SESSION_COOKIE_HTTPONLY=True CSRF_COOKIE_SECURE=False SESSION_COOKIE_SECURE=False CORS_EXPOSE_HEADERS='["Content-Type","X-CSRFToken]' CORS_ALLOW_CREDENTIALS=True 

Finally, run docker compose up. If you are in development, and you'd like live reloading, run docker compose up -w. You should be able to connect to the site at localhost:1337

• CD into react-frontend.
• Run npm install
• Run npm run dev

• CD into backend.
• Create and activate a virtual environment
• Run pip install -r requirements.txt
• Create a file called backend/backend/settings.env
• Paste (and edit as necessarry) these variables:

DATABASE_NAME="MyAwesomeDatabaseName" DATABASE_USER="postgres" DATABASE_PASSWORD="MyDatabasePassword" DATABASE_PORT=5432 DJANGO_SECRET_KEY="my-secret-key" DEBUG=True ALLOWED_HOSTS='["*"]' CORS_ALLOWED_ORIGINS='["http://localhost:1337","http://127.0.0.1:1337"]' CSRF_TRUSTED_ORIGINS='["http://localhost:1337","http://127.0.0.1:1337"]' CSRF_COOKIE_SAMESITE="Strict" SESSION_COOKIE_SAMESITE="Strict" CSRF_COOKIE_HTTPONLY=False SESSION_COOKIE_HTTPONLY=True CSRF_COOKIE_SECURE=False SESSION_COOKIE_SECURE=False CORS_EXPOSE_HEADERS='["Content-Type","X-CSRFToken]' CORS_ALLOW_CREDENTIALS=True 

• Run py manage.py collectstatic
• Run py manage.py runserver

• Copy the Nginx config located in nginx/
• Move any and all sites in sites-available/ to sites-enabled/ (in /etc/nginx/sites-enabled)
• Change the user directive in nginx.conf to match your username (or just change it to root)
• Change the /static location directive's alias (in nginx/sites-available/django-react-crossorigin)

Q: What purpose does backend/collectedstatic/ serve if we aren't using Django to serve static files? A: The Admin site

Q: How do I create a migration with makemigrations? A: First, copy your base .env file to /backend/backend. Then, create a virtual environment with py -m venv env. Then, activate said virtual environment with . env/bin/activate (commands will differ between operating systems). Next, install all of the required packages with pip install -r /backend/requirements.txt. Finally, you can go into the /backend folder and run python3 manage.py makemigrations. Django will likely buffer for a few seconds when making migrations, and spit out an error something along the lines of this:

could not translate host name "postgres" to address: No address associated with hostname 

This is fine. You're only geting this error because you aren't running makemigrations inside your Docker container.