{"id":14483628,"url":"https://github.com/garronej/vite-envs","last_synced_at":"2026-03-05T01:01:11.118Z","repository":{"id":48521071,"uuid":"347376659","full_name":"garronej/vite-envs","owner":"garronej","description":"⚙️  Env var in Vite at container startup","archived":false,"fork":false,"pushed_at":"2025-07-03T15:55:54.000Z","size":520,"stargazers_count":77,"open_issues_count":5,"forks_count":11,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-11-27T12:08:58.583Z","etag":null,"topics":["create-react-app","docker","environment-variables","nginx","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/garronej.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-13T13:22:26.000Z","updated_at":"2025-11-04T19:37:08.000Z","dependencies_parsed_at":"2023-10-17T05:01:24.834Z","dependency_job_id":"686897f8-7799-4795-954b-43d69e235c1c","html_url":"https://github.com/garronej/vite-envs","commit_stats":{"total_commits":333,"total_committers":7,"mean_commits":47.57142857142857,"dds":0.09909909909909909,"last_synced_commit":"1ddff51807564f75e19e316341ea2f014f49b07c"},"previous_names":["garronej/embed-react-app-envs","garronej/react-envs","garronej/cra-envs","garronej/vite-envs","etalab/cra-envs"],"tags_count":107,"template":false,"template_full_name":"garronej/ts-ci","purl":"pkg:github/garronej/vite-envs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garronej%2Fvite-envs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garronej%2Fvite-envs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garronej%2Fvite-envs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garronej%2Fvite-envs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/garronej","download_url":"https://codeload.github.com/garronej/vite-envs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garronej%2Fvite-envs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30104218,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T00:38:46.881Z","status":"ssl_error","status_checked_at":"2026-03-05T00:38:45.829Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["create-react-app","docker","environment-variables","nginx","react","typescript"],"created_at":"2024-09-03T00:01:55.358Z","updated_at":"2026-03-05T01:01:10.772Z","avatar_url":"https://github.com/garronej.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://github.com/garronej/vite-envs/assets/6702424/0f290fd7-19ea-41e6-97fb-da3fcc79d848\"\u003e  \n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n    \u003ci\u003eBundle environment variables in Vite at \u003cstrike\u003ebuild time\u003c/strike\u003e \u003cb\u003e startup time\u003c/b\u003e!\u003c/i\u003e\n    \u003cbr\u003e\n    \u003cbr\u003e\n    \u003ca href=\"https://github.com/garronej/vite-envs/actions\"\u003e\n      \u003cimg src=\"https://github.com/garronej/vite-envs/actions/workflows/ci.yaml/badge.svg?branch=main\"\u003e\n    \u003c/a\u003e\n     \u003ca href=\"https://www.npmjs.com/package/vite-envs\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/v/vite-envs\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/garronej/vite-envs/blob/main/LICENSE\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/l/vite-envs\"\u003e\n    \u003c/a\u003e\n    \u003cp align=\"center\"\u003e\n      \u003ca href=\"https://github.com/garronej/vite-envs-starter\"\u003eDocumentation / Starter\u003c/a\u003e\n    \u003c/p\u003e\n\u003c/p\u003e\n\n# Motivation\n\nIn Vite, `import.meta.env` variables are set at build time with `vite build`.  \nHowever 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\nto change a configuration.  \n`vite-envs` facilitates this by enabling to:\n\n```bash\ndocker run --env FOO=\"xyz\" my-org/my-vite-app\n```\n\nThen, access `FOO`:\n\n-   In the TypeScript code as `import.meta.env.FOO`\n-   In `index.html`, as `\u003ctitle\u003e%FOO%\u003c/title\u003e`\n\nThis eliminates the need to rebuild each time you wish to change some configuration.  \nMore importantly, it allows you to ship a customizable Docker image of your webapp!\n\n# Features\n\n-   🔧 Effortless setup: Integrates smoothly, works as your already used to, does not disrupt your Storybook.\n-   😌 The `VITE_` prefix isn't required.  \n-   🛡️ Type-safe: Type definition for your `import.meta.env`. Hot reload enabled!\n-   🌐 `index.html`: Use your envs in your HTML file. Example `\u003ctitle\u003e%FOO%\u003c/title\u003e`\n-   🧠 [Supports computation of env values at build time](https://github.com/garronej/vite-envs-starter/blob/b0febf2d8ffa67dceaf140372445e3cb8059c2e1/vite.config.ts#L14-L37).  \n-   ⚙️ (Optional) enables to use EJS expressions in your `index.html`. `\u003ctitle\u003e\u003c%= import.meta.env.FOO.toUpperCase() =\u003e\u003c/title\u003e`\n-   🔒 Secure: Only injects environment variables explicitly defined in the `.env` file.  \n    [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)   \n\n# How it works  \n\n`vite-envs` is a Vite plugin.  \nWhen you build your app (`vite build`) it generate a `dist/vite-envs.sh` script.  \nWhen executed, this script updates the `dist/index.html` by injecting the environment variables \ndefined on the host running the script.  \n\nSo, to make the dynamic injection of environment variables take place, you simply need to run the `vite-envs.sh` script \nbefore starting your web server.  \nIn practice, the diff that you would need to apply to your `Dockerfile` would look something like this:    \n\n`Dockerfile`  \n```diff\n-CMD [\"nginx\", \"-g\", \"daemon off;\"]\n+ENTRYPOINT sh -c \"./vite-envs.sh \u0026\u0026 nginx -g 'daemon off;'\"\n```  \n\n# Types  \n\nUnrelated to the dynamic injection of environment variables, `vite-envs` also brings strict typing for `import.meta.env`.  \n\n[types-hot-reloading.webm](https://github.com/garronej/vite-envs/assets/6702424/78113d59-ac59-46b6-ada2-c325f475256c)\n\n# Demo  \n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.youtube.com/watch?v=wsY7VDUIZM0\"\u003e\n    \u003cimg width=\"1000\" alt=\"image\" src=\"https://github.com/garronej/vite-envs/assets/6702424/9f79b37a-9cdd-40ce-be48-9475406e815d\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n# Documentation\n\n👉[**vite-envs-starter**](https://github.com/garronej/vite-envs-starter)👈\n\n# Usecase example\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://user-images.githubusercontent.com/6702424/154810177-3da80638-93c3-4a41-9710-13541b9d8974.png\" /\u003e\n\u003c/p\u003e\n\n[Onyxia](https://github.com/InseeFrLab/onyxia) is a Vite app distributed as a [Docker image](https://hub.docker.com/r/inseefrlab/onyxia-web/tags).\n\nSysadmins that would like to deploy Onyxia on their infrastructure can simply use\n[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\ndocumented [here](https://docs.onyxia.sh/admin-doc/theme).\n\nHere are two deployment example:\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://datalab.sspcloud.fr\"\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/6702424/154809580-b38abbc2-d7be-4fc2-ad7d-b830d88f3a57.png\"\u003e  \n  \u003c/a\u003e\n  \u003ca href=\"https://onyxialpha.kub.sspcloud.fr/\"\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/6702424/154809578-4aaa5501-e356-484b-8a95-c2a59e287cf9.png\"\u003e  \n  \u003c/a\u003e\n\u003c/p\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgarronej%2Fvite-envs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgarronej%2Fvite-envs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgarronej%2Fvite-envs/lists"}