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
Copyright 2022-2023 Yvan Razafindramanana
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.
Third parties
This project uses open-source, third party software:
- ViteJS: MIT License, Copyright (c) 2019-present Evan You & Vite Contributors
- Vitest: MIT License (c) 2021-Present Anthony Fu, Matias Capeletto
- Unbuild: MIT License Copyright (c) 2021 Pooya Parsa
