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 thetouch
command in your terminal.
// Bash
touch .env
Add your environment variables to the
.env
file. Prefix your variables withVITE_
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
PreviousHands-on : Build a Grocery List AppNextLesson 1 - Connecting to the Back End - Understanding Side Effects, Hooks and useEffect - Overview
Last updated