Some comments for everyone

[rit001]

While the writer of this code has decided to focus on other things I think many people are still ending up at this repo as the writer did do a very good job at trying to provide a valid solution for what seems to be an ongoing limitation of JS. At the same time what they have provided is suffering from the wide range of environments that js gets deployed into. The result is the following

• While much of the code is provided to allow easy creation of the downloadable env.js file, it may not be possible to use the cli tool provided as many container-based deployments are just the resulting static output from a yarn build rather than a full js environment and so the cli tool can not be run.

• It is possible that js that depends on the contents of the env.js file can be loaded before other js files within a browser environment as the build defaults may not provide any ordering for the js files listed in index.html.

Below are a few things I have done to make use of this project as the base of my configuration. It is not perfect, but as a work in progress, it may help others. The target is react-based js running within browsers from a basic Linux docker container that does nothing more than serve files.

• Creating the env.js file. As all my environment variables are defined by my docker command all I need to do is scan the variables at startup and place them into the env.js file. To do this I use the following bash script

echo "window.env={"
env | grep "REACT_APP_" | while IFS= read -r line; do
value=${line#=}
name=${line%%=}
echo " $name: '$value',"
done
echo " PUBLIC_URL: '${PUBLIC_URL}'"
echo "}"

This is executed by setting the following startup command on the container at build time

CMD ["sh", "-c", "chmod 755 ./create_varable_export.sh && ./create_varable_export.sh > /usr/share/nginx/html/env.js && nginx -g 'daemon off;'"]

The output looks like the following

window.env={
REACT_APP_STRIPE_SANDBOX_TOKEN: '',
REACT_APP_STRIPE_PUBLIC_KEY: 'pk_test_somevalue,
REACT_APP_RESERVATION_ENABLED: 'false',
REACT_APP_MAPBOX_KEY: 'pk.somevalue',
PUBLIC_URL: 'https://www.test.com'
}

Note, one key change is that these values are just loaded into window.env as window already exists and is scoped across the whole application.

• The next major change comes from how js files are by default added to the index.html file when yarn is used. You can expect to see lines like this added to your index.html

</script><script src="[/static/js/2.73c52bdf.chunk.js](https://www.test.com/static/js/2.73c52bdf.chunk.js)"></script>

<script src="[/static/js/main.ea9200cf.chunk.js](https://www.test.com/static/js/main.ea9200cf.chunk.js)"></script>

The problem is that this causes the scripts to be downloaded and executed immediately, which means they can be loaded before the values in env.js are loaded into window.env. To get around this I modified the index.html file after yarn had finished to include 'defer' so that the lines look like

</script><script src="/static/js/2.73c52bdf.chunk.js" defer </script>

<script src="[/static/js/main.ea9200cf.chunk.js](https://www.test.com/static/js/main.ea9200cf.chunk.js)" defer></script>

The result is that the script is executed after the page has finished parsing. This change was done with the following shell cmd

RUN sed -i 's^chunk.js"^chunk.js" defer^g' /usr/src/app/build/index.html

If you are a webpack user there seems to be a plugin for v4.x that can be used to do this.

The end result is that all the values placed in the env.js file are now available to the js code via window.env so I can directly use values such as window.env.PUBLIC_URL

[sorry the formatting is so bad, but I've never tried posting code before and I do not know of a way to stop a link being shown in the last sample of html]