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
Top comments (0)