Configuring Browser Apps

I've found myself in he unexpected situation of having to write a lot of browser apps/single page apps this year. I have some thoughts on configuration.

Why Bother

What Gets Configured

Yes:

No:

Delivering Configuration

There are a few ways to get configuration into the app.

Globals

<head>
    <script>window.appConfig = {
        "FOO_URL": "https://foo.example.com/",
        "FOO_TOKEN": "my-super-secret-token"
    };</script>
    <script src="/your/app.js"></script>
</head>
<head>
    <link rel="foo-url" href="https://foo.example.com/">
    <script src="/your/app.js" data-foo-token="my-super-secret-token"></script>
</head>

Config API Endpoint

fetch('/config') /* {"FOO_URL": …, "FOO_TOKEN": …} */
    .then(response => response.json())
    .then(json => someConfigurableService);

Cookies

See for example clientconfig:

var config = require('clientconfig');