vite-plugin-dotenv

vite-plugin-dotenv

This plugin loads environment variables from .env files and environment variables on the machine into import.meta.env (see import.meta on MDN for more information).

Following the Twelve-Factor App approach, storing configuration in the environment separate from code allows us to inject environment variables at runtime rather than build time. Powered by dotenv.

This project use SemVer for versioning. For the versions available, see the tags on this repository.

💡 How

For security reasons, this plugin will only load those environment variables defined in the .env.example file.

For dev server, this plugin will load environment variables from a .env file, and the environment variables on your machine into import.meta.env.

For bundling, this plugin will generate a chunk with placeholder that allow us to inject environment variables later. Before serving your application in production, run the vite-plugin-dotenv command to inject environment variables.

Note: vite built-in variables will work as usual.

🚀 Quick Start

Install and register the plugin:

$ npm i vite-plugin-dotenv dotenv

// vite.cofnig.ts
import { defineConfig } from "vite";
import dotenv from "vite-plugin-dotenv";

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

Create a .env and .env.example files in the root of your project:

# .env
S3_BUCKET="YOURS3BUCKET"
SECRET_KEY="YOURSECRETKEYGOESHERE"

# .env.example
S3_BUCKET=

Finally, remember to inject environment variables before serving your application.

Adjust the preview script in your package.json:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite-plugin-dotenv && vite preview"
  }
}

You can use pkg to create a standalone executable for deployment.

For example, you can pack the alpine version like this:

$ npm i -g pkg
$ npx pkg ./node_modules/vite-plugin-dotenv/bin/vite-plugin-dotenv.js -t node16-alpine

See all available targets here

📖 API

vite-plugin-dotenv binary

$ npx vite-plugin-dotenv --help

🤝 Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

📝 License

This project is licensed under the MIT License - see the LICENSE file for details