Deploying and development env for Django and React

Question

I build a nice web application with django and react and i want to deploy it, during development i used to have to separate app which run on different ports on my sys, django app and react js app. I'm using axios to connect between my frontend and my backend. Now i think i finish my first version of my web app and i want to deploying it and i understand its not that simply as i thought and i'm so frustrated i couldn't find the right way.

My question is what is the best way to build this kind of project using those two platforms? there is a way which i can develop this app and make this work as production on dev? how can i work with relative http request on dev, because its different servers?

I don't need to perfect way to do it because its first version and i'm doing it for my first time, i want the right way to begin and to deploying my first app to the internet..

Answer 1

First, you should think about how isolated you want your front and backend to be. There are a few ways to deploy React + Django.

Serving Static Files with Nginx

I think the first way, and simpler way, is to integrate it directly into your reverse proxy, something like NGINX. You can get NGINX to serve the compiled React app bundle directly as you would with any static html site - put it into /var/www/ and serve it directly. And then you can map your urls with /api to Django on port 8000. Part of your nginx.conf could look like this:

server {
    server_name your-server-host;
    root /home/www;  # this is the parent directory of where you copied your React bundle to

    location /api {
        proxy_pass http//your-server-host:8000/;  # this is where you point it to the Django server
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location / {
        try_files $uri $uri/ /index.html; # this is where you serve the React build
    }
}

Serving React directly from Django

A second way to serve this is to let Django handle the backend and let React handle Django's frontend, instead of Django's templating system. Note that this isn't the same as serving Django on one port, and React on another. Here you're just serving the Django app, with the React build bundle in Django's static assets so it would be served as any other static asset. To illustrate, have a look at the root URL conf:

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^api/', include('yourapi.urls')),
    url(r'^.*', TemplateView.as_view(template_name="index.html")
]

Notice how we're putting a template view at the very end that catches any URL that wasn't caught by the patterns preceding it. And once we catch it, we're serving index.html which here we assume is placed in your template directory. This index.html should be the one generated when you build your React app. While the js and css bundle built should be in your static folder, and it should be collected together when you run python manage.py collectstatic. A possible project architecture like this would be two have two different git repositories for both projects, but you can make the React repository a submodule of the Django repository.

Serving each app individually

The last method is probably what you've mentioned, which is to treat both apps as individual projects and deploy them as separate, and independent projects. This means that you can either serve your React app on a different server or a different port from your Django app. Serving Django is straight forward on any server, the common practice is to put it behind gunicorn. For React though, I can see two possible options - one is to serve it like in the first way: Build the app locally and put the build files into a directory like /var/www and let nginx serve the build. A second way is to use a production grade process manager like pm2 to serve the React app as a process, instead of a static file served by a reverse proxy.

Ultimately, the choice is up to you and there are considerations beyond just thinking about the two apps that have to be made - for example, are you considering a deployment pipeline? CI/CD? Are you deploying manually? Are you deploying with Docker? These are various things that could affect your decision eventually.