How to change PublicPath for Create React App in Dev Environment

Question

I am using Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0-rc1-final which internally uses Create-react-app and AspnetCore.ReactDevelopmentServer

My Dev. Environment is using IIS for hosting multiple api's say api1 as http://localhost/api1 and api2 as http://localhost/api2

Problem is if I host my React app from Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0-rc1-final template to http://localhost/myApp - it expects the files are always served with PublicPath "/" and hence does not work.

I know Create-react-app's Prod setup uses PublicPath from PUBLIC_URL or Homepage from package.json.

Is it possible to modify create-react-app setup to use a custom publicpath in Dev. environment?

Answer 1

After doing some more googling and searching old issues on github, I have realized that this feature is due for release in react-scripts 2.0 which should include https://github.com/facebook/create-react-app/pull/1887. This will allow subpaths to be included in url from where the files are being served in create-react-app

Answer 2

You can set PUBLIC_URL in .env.local on your local machine.

Be careful to not have this file/variable set when building for release. You can read more about .env files on cra documenatation.

Answer 3

After I enject the project, I saw these lines:

// We use `PUBLIC_URL` environment variable or "homepage" field to infer
// "public path" at which the app is served.

So, please update PUBLIC_URL in the environment file

Answer 4

Using "proxy" in package.json will allow create react app to talk to server side in dev environment. I am using VSCode to run the app and because of proxy value - my app is talking to my IIS hosted services.

See this: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development