Html ENV injection

A Vite plugin to preprocess HTML files and inline environment variables prefixed with VITE_ during both development and production builds.

Features

• Automatically replaces VITE_* environment variables in HTML files.
• Works with index.html, raw HTML imports, and final production build output.
• Differentiates behavior based on dev or build mode.
• Gracefully warns on missing environment variables.

Installation

Install using your preferred package manager:

1npm install @octamap/html-env-injection
2# or
3yarn add @octamap/html-env-injection
4# or
5pnpm add @octamap/html-env-injection

Usage

In your vite.config.ts or vite.config.js:

1import { defineConfig } from 'vite';
2import { HTMLENVInjectionPlugin } from '@octamap/html-env-injection';
3
4export default defineConfig({
5  plugins: [HTMLENVInjectionPlugin()]
6});

How It Works

• Replaces VITE_* placeholders in:
  • index.html
  • Raw HTML imports (e.g. .html?raw)
  • Final build .html assets
• Values are sourced from:
  • process.env
  • Vite's resolved config.env
• Missing variables are replaced with a comment: <!-- Missing env: VITE_EXAMPLE -->

Example

Before:

1<title>%VITE_APP_TITLE%</title>

After:

1<title>My Cool App</title>

If VITE_APP_TITLE is not defined:

1<title><!-- Missing env: VITE_APP_TITLE --></title>

License

MIT