Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/garronej/vite-envs
⚙️ Env var in Vite at container startup
https://github.com/garronej/vite-envs
create-react-app docker environment-variables nginx react typescript
Last synced: about 1 month ago
JSON representation
⚙️ Env var in Vite at container startup
- Host: GitHub
- URL: https://github.com/garronej/vite-envs
- Owner: garronej
- License: mit
- Created: 2021-03-13T13:22:26.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-09-06T02:08:33.000Z (3 months ago)
- Last Synced: 2024-11-06T07:12:20.873Z (about 1 month ago)
- Topics: create-react-app, docker, environment-variables, nginx, react, typescript
- Language: TypeScript
- Homepage:
- Size: 570 KB
- Stars: 62
- Watchers: 4
- Forks: 9
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Bundle environment variables in Vite at build time startup time!
# Motivation
In Vite, `import.meta.env` variables are set at build time with `vite build`.
However we often want to enable the person deploying the app to define those values, we don't want to re build every time we need
to change a configuration.
`vite-envs` facilitates this by enabling to:
```bash
docker run --env FOO="xyz" my-org/my-vite-app
```
Then, access `FOO`:
- In the TypeScript code as `import.meta.env.FOO`
- In `index.html`, as `%FOO%`
This eliminates the need to rebuild each time you wish to change some configuration.
More importantly, it allows you to ship a customizable Docker image of your webapp!
# Features
- 🔧 Effortless setup: Integrates smoothly, works as your already used to, does not disrupt your Storybook.
- 😌 The `VITE_` prefix isn't required.
- 🛡️ Type-safe: Type definition for your `import.meta.env`. Hot reload enabled!
- 🌐 `index.html`: Use your envs in your HTML file. Example `%FOO%`
- 🧠 [Supports computation of env values at build time](https://github.com/garronej/vite-envs-starter/blob/b0febf2d8ffa67dceaf140372445e3cb8059c2e1/vite.config.ts#L14-L37).
- ⚙️ (Optional) enables to use EJS expressions in your `index.html`. `<%= import.meta.env.FOO.toUpperCase() =>`
- 🔒 Secure: Only injects environment variables explicitly defined in the `.env` file.
[You can also choose to declare your variables in another file like `.env.declaration` if `.env` is gitignored in your project.](https://github.com/garronej/vite-envs/assets/6702424/bc64605c-6aaf-427d-b8ce-b829dc63fc35)
# How it works
`vite-envs` is a Vite plugin.
When you build your app (`vite build`) it generate a `dist/vite-envs.sh` script.
When executed, this script updates the `dist/index.html` by injecting the environment variables
defined on the host running the script.
So, to make the dynamic injection of environment variables take place, you simply need to run the `vite-envs.sh` script
before starting your web server.
In practice, the diff that you would need to apply to your `Dockerfile` would look something like this:
`Dockerfile`
```diff
-CMD ["nginx", "-g", "daemon off;"]
+ENTRYPOINT sh -c "./vite-envs.sh && nginx -g 'daemon off;'"
```
# Types
Unrelated to the dynamic injection of environment variables, `vite-envs` also brings strict typing for `import.meta.env`.
[types-hot-reloading.webm](https://github.com/garronej/vite-envs/assets/6702424/78113d59-ac59-46b6-ada2-c325f475256c)
# Demo
# Documentation
👉[**vite-envs-starter**](https://github.com/garronej/vite-envs-starter)👈
# Usecase example
[Onyxia](https://github.com/InseeFrLab/onyxia) is a Vite app distributed as a [Docker image](https://hub.docker.com/r/inseefrlab/onyxia-web/tags).
Sysadmins that would like to deploy Onyxia on their infrastructure can simply use
[the official Docker image](https://hub.docker.com/r/inseefrlab/onyxia-web/tags) and provide relevant environnement variable to adjust the theme/branding of the website to their usecase as
documented [here](https://docs.onyxia.sh/admin-doc/theme).
Here are two deployment example:
