Vite

Encrypt a .env file in Vite with Dotenvx, share access with your team, and load configuration before bundling.

Prerequisites

Start with a Vite app and a supported Node.js release. This guide works with client-side React, Vue, and vanilla JavaScript apps.

VITE_ values are public in the browser. Encryption protects the committed file; keep real secrets in your backend or build tooling.

Install

Install Dotenvx in your Vite project:

$ npm install @dotenvx/dotenvx

$ pnpm add @dotenvx/dotenvx

Encrypt

Start with a demonstration value in the .env file at your project root:

# .env
VITE_HELLO="Secret"

Encrypt it with a single command.

$ npx dotenvx encrypt
◈ encrypted .env (022 0D8) via .env.keys ⛉

$ pnpm exec dotenvx encrypt
◈ encrypted .env (022 0D8) via .env.keys ⛉

The values become ciphertext and only your private key can unlock them.

# .env
DOTENV_PUBLIC_KEY="0220d830351410598be484f43a7b07097e09851f50426832876e8b5815a1752990"

VITE_HELLO="encrypted:BHLTACNJMr00nTG6yXpkCyWFKF/MY0ajN855tg3uVtKopTe2AGzSkQlcPd21pTOT3Ci8IKrdIg2TMZFoq1mDR6yb06QCRvqHXtpkZkAHYCEHfeWqqC8tMFovcYq5JS2uZSrC/qUGDA=="

Commit

Commit your encrypted .env files with your code. It's safe. Now you can securely share secrets through git.

$ git add .env
$ git commit -m "encrypt .env"

Ship

Display the value in your project's index.html:

<h1>Hello %VITE_HELLO%</h1>

In JavaScript or a component, read the same value with import.meta.env.VITE_HELLO.

Update these scripts in package.json, keeping your other scripts and any existing type-checking step before the build:

{
  "scripts": {
    "dev": "dotenvx run --strict -- vite",
    "build": "dotenvx run -f .env.production --strict -- vite build",
    "preview": "vite preview"
  }
}

Dotenvx decrypts .env before Vite starts. Those process variables take precedence over Vite's own .env loading.

Run your app:

$ npm run dev
⟐ injected env (2) from .env (022 0D8) via .env.keys

$ pnpm run dev
⟐ injected env (2) from .env (022 0D8) via .env.keys

Visit http://localhost:5173 to see Hello Secret. Restart the command after changing .env.

Hello Secret

Build-only secrets Alternative →

Have teammates? Share access with Dotenvx Armor ⛨

$ npx dotenvx login
◉ logged in (username)

$ pnpm exec dotenvx login
◉ logged in (username)

Create the Armored Key ⛨

$ npx dotenvx armor up
⛨ armored .env (022 0D8)

$ pnpm exec dotenvx armor up
⛨ armored .env (022 0D8)

Invite your teammate.

$ npx dotenvx armor invite
⛨ invited [email protected] to team

$ pnpm exec dotenvx armor invite
⛨ invited [email protected] to team

Your teammate accepts the invitation, pulls the repository, installs dependencies, and logs in with dotenvx login. They can then run the app:

$ npm run dev
⟐ injected env (2) from .env (022 0D8) via Armor ⛨

$ pnpm run dev
⟐ injected env (2) from .env (022 0D8) via Armor ⛨

Open the app to see Hello Secret.

Share a private key Alternative →

Production

Create a .env.production file:

# .env.production
VITE_HELLO="Production"

Encrypt it with an Enclaved Key ◊

$ npx dotenvx encrypt -f .env.production
◈ encrypted .env.production (022 0D8) via Armor Enclave ◊

$ pnpm exec dotenvx encrypt -f .env.production
◈ encrypted .env.production (022 0D8) via Armor Enclave ◊

When prompted, choose Enclaved, select your build service, connection, and resource, and use DOTENV_PRIVATE_KEY_PRODUCTION as the private key name. The key must be available to the build job.

Commit the encrypted file:

$ git add -f .env.production
$ git commit -m "encrypt .env.production"

Install dependencies and build on that service:

$ npm install
$ npm run build

$ pnpm install
$ pnpm build

Dotenvx decrypts .env.production before Vite builds. Deploy dist to your static host; keep .env.keys off the build service and out of git.

Open your deployed URL to see Hello Production.

Hello Production

Public values are baked into the output. Changing them requires rebuilding. Your static host and visitors do not need Dotenvx or a private key. Keep encrypted .env files outside public so Vite does not copy them into dist.

Use npm run preview or pnpm preview to inspect an existing build locally; vite preview is not a production server.

Build with a private key Alternative →

Staging and other modes Alternative →

Conclusion

You've encrypted your configuration, shared access with Armor, and loaded production values before Vite builds. Your encrypted files travel with your code; private keys stay on development and build machines.