14

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.

ShutUpILoveYou
  • 436
  • 2
  • 5
  • 18

2 Answers2

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.

Erkka Mutanen
  • 639
  • 1
  • 10
  • 14
  • This answer has more thorough contemplation on this setting: [https://stackoverflow.com/questions/42686149/cant-build-create-react-app-project-with-custom-public-url] – Erkka Mutanen Jul 14 '20 at 12:31
  • 5
    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. – Aaron Aug 12 '21 at 17:24
  • 1
    so, just .env as the file name ? – blissweb Jan 02 '22 at 14:19
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)

Marko Kohtala
  • 744
  • 6
  • 16
  • 3
    In development (localhost), PUBLIC_URL is ignored, see https://create-react-app.dev/docs/advanced-configuration/. Also, it seem you are confusing PUBLIC_URL with homepage in `package.json`. – Ambroise Rabier Oct 21 '19 at 12:19
  • 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. – Marko Kohtala Oct 23 '19 at 18:13
  • 3
    @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. – tokland Jun 19 '20 at 07:49