reconciling `static` folders in a React / Django / nginx project

Question

I'm working on a rather large project with some colleagues who are making the Django half. I'm working on the React half (created with create-react-app, then ejected). Both projects live in the same repo, and are coordinated with nginx to look like one single project from the end user pov. The issue I'm running into is that both projects seem to insist on their static folders being named static, which is creating routing issues in the nginx config. Right now the React urls are being routed to one proxy-pass port and Django urls to a different port, which is otherwise working fine.

What I'd like to do is either:

1. rename the PUBLIC_APP var in the React half so all the React static files can be differentiated by urls of say, /react-project/static. So far I've been unable to find a way to do this that consistently renames all static files and it seems to be an outstanding React bug.

2. set up nginx to route all /static/ routes to the Django proxy, and if not found there, then to the React proxy. I have very little nginx experience and can't seem to get the syntax to work. I want something like this:

  try_files $uri @django-project
  proxy_pass http://react-project:0000
}

@django-project {
  proxy_pass http://django-project:0000
}

Let me know if I didn't give enough info / code!

Answer 1

Ok I think I found a solution to this. By creating a .env text file at the root of the React project and adding a PUBLIC_URL there, then ALSO adding that same string as both the basename in React router and the homepage in package.json I seem to have forced all static files into a react-project/static folder. Before I was sometimes getting a duplicate react-project/react-project url but I was kind of flailing madly and I'm not sure how I did that.

Hopefully this is of help to someone else!