hizo / vite-plugin-env-config

Vite Plugin for providing config from environment variables at runtime

@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.