Question 275422 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to build react app with its environment variables

I have a React application that utilizes environment variables. I need to build this React app along with its environment variables because I am unable to set these variables during runtime. The reason is that I am rendering the built React application using ReactDOM within an Angular application.

Inside the react package.json file, the scripts section looks like this:

"build": "env-cmd -f ./.env.development.js microbundle-crl --compress --format modern,cjs --jsxFragment React.Fragment"

Based on other solutions, I added react-error-overlay (versions 6.0.10 and 6.0.9) and react-scripts (versions 4.0.3, 4.0.1, and 5.0.0). I attempted the following configuration:

"overrides": {
    "react-error-overlay": "6.0.10"
},
"resolutions": {
    "react-error-overlay": "6.0.10"
}

None of the above solutions worked for me. However, when I hardcode the environment variables, it works as expected.

The environment file looks as follows:

const version = require('./package.json').version

module.exports = {
  AP_URL: 'http://localhost:10500'
}
Tags:

2

Answers


  1. 0

    Your env files should be dot text files, not javascript

    You can follow this example

    "build:dev": "env-cmd -f .env.development build",
"build:local": "env-cmd -f .env build",
"build:prod": "env-cmd -f .env.production build",

    .env.development

    REACT_APP_NAME='User dashboard'
REACT_APP_API_URL=https://test.com

    Example how to use your env variable in code

    object = {...anyProps, url: process.env.REACT_APP_API_URL};
    Login or Signup to reply.
  2. 0

    I’ve gotten this to work using only env-cmd on a minimal reproducible example:

    App.js

    import logo from "./logo.svg";
import "./App.css";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          {`${
            process.env.REACT_APP_ENVVAR || "Environment variable not defined"
          }`}
        </p>
        <p>
          {`${process.env.IGNORED_VAR || "Environment variable 2 not defined"}`}
        </p>
      </header>
    </div>
  );
}

export default App;

    environment.js

    module.exports = {
    REACT_APP_ENVVAR: "Environment variable set",
    IGNORED_VAR: "Environment variable 2 set"
}

    package.json

      "scripts": {
    "start": "env-cmd -f ./environment.js react-scripts start",
    "build": "env-cmd -f ./environment.js react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

    If you use these code samples on a basic create-react-app project you can see that the environment variable named IGNORED_VAR gets ignored in the build simply because it doesn’t start with REACT_APP. This is a safety measure to prevent injecting unrelated variables in builds as stated in the docs.

    It seems to me that the variable names in your environment file are not prepended by REACT_APP and, if I am not mistaken, your build script is missing the build command.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search