Environment variables ($env) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Svelte component using $env/static/private?

Consider this Svelte component that imports a private environment variable and displays it:

  <script>
    import { PRIVATE_API_KEY } from '$env/static/private';
  </script>

  <p>API Key: {PRIVATE_API_KEY}</p>

If the environment variable PRIVATE_API_KEY is set to abc123 at build time, what will the component render in the browser?

Svelte

<script>
  import { PRIVATE_API_KEY } from '$env/static/private';
</script>

<p>API Key: {PRIVATE_API_KEY}</p>

A API Key: undefined

B API Key: $env/static/private

C API Key: abc123

D API Key: null

💡 Hint

Remember that $env/static/private variables are replaced at build time.

The PRIVATE_API_KEY is statically injected during build, so the component renders the actual value abc123.

📝 Syntax

intermediate

Which import statement correctly accesses a public environment variable in SvelteKit?

You want to use a public environment variable named VITE_API_URL in your SvelteKit component. Which import statement is correct?

A import { VITE_API_URL } from '$env/dynamic/private';

B import { VITE_API_URL } from '$env/static/private';

C import { VITE_API_URL } from '$env/dynamic/public';

D import { VITE_API_URL } from '$env/static/public';

💡 Hint

Public variables start with VITE_ and are imported from $env/static/public.

Public environment variables prefixed with VITE_ are accessed via $env/static/public for static imports.

🔧 Debug

advanced

Why does this SvelteKit code throw an error at runtime?

Given this code snippet:

  <script>
    import { SECRET_KEY } from '$env/dynamic/private';
    console.log(SECRET_KEY);
  </script>

At runtime, the console shows undefined for SECRET_KEY. What is the most likely cause?

Svelte

import { SECRET_KEY } from '$env/dynamic/private';
console.log(SECRET_KEY);

A SECRET_KEY is not set in the environment at runtime.

B You must import from '$env/static/private' instead.

C SECRET_KEY must start with VITE_ to be accessible.

D You cannot use environment variables in SvelteKit.

💡 Hint

Dynamic private variables reflect the environment at runtime, not build time.

If SECRET_KEY is undefined at runtime, it means the environment variable is not set in the running environment. Dynamic imports read the actual environment variables when the app runs.

❓ state_output

advanced

What is the output of this Svelte component using $env/dynamic/public?

Consider this Svelte component:

  <script>
    import { env } from '$env/dynamic/public';
  </script>

  <p>API URL: {env.VITE_API_URL}</p>

If the environment variable VITE_API_URL is set to https://api.example.com at runtime, what will the component display?

Svelte

<script>
  import { env } from '$env/dynamic/public';
</script>

<p>API URL: {env.VITE_API_URL}</p>

A API URL: https://api.example.com

B API URL: undefined

C API URL: $env/dynamic/public

D API URL: null

💡 Hint

Dynamic public env variables reflect the environment at runtime.

The env object from $env/dynamic/public contains public variables available at runtime, so the component shows the actual URL.

🧠 Conceptual

expert

Which statement about SvelteKit environment variables is TRUE?

Choose the correct statement about environment variables in SvelteKit:

A Variables from '$env/static/public' are only available at runtime on the server.

B Variables imported from '$env/static/private' are replaced at build time and not exposed to client-side code.

C Dynamic environment variables can be imported using named imports from '$env/dynamic/private'.

D Public environment variables must start with 'PRIVATE_' to be accessible in client code.

💡 Hint

Think about build time vs runtime and public vs private variables.

Static private variables are replaced at build time and never exposed to client code. Public variables start with 'VITE_' and are accessible in client code. Dynamic env variables are accessed via the 'env' object, not named imports.