skip to Main Content

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.

2

Answers


  1. 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; 
        }
    }
    
    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search