@geprog/vite-plugin-env-config
v4.0.14
Published
Vite Plugin for providing config from environment variables at runtime
Downloads
1,779
Keywords
Readme
@geprog/vite-plugin-env-config
Vite plugin for providing configurations from environment variables at runtime.
The generated template can be populated with envsubst in production.
Usage
Add envConfig
plugin to vite.config.js / vite.config.ts
and provide a list of environment variable names:
// vite.config.js / vite.config.ts
import { envConfig } from '@geprog/vite-plugin-env-config';
export default {
plugins: [envConfig({ variables: ['BACKEND_URL'] })],
};
To access the environment variables use the built-in getter:
import { getEnvConfig } from '@geprog/vite-plugin-env-config';
const backendURL = getEnvConfig('BACKEND_URL');
For production use envsubst
as outlined in the next section.
Motivation
To adhere to the principles of the twelve-factor app
you might need to access environment variables that are set when your frontend server starts.
Instead of building your frontend on startup,
you can use a config template like the one above and populate it using envsubst
:
CMD ["/bin/sh", "-c", "envsubst < ./dist/env-config.template.js > ./dist/env-config.js && exec nginx -g 'daemon off;'"]
@geprog/vite-plugin-env-config
generates the required template from a list of variable names and provides the already populated file via the dev-server during development.