DEV Community

Cover image for How to use Environment Variables in Vite(React Template Example)

Posted on • Originally published at

How to use Environment Variables in Vite(React Template Example)

tl:dr — Use import.meta.env instead of process.env

Vite is a handy build tool when you want to spin up a quick react application. In this guide, I will walk you through how to use environment variables inside a react application template created though vite.


This guide assumes that you know some basics of scaffolding a vite application template and also the workings of environment variables . A brief disclaimer, environment variables only store secrets during the development phase of your project. Secret or sensitive keys will be visible after a production build so be careful not to expose sensitive keys at build time.

The Problem:

Sometime back when doing a live code presentation, I wanted to use some keys from a database that was to initialize a connection to the database. The best approach would be to write all the keys inside a .env file and create a connection that makes a reference to the values inside this file. Normally when creating and using environment variables, you write the JavaScript statement process.env.SOME_VALUE or process.env.REACT_APP_SOME_VALUE but in this instance, the react application stopped rendering information on the screen. The console error read "process is not defined". Even after installing the npm package dotenv, the error still persisted.


The Solution:

The solution is actually inside the official vite documentation. Instead of using process.env.SOME_VALUE or process.env.REACT_APP_SOME_VALUE which is common with other projects, inside vite we use import.meta.env.SOME_VALUE. When you want to expose some info inside the frontend you will have to append the statement with VITE i.e. import.meta.env.VITE_SOME_VALUE.

With the import.meta.env.VITE_SOME_VALUE statement, we can now use environment variables inside a react application initialized inside of vite. Thank you for reading this brief writeup and hope this comes in handy when working with react inside vite.

Happy Coding!

Top comments (12)

chris13830450 profile image

Thank you very much for this, just migrated from using CRA to Vite and this issue had been bothering me.

wendumaris profile image
Nwafor Stellamaris Chinwendu

Thanks for this. it really helps

allexon profile image
Alexon da Silva Moreira

I achieved!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

I paste this in this file -> .env

having to take it like this in any component

but still i have a doubt if i need
of an environment variable on the front but that
that it is not exposed to the user

allexon profile image
Alexon da Silva Moreira

What torture in Vite, I'm trying to get the environment variable, when I run yarn dev

I paste this in this file -> vite-env.d.ts

having to take it like this in any component

always give undefined

why do they invent so much....

frankoadeleye profile image
Frank Adeleye

Thanks for this!

Let's remember the prefix each variable we want exposed with the 'VITE_' phrase.
E.g, use VITE_BASE_URL instead of BASE_URL_OF_VITE unless it's something you don't want exposed.


devshetty profile image
Deveesh Shetty

I had it in the root folder so it was not working... Moved the folder to src then it worked.

amphilip profile image
Philip Mac

I'm trying to use Sanity as my cms and import.meta.env is nt working. could it be because sanity uses webpack?

jacetech profile image
Chidindu Emmanuel Aneke

Does it also what in the index.html file?

yohannestz profile image

hi, good read. also add a disclaimer this might cause a leak for api keys.

marieshix1 profile image
Wanjiku Maina.

Thank you. This has worked

ymodepalli profile image

Thanks Bhai! Life Saver ❤

annajaffar profile image

Thank you so much, I was struggling while learning about using geolocation in JS in React. Kept on getting this error, even chatgpt couldnt help.