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

Last updated