Recommendation on deploying a heavy Django + React.js web-application

Question

I got to build a Django application recently that has a database and performs some floating-point operations( biopython, alpha-shapes and similar algorithms on crystallographic data from the database) upon request from the React.js frontend.

I was wondering what would be the best way to deploy something like this long term and how the two codebases would communicate with each other ( runs well on localhost as of now ). I've come across a few suggestions like digital ocean for django and firebase for the frontend, and heroku of course.

---

I have never, however, hosted a website that would go into production eventually, let alone two, and am a little at a loss as

1. to how the two codebases would communicate with each other,
2. how to preserve all the packages installed in django's virtual environment in deployment,
3. how to transfer online the database to which the calls are made.

---

I would appreciate any pointer to resources to read up on or an architecture suggestion very much. Thanks a ton!

Answer 1

I made a few apps using both Django and React.js, and to me the best approach is the following:

• "classic" backend with django-rest-framework and a database that suits you,
• calling your backend through your django API from the frontend.

A classic architecture for my projects looks like the following:

.
└── your_ambitious_project
    ├── frontend
    │   ├── public
    │   │   ├── favicon.ico
    │   │   ├── index.html
    │   │   └── manifest.json
    │   ├── src
    │   ├── package.json
    │   └── ...
    ├── backend_api
    │   ├── core_api
    │   │   ├── models.py
    │   │   ├── views.py
    │   │   └── ...
    │   └── backend_api
    │       ├── __init__.py
    │       ├── settings.py
    │       └── ...
    └── ...

Supposing you are going to use Nginx, the aim is to:

• make your backend_api accessible for your React.js frontend app,
• make user able to access your frontend/public/index.html.

For me, a typical nginx.conf file would look like this:

upstream backend_api { # so we can access django backend api from frontend
    server backend_api:8000;
}
# below: in dev environment only (for hot reloading)
# upstream frontend {
#   server frontend:1337;
#}
server {
    listen 80;
    server_name your_ambitious_project;

    location /api/ {
        proxy_pass http://backend_api;
    }

    location / {
        alias /var/www/frontend/build/; # for production environment
        # proxy_pass http://frontend; # for dev environment (hot reloading)
    }
}

Then, you have to make your backend api accessible from the outside, so you will use for instance gunicorn to do so:

gunicorn siapi.wsgi:application --bind 0.0.0.0:8000

For the frontend, in production environment Nginx will get the build of your project in the good location (after running npm build), else in dev environment you will have to run your server: npm start.

A few links you can get inspired from as I was:

• https://www.techiediaries.com/django-react-rest/
• https://www.valentinog.com/blog/drf/

Hope it will help you having some idea of how to combine the use of both frameworks!