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

The boiler plate use express, you can expose server env variable to the client using express' local.

var serverVariable = 'this is a server variable'
app.get('/somelink', function (req, res, next) {
    res.locals.data = {
      FluxStore: { serverlocal: serverVariable  }
   }
   next()
})

You then pass the local either through React.renderToString which will be pick by FluxStore on the client. The other method, you can use data fetching api like falcor which can be pick by client side Action Store through falcor-http-datasource, you don't need express local for falcor you build it with falcor-express and falcor-router