Live Environment Vars in Isomorphic React

Question

I've built an isomorphic React app based loosely on the starter kit in this repo. It uses webpack to build the production code.

Thing is, I need to expose the value of a few environment variables on the server to the client code in the browser without rebuilding the production code. I want to be able to change the value of the env vars, and have it the effect the client on next page refresh, without having to rebuild anything. And I don't want to complicate testing in order to do it.

I've found a few solutions, none of which are great:

1. Use the DefinePlugin for webpack to hard-code the value of certain environment variables into the production code. Similar to what's outlined here
2. Build an API just to pull the env variables into the client.
3. Write a special .js file that is outside the webpack system. This file would be templated so that it's modified before it's served to the client. Probably requiring that the env variable values are stored in special global variables on 'window' or something.

Problems with these approaches:

1. REJECTED. This just doesn't do what I want. If I change the value of the env variable, I need to rebuild the code.
2. Unnecessarily complicated. I wouldn't need this API for anything else. A whole API just to serve 2 or 3 values that rarely change? Complexity would be needed to ensure the values were pulled from the API ASAP on load.
3. Closest yet, but kinda gross. I don't really want to go outside the webpack/React/Flux system if I can avoid it. Creating special global variables on the window object would work, but would introduce complexity for testing components/stores/actions that use those global variables.

I've done both 2 and 3 in the past and never was really intellectually satisfied by those solutions.

Any suggestions? Seems like this should be a common/solved problem. Maybe I'm just overthinking it and 3 is the way to go.

Answer 1

So the solution that I came up with is fairly simple. I just write a one-liner of javascript to save the value to local storage inside a script tag. Then read that local storage from my flux store when the app starts.

This is the relevant tag added to the index.html:

<script type="text/javascript"><%= config %></script>

This is the string that I splice into index.html using templating, before serving it:

let configJs = 'localStorage.setItem(\'ADMIN_API\', JSON.stringify(\'' + process.env.ADMIN_API + '/v3/' + '\'));';
const html = template({config: configJs});
res.status(200).send(html);

Then I read it with this, once the app starts:

import ls from 'local-storage';
....
let api = ls.get('ADMIN_API');