How to replace Environment variables with Netlify and Vite

Netlify Vite Environment variables integration

A Vite example about using Environment variables replaced during a Netlify build.

Environment variables

Vite doesn’t require any extra packages to make it working. A common package used to this goal is dotenv, that expose the variables into process.env.
Vite exposes only the Environment variables starting with VITE_ in the global variable import.meta.env.


First, we need to creare a .env file in the app root.


Remember that this file should not be committed in a git repo, as we don't want expose these secrets in git history and in a git repository.

To achieve this, .gitignore is the best place, just add a new line .env*.

NB. The wildcard is needed because multiple per-environment .env files are supported, for example .env.local, .env.production, etc.

Bonus tip: did you commit sensitive data in your repo?
Be aware that it’s possible to remove them, see Github docs | Removing sensitive data from a repository.


Then, in a javascript file we can use the Environment variable VITE_KEY.

const key = import.meta.env.VITE_KEY;

Local development

During development, for example via

npm run dev

Vite doesn’t replace any import.meta.env. variables, but instead expose the configured values at runtime.

This means that import.meta.env.VITE_KEY will be still visible in the code, but at runtime the value will be resolved to 1234.

Production environment

Instead, during production build via

npm run build


npm run preview

the bundling replaces all import.meta.env. with the values found.

This means that import.meta.env.VITE_KEY will be replaced directly in the source code with 1234 during bundling.

Netlify integration

How then make it working while building and deploying with Netlify?

Netlify is able to expose to Vite the Environment variables.

Hence can Vite replace them during the bundling with the real values.

The configuration in Netlify is available in:
Site configuration > Environment variables > Environment variables.

Working example

Source code:

A Vite App deployed with Netlify.

Take a look to the un-minified code, you will clearly see that import.meta.env.VITE_KEY has been replaced with the specified value.
Vite production build replace `import.meta.env.`

Add a Comment

Your email address will not be published. Required fields are marked *