Unable to get env variables in public/index.html for react app

Question

Trying to get env values from public/index.html file

Tried with window.APPDYNAMICS_KEY from config.js

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <script src="src/config.js"></script>
    <script charset='UTF-8'>
      if(window.APPDYNAMICS_KEY){
....

src/config.js

export default {
  STAGE: process.env.NODE_ENV || 'development',
  ...
  APPDYNAMICS_KEY: process.env.REACT_APP_APPDYNAMICS_KEY,
};

.env

...
REACT_APP_APPDYNAMICS_KEY=SAMPLE-KEY HERE
HTTPS=true

is appdynamics_config.js a part of your react app source code? If not then include it in your app.js file. — Manish Jangir
– Manish Jangir, Commented Jul 28, 2021 at 10:02
We added >> In <script src="/appdynamics_config.js"></script> Would that be sufficient? — user8779054
– user8779054, Commented Jul 28, 2021 at 10:06
No because create react app magically replaces all process.env instances to window but the condition is your file must be part of CRA's build process. — Manish Jangir
– Manish Jangir, Commented Jul 28, 2021 at 10:11
Updated my codes but now it has issues with Uncaught SyntaxError: Unexpected token '< Was trying to reference from this as well stackoverflow.com/questions/48434897/… — user8779054
– user8779054, Commented Jul 28, 2021 at 13:57

user8779054 · Accepted Answer · 2021-07-30 09:07:55Z

1

Turns out i didn't have to import any script.

Just use the following '%REACT_APP_APPDYNAMICS_KEY%' in my index.html

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <script charset='UTF-8'>
      if('%REACT_APP_APPDYNAMICS_KEY%'){
....

.env

...
REACT_APP_APPDYNAMICS_KEY=SAMPLE-KEY HERE
HTTPS=true

answered Jul 30, 2021 at 9:07

user8779054

3036 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

Unable to get env variables in public/index.html for react app

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related