12-factor dotenv support for SSR web apps

- Use environment variables to configure server and client-side code in one central place
- Supports an .env file if existing
- Isometric access to environment variables in browser and server-side code
- Customize which variables the server shares with the client to hide secret tokens
- Don't recompile when environment configuration changes to make your app conform to the
twelve-factor model which requires that configuration and build are
separated
- Debug different configurations without potentially introducing new bugs in the build process
- Supports TypeScript
- Optional support for Express.js and React SSR

Installation

``bash
npm install --save @sozialhelden/twelve-factor-dotenv
#or
yarn add @sozialhelden/twelve-factor-dotenv
`

Usage

$3

`typescript
const { loadGlobalEnvironment } = require('@sozialhelden/twelve-factor-dotenv');
const env = loadGlobalEnvironment();
module.exports = env;
`

$3

`typescript
const env = require('./env');

// more application code here
`

$3

Now you have a working environment configuration on the server—code (e.g. with env.CONFIG_VALUE).

What's missing is that browser-executed code needs access to the variables too. Here are two ways to
achieve this:

#### Method 1: Static HTML with a JavaScript served from an extra endpoint

You can request a JavaScript file from your server (e.g. via Express.js) that adds the configuration
as global variable to window.

Advantages:

- You can change the configuration without clients having to reload the whole app code
- Environment variable values never appear in rendered or cached HTML or JS app code, they 'live'
externally

Disadvantages:

- If you cache the configuration, it can get out of sync with the app code. If you don't cache it,
it can cause a slower page load.
- The browser must load the script synchronously before any other code runs.

Server side (using Express.js):

`typescript
const env = require('../lib/env');
const { createBrowserEnvironmentJSResponseHandler } = require('@sozialhelden/twelve-factor-dotenv');

const server = express();

// Provides access to a filtered set of environment variables on the client.
// Read https://github.com/sozialhelden/twelve-factor-dotenv for more infos.
server.get('/clientEnv.js', createBrowserEnvironmentJSResponseHandler(env));
`

If you don't use Express.js, you can provide your own response handler:

`typescript
const { getFilteredClientEnvironment } = require('@sozialhelden/twelve-factor-dotenv');

// Provides access to a filtered set of environment variables on the client.
// Read https://github.com/sozialhelden/twelve-factor-dotenv for more infos.
app.route('/clientEnv.js', (req, res) => {
const filteredEnvObject = JSON.stringify(getFilteredClientEnvironment(env, filterFunction));
res.setHeader('Cache-Control', 'max-age=300');
res.send(window.env = ${filteredEnvObject};);
});
`

Client side:

`html





`

#### Method 2: Server-side rendering your environment variables into your HTML with React.js

To load the environment in the browser, you can also render the