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:

npm install @octamap/html-env-injection
# or
yarn add @octamap/html-env-injection
# or
pnpm add @octamap/html-env-injection

Usage

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

import { defineConfig } from 'vite';
import { HTMLENVInjectionPlugin } from '@octamap/html-env-injection';

export default defineConfig({
  plugins: [HTMLENVInjectionPlugin()]
});

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:

<title>%VITE_APP_TITLE%</title>

After:

<title>My Cool App</title>

If VITE_APP_TITLE is not defined:

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

License

MIT