1

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
user8779054
  • 143
  • 4
  • 13
  • is appdynamics_config.js a part of your react app source code? If not then include it in your app.js file. – Manish Jangir Jul 28 '21 at 10:02
  • We added >> In Would that be sufficient? – user8779054 Jul 28 '21 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 Jul 28 '21 at 10:11
  • Updated my codes but now it has issues with Uncaught SyntaxError: Unexpected token '< Was trying to reference from this as well https://stackoverflow.com/questions/48434897/how-to-have-a-external-json-config-file-in-react-jsx – user8779054 Jul 28 '21 at 13:57

1 Answers1

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
user8779054
  • 143
  • 4
  • 13