Runtime config: load config.json before rendering
The same bundle works in every environment: only config.json differs. cache: "no-store" makes sure a changed config is picked up at once. This is one of the rare places where calling root.render a second time is the right tool: the config is ready before any component needs it, so no component has to handle "config not loaded yet".
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
1. page shell shown, loading config
2. config loaded: staging https://api.eu.example.com
3. screen: Talking to https://api.eu.example.com (staging)💬 Chat is on