Pass an argument in some react-scripts scenario

Question

I have a standard react app with the canonical package.json entry

"scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     ...
}

I found that to pass an argument to react-scripts scenario I have simply to prepend it with

 "scripts": {
    "start": "REACT_APP_LOG_URL=http://example.com react-scripts start",
    ...
}

And then in index.js file I can get this argument with

const logUrl = process.env.REACT_APP_LOG_URL;

console.log(`Logging to ${logUrl}`);

But I get an error

'REACT_APP_LOG_URL' is not recognized as an internal or external command,
operable program or batch file.

Where am I wrong?

geometer · Accepted Answer · 2023-11-03 16:57:09Z

React-dotenv package can solve the problem. https://github.com/jeserodz/react-dotenv/blob/main/README.md

npm install react-dotenv

Add an .env file to your project root with entry:

REACT_APP_LOG_URL=http://example.com

Add the react-dotenv NPM command to your start command in package.json.

"scripts": {
    "start": "react-dotenv && react-scripts start"
 ...
}

Other scenarios shouldn't be changed.

"scripts": {
    "build": "react-scripts build"
 ...
}

so we can differentiate this 2 cases (in second case our variable will be undefined)

Add the react-dotenv.whitelist property to package.json to specify which variables you need exposed.

  "react-dotenv": {
    "whitelist": ["REACT_APP_LOG_URL"]
  }

Then you can get this value with env variable:

import env from "react-dotenv";
const logUrl = env.REACT_APP_LOG_URL;

then somewhere inside a component:

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Today is {getDate()}
        </p>
        <p>
          Logging to {logUrl}
        </p>
   ...
      </header>
   </div>)

Collectives™ on Stack Overflow

Pass an argument in some react-scripts scenario

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related