Load client-side configuration from a remote server with an XMLHttpRequest
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
test
.babelrc
.eslintrc.yml
.gitignore
README.md
index.js
package.json

README.md

xhr-env-provider

Load client-side configuration from a remote server with an XMLHttpRequest.

Note

This npm module is un-released as I could not settle on the merit/usefulness of loading environment config in this way. The asynchronous request makes it awkward to use this library as it introduces async behavior and promises in inconvenient places.

// Sometimes it works out really nicely....
envProvider.value("API_URL")
  .then(apiUrl => fetch(`${apiUrl}/accounts`))
  .then(accounts => /* Do something with the accounts list */);


// But other times it doesn't.

// It could look like this with more traditional config approach...
const MyReactDate = (date) => (
  <div>{myDateFormatter.format(date, config.DATE_FORMAT)}</div>
);

// but this is how it would look with this package. :( Way too verbose
class MyReactDate extends React.Component {
  componentDidMount() {
    this.dateFormat = "";
    envProvider.value("DATE_FORMAT").then(dateFormat => this.dateFormat = dateFormat);
  }

  render() {
    return <div>{myDateFormatter.format(date, this.dateFormat)}</div>
  }
};

I think I need to see more use cases and use this pattern a bit more to fully understand it. Until then, I won't plan on putting any more work into releasing this library.

Setup

This library assumes that it will be able to fetch your application's JavaScript environment variables from the headers of an HTTP response. Once it has fetched them, it caches them in memory. You can define what HTTP header to use.

It's up to you to configure some server with the appropriate header value. The header must contain a JSON-encoded string containing all of the environment config values.

Here is a simple example using Express middleware:

const app = express();

app.use(function (req, res, next) {
  response.set('JS-ENV', process.env.JS_ENV); // process.env.JS_ENV='{"MY_VAR": "some value", "OTHER_CONFIG": "stuff"}'
  next();
});

Usage

import EnvProvider from "xhr-env-provider";

const envProvider = new EnvProvider("http://my-config-provider.com", "JS-ENV");

envProvider.value("API_URL")
  .then(apiUrl => fetch(`${apiUrl}/accounts`))
  .then(accounts => /* Do something with the accounts list */);