embed-react-app-envs

Safely bundle server's environment variable into react apps

Motivation

Create react app provides no official way to inject environment variable from the server into the page.
When you run yarn build create react app does bundle all the variables prefixed by REACT_APP_ and expose them under process.env (see here).
The problem, however, is that you likely don't want to build your app on the server.
The CRA team also suggests to introduce placeholders in the public/index.html and do the substitution on the server before serving the app. This solution involves a lot of hard to maintain scripting.

This module abstract away the burden of managing environment variable injection as well as providing a type-safe way to retrieve them in your code.

Step by step guide

Start by installing the tool:

yarn add embed-react-app-envs 

Then declare all the allowed environment variables into the .env file of your project

Example

REACT_APP_FOO="Default value of foo"
REACT_APP_BAR=
REACT_APP_BAZ=
REACT_APP_FIZZ=

Once it's done run the script npx generate-typed-env-getter ( Use npx generate-typed-env-getter js if you your project don't use TypeScript)

It will generate src/env.ts ( or src/env.js) looking like:

/* 
 * Automatically generated by embed-react-app-envs.
 * If you wish to declare a new environment variable add it in the .env file
 * then run 'npx generate-typed-env-getter'. This file will be updated.
 */
import { getEnvVarName } from "embed-react-app-envs";

export function getEnv() {
    return {
        "FOO": getEnvVarName("FOO"),
        "BAR": getEnvVarName("BAR"),
        "BAZ": getEnvVarName("BAZ"),
        "FIZZ": getEnvVarName("FIZZ")
    } as const;
}

Now let's test it by creating a .env.local file like:

REACT_APP_BAR="Value of bar defined in .env.local"

And let's do this somewhere in our code:

import { getEnv } from "./path/to/env.ts"

console.log(getEnv());

Now if we run REACT_APP_BAZ="Value of baz passed inline" yarn start we get this in the console:

{
    "FOO": "Default value of foo",
    "BAR": "Value of bar defined in .env.local",
    "BAZ": "Value of baz passed inline",
    "FIZZ": ""
}

Now if you run yarn build then REACT_APP_BAZ="Value of baz on the server" npx embed-environnement-variables the value of REACT_APP_BAZ will be injected in build/index.html so that if you start statically serving the build/ dir, for example with npx serve you will get this in the console:

{
    "FOO": "Default value of foo",
    "BAR": "Value of baz on the server",
    "BAZ": "",
    "FIZZ": ""
}

Setup

package.json

"scripts": {
    "postinstall": "generate-typed-env-getter",
    "prestart": "generate-typed-env-getter",
    "pretest": "generate-typed-env-getter"
}

NOTE: Those scripts are optional, as long as you remember to rerun npx generate-typed-env-getter each time you update .env you are good.

.gitignore

/src/env.ts

Dockerfile

# build environment
ENTRYPOINT sh -c "npx embed-environment-variables && mv build /usr/share/nginx/html && nginx -g 'daemon off;'"

See complete Dockerfile example. TODO: Link example