question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom Environment Variable Prefix (Instead if `REACT_APP_`)

See original GitHub issue

At my company, we have standard environment variable naming conventions. create-react-apps hard-coded default - REACT_APP_ does not adhere to these. It would be nice to be able to configure these by either:

  1. Supplying config in package.json or
  2. Passing a flag to the react-scripts command
  3. Setting another environment variable? (perhaps too meta)

(1) and (2) would also allow running multiple create-react-app projects with global environment variables as well (as opposed to using the .env files)

Are others running into this?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:10
  • Comments:24 (9 by maintainers)

github_iconTop GitHub Comments

4reactions
heyimalexcommented, Jul 27, 2017

It’s not too bad to do without ejecting.

const spawnSync = require("child_process").spawnSync;

const MY_PREFIX = /^MY_PREFIX_/i;

const transformedEnv = Object.keys(process.env)
  .filter(key => MY_PREFIX.test(key))
  .reduce((env, key) => {
    const craKey = key.replace(MY_PREFIX, "REACT_APP_");
    env[craKey] = process.env[key];
    return env;
  }, {});

spawnSync("npm", ["run", "build"], {
  shell: true,
  stdio: [0, 1, 2],
  env: transformedEnv
});
2reactions
miraagecommented, Aug 29, 2017

I think it would be nice to have something like array appEnvVars in package.json. Only these variables along with NODE_ENV and PUBLIC_URL will be passed to the application.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why Do We Need REACT_APP Prefix in .env File for React ...
As mentioned in the docs, a React app will include the environment variables in the source code when you build the application.
Read more >
Adding Custom Environment Variables | Create React App
Your project can consume variables declared in your environment as if they were declared locally in your JS files.
Read more >
Using environment variables in a React application
In this article we'll see how to use environment variables in a React application. Specifically, we'll look at two kinds of environments variables:....
Read more >
React environment variables: A developer's guide - Architect.io
A hands-on guide for managing environment variables in your React app, including best practices and common mistakes.
Read more >
Managing Environment Variables in React (create-react-app)
For all custom environment variables in apps created via create-react-app , we need to use REACT_APP_ prefix in env var names - it's...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found