setting environment variables to modify package.json for create-react-app

Question

I discovered today the use of environment variables in React, and I love it ! Especially using react-router, and filling up the basename attribute of the <BrowserRouter> component this way :

<BrowserRouter basename={`${process.env.REACT_APP_BASENAME}`}>
</BrowserRouter>

It's great, but I would like to use the variable REACT_APP_BASENAME also in package.json file, because as you know, the "homepage" line in package.json define the PUBLIC_URL variable used in index.html as %PUBLIC_URL%, and I would like this PUBLIC_URL to be equal to my REACT_APP_BASENAME variable. I think I would need something like that :

package.json :

{
  "name": "apoc",
  "version": "0.1.0",
  "private": true,
  "homepage": "%REACT_APP_BASENAME%",
  "dependencies": {....

Is it possible ?

arnaudambro · Accepted Answer · 2018-04-10 09:29:03Z

2

By going through some files in node-modules/react-scripts/config, I discovered in the webpack.config files that PUBLIC_URL is provided to the app as %PUBLIC_URL% in HTML files and process.env.PUBLIC_URL in JavaScript.

As the target was to be able to use the same variable also in JavaScript, there is actually no need to repeat the same path in any .env file : just set once the path in package.json at "homepage" line and you're good to use PUBLIC_URL wherever you want, HTML or JS.

answered Apr 10, 2018 at 9:29

arnaudambro

2,7233 gold badges33 silver badges59 bronze badges

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

Comments

jonhid · Accepted Answer · 2018-04-10 09:37:24Z

-1

You can use an environment variable in your package.json like this.

Cross platform

{
  "name": "apoc",
  "version": "0.1.0",
  "private": true,
  "homepage": "cross-var echo ${REACT_APP_BASENAME}",
  "dependencies": {....

edited Apr 10, 2018 at 9:37

answered Apr 8, 2018 at 9:56

jonhid

2,1451 gold badge14 silver badges18 bronze badges

12 Comments

arnaudambro Over a year ago

Seems to work, although my terminal is telling me The project was built assuming it is hosted at cross-var%20echo%20$%7BREACT_APP_BASENAME%7D/. What do you think ?

jonhid Over a year ago

Are you on windows?

arnaudambro Over a year ago

Actually, something I didn't get is that the homepage parameter in the package.json is the parameter modifying the %PUBLIC_URL% in index.html, is that right ? Meaning that if I there is no %PUBLIC_URL% in index.html anymore, the homepage parameter is useless, isn't it ?

jonhid Over a year ago

On unix systems you can just use "homepage": "echo ${REACT_APP_BASENAME}",

arnaudambro Over a year ago

The point is that if index.html is in a subdirectory and if I need the subdirectory path in index.html and in other files (such as some React components), the homepage parameter alone is not working because it's only replacing %PUBLIC_URL% in index.html, therefore I need to implement env variables for the other files. Then comes the question : in order to keep along with the DRY principle, how do you change the homepage parameter with an env variable defined in a .env.production file ?

|

Collectives™ on Stack Overflow

setting environment variables to modify package.json for create-react-app

2 Answers 2

Comments

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related