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
– Simranjit Singh

2018-02-08 00:38:44 +00:00
Commented Feb 8, 2018 at 0:38 — Simranjit Singh
– Simranjit Singh, Commented Feb 8, 2018 at 0:38

Filipe Borges · Accepted Answer · 2019-02-07 16:02:53Z

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 7, 2019 at 16:02

Filipe Borges

2,80323 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Viktor Eriksson Over a year ago

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 Over a year ago

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..

Simranjit Singh · Accepted Answer · 2018-02-08 03:42:26Z

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 8, 2018 at 3:42

Simranjit Singh

5921 gold badge4 silver badges13 bronze badges

1 Comment

Menachem Hornbacher Over a year ago

Seems like it got moved to the 2.1.x milestone and has been in limbo for the past month: github.com/facebook/create-react-app/pull/6280

Robert-Jan Kuyper · Accepted Answer · 2022-03-11 15:27:16Z

3

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, 2022 at 15:27

answered Nov 10, 2021 at 13:00

Robert-Jan Kuyper

3,4861 gold badge17 silver badges29 bronze badges

Comments

Vu Luu · Accepted Answer · 2021-01-27 03:03:57Z

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, 2021 at 3:03

Vu Luu

8005 silver badges16 bronze badges

Comments

GreatJx · Accepted Answer · 2022-04-22 18:35:46Z

2

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

answered Apr 22, 2022 at 18:35

GreatJx

514 bronze badges

Comments

Simranjit Singh · Accepted Answer · 2018-05-09 03:30:46Z

-3

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

answered May 9, 2018 at 3:30

Simranjit Singh

5921 gold badge4 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to change PublicPath for Create React App in Dev Environment

6 Answers 6

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related