https://github.com/geprog/vite-plugin-env-config

Vite Plugin for providing config from environment variables at runtime
https://github.com/geprog/vite-plugin-env-config

config envsubst twelve-factor-app vite vite-plugin

Last synced: about 1 month ago
JSON representation

Vite Plugin for providing config from environment variables at runtime

• Host: GitHub
• URL: https://github.com/geprog/vite-plugin-env-config
• Owner: geprog
• License: mit
• Created: 2022-01-24T15:02:31.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-06T10:02:09.000Z (about 1 month ago)
• Last Synced: 2024-08-06T11:58:08.576Z (about 1 month ago)
• Topics: config, envsubst, twelve-factor-app, vite, vite-plugin
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@geprog/vite-plugin-env-config
• Size: 410 KB
• Stars: 7
• Watchers: 1
• Forks: 1
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @geprog/vite-plugin-env-config

[![npm version](https://img.shields.io/npm/v/@geprog/vite-plugin-env-config)](https://www.npmjs.com/package/@geprog/vite-plugin-env-config)

![vite peer dependency version](https://img.shields.io/npm/dependency-version/@geprog/vite-plugin-env-config/peer/vite)

Vite plugin for providing configurations from environment variables at runtime.

The generated template can be populated with [envsubst](https://github.com/a8m/envsubst) in production.

## Usage

Add `envConfig` plugin to `vite.config.js / vite.config.ts` and provide a list of environment variable names:

```js

// 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:

```ts

import { getEnvConfig } from '@geprog/vite-plugin-env-config';

const backendURL = getEnvConfig('BACKEND_URL');

```

For production use `envsubst` as outlined in the [next section](#motivation).

## Motivation

To adhere to the principles of the [twelve-factor app](https://12factor.net/config)

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`:

```Dockerfile

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.