AWS S04 L02 Vite environment variables using .env and import.meta.env

📘 VITE ENVIRONMENT VARIABLES USING .ENV AND IMPORT.META.ENV In this lesson we configure the React frontend so it reads the API server URL from a Vite .env file instead of hard-coding it directly in the source code. We look at how Vite exposes environment variables using import.meta.env, why variables must start with VITE_, and how these values are injected into the frontend at build time. --- 🎯 IN THIS VIDEO Understanding Vite environment variables Using .env files in a Vite project Understanding import.meta.env Why Vite variables must start with VITE_ Moving API URLs out of source code Creating a reusable frontend config file Adding Vite TypeScript type support Using string interpolation for API URLs Understanding build-time configuration Running the React frontend locally Connecting the frontend to the local API server --- 📦 TECHNOLOGIES COVERED Vite React TypeScript .env files import.meta.env Fetch API Express API server pnpm workspaces --- 💻 WHY THIS MATTERS Frontend applications need different configuration values in different environments. For example: local development API URL deployed AWS API Gateway URL test environment URL production environment URL Vite .env files allow us to manage these values cleanly without hard-coding them throughout the application. In the next lesson we will automate the creation of an environment file containing the deployed AWS API server address. --- 🌐 COURSE PORTAL https://richardbraycourses.co.uk --- 📂 COURSE REPOSITORY https://github.com/RichardBrayCourses... --- 📘 AWS SERVERLESS WEB DEVELOPMENT COURSE Build complete real-world AWS applications using: React → TypeScript → Express → Lambda → API Gateway → CDK → CloudFront → S3 → PostgreSQL → Cognito → DevOps