vite-plugin-runtime
Advanced tools
Vite plugin that enables configuring runtime environment variables when building
Inject runtime environment variables and html based on the vite mode.
npm install --save-dev vite-plugin-runtime
or
yarn add vite-plugin-runtime --dev
This plugin allows build toolchains to inject variables at compile time instead of relying on multiple .env.* environment dotenv files.
This is especially useful for values that need to be managed externally from source code.
This plugin replaces usage of import.meta.env.VITE_* with import.meta.env.*.
| vite | vite-plugin-runtime |
|---|---|
import.meta.env.VITE_APP_KEY | import.meta.env.APP_KEY |
.env file
| vite | vite-plugin-runtime |
|---|---|
VITE_APP_KEY=some value | APP_KEY=some value |
During the build this plugin will convert all occurences of import.meta.env.* to window.env.*
| Code | Runtime |
|---|---|
import.meta.env.APP_KEY | window.env.APP_KEY |
The plugin options can be injected in the constructor or as a separate object on the vite config object.
import { runtimeEnv } from 'vite-plugin-runtime';
export default defineConfig({
plugins: [
runtimeEnv(),
],
runtimeEnv: {}, // optional configuration object
This is the name of the object attached to the window instance. Default is env.
name?: (() => string) | string
runtimeEnv({
name: 'customName',
}),
outputs window.customName.*
Specificies whether to generate typescript types for import.meta.env. Default is false.
generateTypes?: boolean
runtimeEnv({
generateTypes: true,
}),
The path to generate typescript types. Only takes affect if generateTypes is true. Default is process.cwd()
generatedTypesPath?: (() => string) | string
runtimeEnv({
generatedTypesPath: () => './src',
}),
generatedTypesPath combined with generateTypes will create a type definition file env.d.ts:
/** generated by vite-plugin-runtime */
interface ImportMetaEnv {
readonly APP_KEY: string;
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}
Specifies whether to inject an env loading script into index.html. Defaults to true.
injectHtml?: boolean
runtimeEnv({
injectHtml: false,
}),
When true the plugin will inject
<script type="module">
import rtenv from '/env.js';
window.env = { ...window.env, ...rtenv };
</script>
into the index.html <head></head> section.
The generated script will resemble:
export default {
APP_KEY: 'some value',
};
Specifies whether to create an envsubst template file at build time. Defaults to false.
envsubstTemplate?: boolean
runtimeEnv({
envsubstTemplate: true,
}),
When true the plugin will create the following template file:
export default {
APP_KEY: $APP_KEY,
};
This plugin allows an easy way to inject html into index.html at compile time based on the vite mode.
This is useful for scripts like google tag manager that should only be loaded for certain environments like production.
The plugin options can be injected in the constructor or as a separate object on the vite config object.
import { runtimeHtml } from 'vite-plugin-runtime';
export default defineConfig({
plugins: [
runtimeHtml(),
],
runtimeHtml: {}, // optional configuration object
mode: HtmlTagDescriptor[]
runtimeHtml({
production: [
{
tag: 'script',
attrs: {
type: 'text/javascript',
src: '/some_file.js',
},
injectTo: 'head',
},
],
staging: [
{
tag: 'title',
children: 'Staging',
}
]
}),
1.4.0
FAQs
Vite plugin that enables configuring runtime environment variables when building
The npm package vite-plugin-runtime receives a total of 2,083 weekly downloads. As such, vite-plugin-runtime popularity was classified as popular.
We found that vite-plugin-runtime demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Libxml2’s solo maintainer drops embargoed security fixes, highlighting the burden on unpaid volunteers who keep critical open source software secure.
Research
Security News
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.