Connecting to the Backend - Consuming APIs - UseEffect Hook

Using environment variables in Vite

Vite provides built-in support for environment variables using the .env files. You can create different .env files for different environments like development, production, and testing.

• Create a .env file in the root of your Vite project. You can create this file manually or use the touch command in your terminal.

// Bash
touch .env

• Add your environment variables to the .env file. Prefix your variables with VITE_ to make them available in your Vite application.

// Bash
VITE_API_KEY=your-api-key
VITE_API_URL=https://api.example.com

• Access your environment variables in your Vite application using import.meta.env.

// in you API component
const apiKey = import.meta.env.VITE_API_KEY;
const apiUrl = import.meta.env.VITE_API_URL;

console.log("API Key:", apiKey);
console.log("API URL:", apiUrl);

• Remember to restart your development server after adding or updating environment variables in your .env file.

ref site https://codeparrot.ai/blogs/using-environment-variables-in-react-and-vite