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?

I dont want to do eject and also not use CORS – Simranjit Singh Feb 08 '18 at 00:38 — Simranjit Singh, Feb 08 '18 at 00:38

score 7 · Answer 1 · answered Feb 07 '19 at 16:02

7

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.

answered Feb 07 '19 at 16:02

Filipe Borges

2,712
20
32

I thought only variables that started with REACT_APP_... was allowed in .env-files, PUBLIC_URL ends upp as "" (empty string) if I put it there – Viktor Eriksson Aug 29 '19 at 08:05
I was wrong about variables having to start with REACT_APP, from create-react-app.dev: Apart from a few built-in variables (NODE_ENV and PUBLIC_URL), variable names must start with REACT_APP_ to work. But I'm still getting empty string though.. – Viktor Eriksson Aug 29 '19 at 19:15

score 5 · Answer 2 · answered Feb 08 '18 at 03:42

5

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

answered Feb 08 '18 at 03:42

Simranjit Singh

592
1
4
13

Seems like it got moved to the 2.1.x milestone and has been in limbo for the past month: https://github.com/facebook/create-react-app/pull/6280 – Menachem Hornbacher Mar 06 '19 at 20:50

score 2 · Answer 3 · answered Jan 27 '21 at 03:03

2

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

answered Jan 27 '21 at 03:03

Vu Luu

792
5
16

Robert-Jan Kuyper · Answer 4 · 2022-03-11T15:27:16.713

2

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

edited Mar 11 '22 at 15:27

answered Nov 10 '21 at 13:00

Robert-Jan Kuyper

2,418
12
22

score 2 · Answer 5 · answered Apr 22 '22 at 18:35

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

score -3 · Accepted Answer · answered May 09 '18 at 03:30

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

How to change PublicPath for Create React App in Dev Environment

6 Answers6