Motivation

Create-react-app supports environment variable but they are bundled at build time when yarn build is run.

If we want to change anything like the URL of the backend the app should connect to, we have to rebuild, we can't ship customizable Docker image of our CRA apps.

The solution would be to be able to do:

 docker run --env FOO="xyz" my-org/my-create-react-app

Then access FOO:

• In the code like process.env["FOO"]
• In public/index.html like <title>%FOO%</title>

cra-envs does just that, in a secure, performant and type safe way.

Features

• ✅ No impact on the startup time.
• ✅ No impact on the Docker image size.
• ✅ Require no network connection at container startups.
• ✅ Secure: It only injects the envs declared in the .env file.
• ✅ It works like you are already used to. It just changes when the envs
• ✅ EJS support in public/index.html (few peoples knows). This enables for example to conditionally preload one font or another
• ✅ (Optional) Type safe: An env getter is generated so you know what envs are available are injected.

Usecase example

Onyxia-web is a create-react-app distributed as a Docker image.

Sysadmins that would like to deploy Onyxia on their infrastructure can simply use
the official Docker image and provide relevant environnement variable to adust the theme/branding of the website to their usecase.

Here are two deployment example:

_{^{Click on the social media preview to access the websites}}

Documentation

This is the link to the repo: https://github.com/garronej/cra-envs

Find 👉here👈 a demo setup of:

cra-envs + create-react-app + TypeScript + Nginx + Docker