vite-plugin-env-config-testing
TypeScript icon, indicating that this package has built-in type declarations

0.0.1 • Public • Published

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

/vite-plugin-env-config-testing/

    Package Sidebar

    Install

    npm i vite-plugin-env-config-testing

    Homepage

    geprog.com

    Weekly Downloads

    0

    Version

    0.0.1

    License

    MIT

    Unpacked Size

    17.6 kB

    Total Files

    11

    Last publish

    Collaborators

    • lukasbeta