I'm working on an application using ASP.NET Core and React (create-react-app, specifically). This application will be hosted on multiple websites with different subdirectories (e.g., one site may host it at www.example.com/my-website and another will host it at www.example-2.com/my-other-website, so I need to be able to configure the base path for each website. I also want to create one build that will work on multiple sites with only configuration changes.
This doesn't work well with React. Create-react-app wants me to set the "homepage" in package.json at build time, which would mean creating separate builds for each site. And react-router requires me to set the basename property (e.g. <BrowserRouter basename='/my-website'>), which again requires me to specify the path.
Normally in ASP.NET I'd use something like <base href="~/" /> to make the base path available to the client, but that doesn't work if the page is being rendered by React.
The common solution I've seen online is to set the PUBLIC_URL environment variable, which can be configured differently for each website, using the dotenv package to set it from a file. But I've tried that and it doesn't work for some reason (no error messages, but console.log(process.env.PUBLIC_URL); doesn't print anything).
How do I set the base path in React when it's running from ASP.NET, and in a way that can be deployed to different URLs without creating a new build each time?