15

How to set PUBLIC_URL in create-react-app?

I use cross-env so that I'm goona set PUBLIC_URL like below.

"start": "cross-env NODE_ENV=dev PUBLIC_URL=http://localhost:8080 react-app-rewired start --scripts-version react-scripts-ts"

And console.log(process.env) show me the right result about NODE_ENV, dev. But PUBLIC_URL is just ' ' that default value.

how can i set PUBLIC_URL? I need two PUBLIC_URL for development and production environment.

Improve this question
1

2 Answers 2

Reset to default
12

Here is my experience on this issue:

create-react-app or CRA system sets the

%PUBLIC_URL%

variable from .env file in the root of the application folder, next to file package.json. There is no need to use PUBLIC_URL in development configuration, in my experience the app runs just fine in development setting. Running

yarn build

on a CRA-initialized React application will set the PUBLIC_URL variable according to the .env file contents. What the .env file should contain then?

No need for brackets or braces, just

.env file contents:

PUBLIC_URL=https://yourdomain.whatever/subdirectory

for example, if your application is served from /public_html/subdirectory.

Additionally, CRA does not support the homepage keyword in its package.json file, so it can be removed and use .env file in the root instead.

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

5 Comments

This answer has more thorough contemplation on this setting: [stackoverflow.com/questions/42686149/…
The CRA documentation specifically states to set homepage in package.json in order to deploy on github pages ergo your statement in regard to the usage of the homepage keyword is incorrect.
so, just .env as the file name ?
yup, .env so its hidden. Why would you want to hide a config file that affects your whole project. There's also .env.development.local and .env.production.local
@OsamaBinLogin multiple reasons: junior engineers don't know about it if they don't see it, thus, they do not mess with it. Another things is that some foremen, bosses, seniors will start raging if they see absolutely every detail. That is why you have a private calendar, private notes - some people will fire you if they see the process that leads you to your results. They just want to see from A to Z, and will be pissed if they see the full alphabet. Which is why . files are hidden.
4

Start loads webpack.config in development configuration, which ignores PUBLIC_URL. It starts a development server that serves files at host root. If you need to change port for the development server, use PORT instead.

(Original answer fixed, see comments)

Improve this answer

3 Comments

In development (localhost), PUBLIC_URL is ignored, see create-react-app.dev/docs/advanced-configuration. Also, it seem you are confusing PUBLIC_URL with homepage in package.json.
Hi, @ambroise. Thanks for the comment. There indeed are some errors in my answer. PUBLIC_URL overrides homepage, but they are not treated equal. Homepage has only path used while PUBLIC_URL stays as it is with host, if it was present. Actual problem was perhaps that development server serves the app at root. The port from PUBLIC_URL is not used to change where the developmen server listens for connection.
@AmbroiseRabier: It seems now it's used also on DEV (documented in that doc page). I just tested and it works. It makes sense, it may be useful also in DEV.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.