Django + React : How to connect them for deployment?

user_12119211 0
Viewed 3329

I am running an app with Django+DRF, CELERY+REDIS ,ReactJs+REDUX & JWT, and i am having a hard time connecting backend with the frontend for deployment.

i have used create-react-app to generate React code; and npm run build to generate the production build.

i have been looking around but i can't find a tutorial on how to link them together.

if you guys have any link in your pocket that i can follow i'll be thankful to you.

reactjs production django
2 Answers

You don't need to move your React files "into" Django. Just serve them separately.

This is how I serve my projects:

enter image description here

I serve my API from /api/ url, so here's a rough representation of my Nginx config:

server {

    # urls that start with /api or /admin
    location ~ ^/(api|admin) {
        # pass them to uwsgi or gunicorn
        ...
    }

    # urls that start with /media
    location /media  {
        # serve from your project's media folder
        ...
    }

    # urls that start with /static/admin 
    location /static/admin {
        # these requests are made to admin's static files
        # serve them from your staticroot folder
        # i.e. where your files are stored after you run `collectstatic`
        ...
    }

    # everything else
    location / {
        # serve from frontend build folder
        root   /path/to/the/build/folder;
        index  index.html;
        # this is important
        # first try to find files matching url, like css, or js, or favicon
        # if nothing found, serve the index.html            
        try_files $uri /index.html; 
    }
}
user_19252570

As you mentioned in comments, this solution seems reasonble for me.

Deploying Seprate React Frontend and Django DRF API

In your case as I understood you can start your DEV version of Django+DRF on the random port, like localhost:5000/. Then you can start DEV server on create-react-app on the other port, like localhost:8080/. For testing purposes you can check connections between frontend and backend, using DRF urls in React app.

After that, you can build your React app and add bundle.js as a standard js file to your index.html in Django project. Create 'home' url in django and connect it with the simple template such you're using in index.html in React app.

Your bundle.js will include all necessary libriaries. But for production version on the server you will need to build your app once again for actual urls with actual domain.

Hope it helps.

user_41494710
Related