loading env variables in react app using vite

 https://stackoverflow.com/questions/70883903/loading-env-variables-in-react-app-using-vite

First Create files as per the env like

.env
.env.qa
.env.prod  
.
..etc

Now, Put the Variable in the files created above(remember to prepend VITE_ prefix):

.env.dev:

VITE_API_KEY=DEV-XXX

.env.qa:

VITE_API_KEY=QA-YYY

Now use this variable in your components:

const API_KEY = import.meta.env.VITE_API_KEY;

finally, in package.json file at scripts key, modify/add environment specific build scripts:

"build:dev": "tsc && vite build --mode dev",
"build:qa": "tsc && vite build --mode qa"

Please note that the command used and environment file naming convention, for e.g., if you run the command with  --mode qa it refers to .env.qa file, and --mode dev refers to .env.dev file.