What import.meta.env becomes in the bundle
A model of what vite build does (the real output is in the walkthrough). The values are pasted in as text, so the code that ships contains the URL itself. DB_PASSWORD has no VITE_ prefix, so it becomes undefined (real Vite writes void 0). Switch the mode to development to see DEV and PROD flip.
Configuration such as an API address or a feature switch reaches a React app either at build time, when the build tool pastes VITE_ or NEXT_PUBLIC_ values into the bundle, or at runtime, when the app loads a config file as it starts; anything that reaches the browser is public, so secrets never belong there.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a config.js module for a Vite app that reads VITE_API_URL and VITE_FEATURE_CHAT, throws a clear error if the URL is missing, and exports { apiUrl, chatEnabled }.
Write the package.json scripts to build the same app for staging and production with Vite modes.
Explain it without notes
What is the difference between build-time and runtime configuration in a React app?
Why do Vite and Next.js require the VITE_ and NEXT_PUBLIC_ prefixes?
In what order does Vite load .env files, and which wins?
How would you keep an API secret safe in a React app that needs to call that API?
Preview
Console
Nothing logged yet.Expected console output
const api = "https://api.example.com";
const pw = undefined;
console.log("production", true);
--- staging build
const api = "https://api.example.com";
const pw = undefined;
console.log("staging", true);