'How to change PublicPath for Create React App in Dev Environment

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?

Solution 1:^[1]

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.

Solution 2:^[2]

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

Solution 3:^[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

Solution 4:^[4]

In your package.json add a homepage key. This will force all the files to be build with the prefix there defined.

// package.json
{
   "name": "my-project",
   "homepage": "/my-path",
   // ....
}

output:

/my-path/assets/my-asset.png

Solution 5:^[5]

There are two methods depends on your needs

add PUBLIC_URL in .env.development file
```
PUBLIC_URL=http://localhost:3000
```

add homepage attribute in package.json

// package.json
{
   "name": "my-project",
   "homepage": "/my-path",
   // ....
}

Reference from source

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Filipe Borges
Solution 2	Simranjit Singh
Solution 3	Vu Luu
Solution 4
Solution 5	GreatJx

'How to change PublicPath for Create React App in Dev Environment

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]