1

I know there are lots of answers to this. My purpose is to have a js file that I can use terraform to inject into a docker image so I can easily change the client logo during deployment and have a single docker image for my react ui. I have tried the solutions in the following answers:

how-can-i-pass-a-variable-from-outside-to-a-react-app

how-to-include-external-javascript-in-react

external-javascript-is-not-working-in-react-js

react-accessing-a-var-from-a-script-in-a-component

The simplest method seems to be to import a script in head in index.html, with the var declared therein. I have the following in my index.html and env.js is in the static folder where other js files (plotly) are loaded successfully.

    ...
    <script src="http://localhost:3000/env.js"></script>
  </head>

I have the following in env.js

window.logo_file = '/images/demo.jpg';

Then in my React component I have:

        <div className={'clientsLogo'}>
          <img
            src={window.logo_file}
            alt={'client-logo'}
            height={61}
            style={{ verticalAlign: 'bottom' }}
          />
        </div>

I also tried adding export default logo_file using logo_file = '/images/demo.jpg'; in env.js.

I tried assigning the window.logo_file to a const prior to using it.

But the imported script does not have it's variable added to the global window object and it escapes me why not.

Olddave
  • 397
  • 1
  • 2
  • 12
  • It has nothing to do with "loading a var from window", that not how you import images with webpack, `/images/demo.jpg` its not the actual image location. – Dennis Vash Feb 04 '20 at 13:40
  • 1
    The first method of `window.logo_file = '/images/demo.jpg'` should work. It could be a cache issue where `/env.js` has old data in it, or you are loading your react app before you import ``. Try adding the script tag to the top of the `head`. – braza Feb 04 '20 at 13:42
  • As stated I want a single docker image, not one per client with different image names in them. Thus I need to load the location of the image file per client from an external source, after npm has built the React App. – Olddave Feb 04 '20 at 13:43
  • So just load the image via http – Roberto Zvjerković Feb 04 '20 at 13:46
  • Loading the env.js script at the top of the section did populate the window.logo_file var. But for some reason it now fails to load the following scripts declared in the section – Olddave Feb 04 '20 at 13:47
  • Looks like that was the issue then. What's in your `env.js` file? Is there some invalid javascript causing the app to crash? – braza Feb 04 '20 at 13:50
  • Content is as stated above ```window.logo_file = '/images/demo.jpg';``` – Olddave Feb 04 '20 at 13:51
  • I think this is what you are looking for https://www.freecodecamp.org/news/how-to-implement-runtime-environment-variables-with-create-react-app-docker-and-nginx-7f9d42a91d70/, basically at the docker run time you need to pass the env and that should change it instead of building every time – Learner Feb 04 '20 at 13:54
  • https://stackoverflow.com/users/6159441/dileep-thomas That is a lot of work to do something simple. The guy doing the terraform has already coded for env.js to reside as a reference in a S3 bucket per client and injected into the image. So will need to stick with that approach. I just need to work out why env.js stops later js files loading? – Olddave Feb 04 '20 at 14:17

1 Answers1

0

The answer is that the env.js, i.e. the file with your window global variable declared, has to go at the top of the head section of your index.html file to be loaded before the react app is loaded.

Olddave
  • 397
  • 1
  • 2
  • 12