start.django-react
A single Docker container hosting both React and Django.
The React App is accessible directly at localhost:8000
.
The Django API is accessible at localhost:8000/django/
.
The /django_static/
and /media/
subpaths also serve static files.
How to use
- Place the .env file in the root folder, and add the following:
DATABASE_URL=postgres://postgres:postgres@db:5432/postgres
SECRET_KEY=your_secret_key
DEBUG=True
- Run this in the react directory to generate the production build:
npm run build
NGINX container only serves React App's production build.
-
Modify
utils/urls.py
andutils/views.py
in the Django project to handle adding meta tags. Instructions have been added in those files. -
Return to root directory and build container:
docker-compose build
docker-compose up
Generate production
- Modify ONLY the request URLs from React; change them from
localhost:8000/django/a/b/c
toyour-server.com/django/a/b/c
. - Modify .env files accordingly.
- Remove the code to start development server in entrypoint.sh and also change nginx.default to serve production instead of development.
Rancher deployment
- Add container to load balancer with port 80.
- Add volumes for log and media folders.
Important details
Modifications to Django
In settings.py, we have to add the following to allow NGINX to serve the files correctly.
FORCE_SCRIPT_NAME = '/django'
STATIC_URL = '/django_static/'
STATIC_ROOT = os.path.abspath('/var/www/django_static')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.abspath('/var/www/media/')
These are explained in comments in settings.py.
Things to handle
- React Router should be able to handle subpaths correctly e.g. given a subpath /a/b/c/d it routes to the correct page
- React App must not have any subpaths that conflict with NGINX instructions i.e. /django, /django_static or /media.
For consideration
- Should
npm run build
be included in entrypoint script? - Testing
Useful links
To inspect a container:
docker exec -it <container-id> /bin/sh
Useful links:
https://serverfault.com/questions/562756/how-to-remove-the-path-with-an-nginx-proxy-pass