Vite-plugin-dotenv-in-html NPM

ViteJS plugin: .env in HTML

A ViteJS plugin to replace .env variables in index.html.

(i.e. import.meta.env.VITE_ variables).

🚩 Obsolete & no longer required 🚩

ViteJS now supports replacing .env variables in HTML files natively.

This can be achieved using %VITE_MY_ENV_VARIABLE% syntax.

This plugin is no longer required nor maintaned. Users are encouraged to migrate to the latest ViteJS version and syntax.

Rationale

A very small plugin, with minimal configuration and footprint, no dependencies.

Other plugins achieve the same goal, they have great features but are usually bigger.

Installation

npm install --save-dev vite-plugin-dotenv-in-html

Setup

Update vite.config.js to support Conditional config: use the defineConfig overload that exports a function
Then add the plugin to your vite.config.js.

import dotEnvHTMLPlugin from "vite-plugin-dotenv-in-html";

export default defineConfig(({ mode }) => {
	return {
		plugins: [dotEnvHTMLPlugin(mode)],
	};
});

Usage

In the following HTML, import.meta.env.VITE_ variables will be replaced with the values set in currently active .env file.

<html>
	<head>
		<title>import.meta.env.VITE_APP_TITLE - import.meta.env.MODE</title>
	</head>
	<body>
		<h1>Hello World</h1>
		<a href="import.meta.env.VITE_DOCUMENTATION_URL">Documentation</a>
	</body>
</html>

Important note

To match ViteJS's own policy, only import.meta.env.VITE_ variables and built-in variables are replaced:

To prevent accidentally leaking env variables to the client, only variables prefixed with VITE_ are exposed to Vite-processed code.

Inspiration and alternatives

License

Apache License 2.0

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.