Environment Variables and Mode Handling in Vite Quiz Quiz

Explore key concepts of environment variables and mode handling in Vite with this focused quiz. Challenge your understanding of how to define, access, and manage environment-specific configurations while ensuring optimal setup for your projects.

1. Accessing Environment Variables

   Which syntax allows you to access a custom environment variable named VITE_API_URL in your source code when using Vite?

   1. env.VITE_API_URL
   2. import.meta.env.VITE_API_URL
   3. process.env.VITE_API_URL
   4. VITE_API_URL.get()

   Explanation: The correct way to access custom environment variables in Vite is using import.meta.env.VITE_API_URL. The 'process.env' syntax is not natively supported in this environment and would not work unless specifically polyfilled. 'env.VITE_API_URL' and 'VITE_API_URL.get()' are not recognized ways to access environment variables in this context. Using import.meta.env ensures that variables prefixed with VITE_ are available in your source code.

2. Variable Exposure to Source Code

   Which environment variable name will be exposed to your project’s source code during build time when declared in a .env file?

   1. SECRET_KEY
   2. DB_PASSWORD
   3. CUSTOM_VAR
   4. VITE_CUSTOM_SETTING

   Explanation: By convention, only variables prefixed with 'VITE_' in the .env files are exposed to the source code in a Vite project. Variables like 'SECRET_KEY', 'DB_PASSWORD', or 'CUSTOM_VAR' without this prefix will not be available in the compiled code. This ensures sensitive or private variables are not unintentionally made public.

3. Using Modes for Environment Files

   If your project is built with NODE_ENV set to 'staging', which .env file will Vite load in addition to .env and .env.local?

   1. .env.staging.local
   2. .env.dev
   3. .env.example
   4. .env.production

   Explanation: .env.staging.local is loaded for the 'staging' mode and takes precedence over general .env files, providing environment-specific overrides. '.env.dev' and '.env.production' are relevant for 'dev' and 'production' modes, not for 'staging'. '.env.example' is typically used as a template and is not automatically loaded as an active environment file.

4. Defining Modes in Command Line

   Which CLI option should you use to specify a custom mode (for example, 'test') when running a Vite build process?

   1. --mode test
   2. --env test
   3. -e test
   4. -m test

   Explanation: The correct CLI option to set a custom mode is '--mode test'. The '-m test' and '-e test' flags are not supported by Vite for this purpose. '--env test' may be familiar from other tools, but it is not recognized by Vite’s command-line interface. Using '--mode' ensures the right set of environment files and variables are loaded.

5. Changing Environment Variables per Mode

   Suppose you have .env.development and .env.production files defining VITE_API_URL with different values; what determines which file’s variable is used in the build?

   1. The default value in .env
   2. The current mode when building
   3. The value with the highest alphabetical order
   4. The last modified file

   Explanation: The environment variable used in the build is chosen based on the current mode specified when running the build process. The last modified file or highest alphabetical order does not affect this selection. If no mode is set, the default from .env is used, but when a specific mode like 'development' or 'production' is active, its corresponding file takes precedence.