Environment variables ($env) in Svelte - Step-by-Step Execution

Concept Flow - Environment variables ($env)

Define env variables in .env file

↓

SvelteKit reads .env on build/start

↓

Access variables via $env/static/private or $env/static/public

↓

Use variables in Svelte components or server code

↓

Build app with env values embedded

↓

Run app with env values available

This flow shows how environment variables are defined, accessed in SvelteKit using $env, and used during build and runtime.

Execution Sample

Svelte

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

console.log(env.MY_SECRET);

// Output: the secret value from .env file

This code imports private environment variables and logs the value of MY_SECRET defined in the .env file.

Execution Table

Step	Action	Evaluation	Result
1	Read .env file	MY_SECRET=supersecret	Env variables loaded into process
2	Import env from '$env/static/private'	env object contains MY_SECRET	env.MY_SECRET = 'supersecret'
3	Console.log(env.MY_SECRET)	Access env.MY_SECRET	Output: 'supersecret'
4	Use env in component or server code	Variable available	App uses secret value
5	Build app	Embed env values	App bundle contains env values
6	Run app	Env values accessible	App runs with env variables
7	Exit	No more steps	Execution complete

💡 All environment variables are loaded and accessible; execution ends after app runs.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
env.MY_SECRET	undefined	supersecret	supersecret	supersecret	supersecret

Key Moments - 2 Insights

Why can't I access private env variables in client-side code?

Private env variables from '$env/static/private' are only available on the server side for security. See execution_table step 2 where env is imported server-side.

How do I make an env variable accessible in the browser?

Prefix the variable with PUBLIC_ in your .env file and import it from '$env/static/public'. This is safe for client-side use.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of env.MY_SECRET after step 2?

A null

B undefined

C 'supersecret'

D empty string

💡 Hint

Check the 'Result' column in row for step 2 in execution_table.

At which step does the app embed the environment variables into the build?

A Step 3

B Step 5

C Step 1

D Step 6

💡 Hint

Look for the step mentioning 'Build app' and 'Embed env values' in execution_table.

If you want an env variable to be accessible in the browser, what should you do?

A Prefix variable with PUBLIC_ and use $env/static/public

B Use $env/static/private import

C Define variable without prefix and import from $env/static/private

D Use process.env directly in client code

💡 Hint

Refer to key_moments about client-side accessibility of env variables.

Concept Snapshot

Environment variables in SvelteKit are defined in .env files.
Use $env/static/private for server-only variables.
Use $env/static/public for variables safe to expose to the browser.
Variables are loaded at build time and embedded in the app.
Prefix public variables with PUBLIC_ in .env.
Access variables by importing from $env in your code.

Full Transcript

In SvelteKit, environment variables are stored in .env files. When the app builds or starts, SvelteKit reads these variables. You can access private variables only on the server by importing from '$env/static/private'. Variables meant for the browser must be prefixed with PUBLIC_ and imported from '$env/static/public'. This keeps secrets safe and allows safe data to be used client-side. The variables are embedded into the app during build, so they are available when the app runs. This process ensures environment variables are handled securely and efficiently.

Practice

1. What is the main reason to use environment variables in a Svelte project?

easy

A. To avoid using any external libraries

B. To write all code inside a single file

C. To make the app run faster by skipping variables

D. To store settings outside the code for safety and flexibility

Solution

1. Step 1: Understand environment variables purpose

   Environment variables keep sensitive or changeable settings outside the main code, so you can change them without editing code.

2. Step 2: Connect to safety and flexibility

   This separation helps keep secrets safe and lets you adjust settings easily for different environments like development or production.

3. Final Answer:

   To store settings outside the code for safety and flexibility -> Option D

4. Quick Check:

   Environment variables = safety and flexibility [OK]

Hint: Environment variables keep secrets outside code [OK]

Common Mistakes:

• Thinking environment variables speed up the app
• Believing environment variables are for code organization only
• Confusing environment variables with libraries

2. Which import statement correctly accesses public environment variables in a Svelte component?

easy

A. import { PUBLIC_API_KEY } from '$env/static/public';

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

C. import { API_KEY } from '$env/dynamic/private';

D. import { PUBLIC_API_KEY } from '$env/dynamic/public';

Solution

1. Step 1: Identify public environment variable import

   Public variables are accessed from '$env/static/public' when known at build time.

2. Step 2: Match variable prefix and import path

   Public variables must start with 'PUBLIC_' and be imported from '$env/static/public' for static access.

3. Final Answer:

   import { PUBLIC_API_KEY } from '$env/static/public'; -> Option A

4. Quick Check:

   Public vars use static/public import [OK]

Hint: Public vars use $env/static/public import [OK]

Common Mistakes:

• Using private import paths for public variables
• Forgetting the PUBLIC_ prefix
• Mixing dynamic and static imports incorrectly

3. Given this Svelte code snippet, what will be displayed if the environment variable PUBLIC_APP_NAME is set to 'MyApp'?

import { PUBLIC_APP_NAME } from '$env/static/public';

<h1>Welcome to {PUBLIC_APP_NAME}!</h1>

medium

A. Welcome to MyApp!

B. Welcome to PUBLIC_APP_NAME!

C. Welcome to !

D. Error: Cannot find variable PUBLIC_APP_NAME

Solution

1. Step 1: Understand import of PUBLIC_APP_NAME

   The variable PUBLIC_APP_NAME is imported from '$env/static/public', so its value is available at build time.

2. Step 2: Check usage in template

   The variable is used inside the <h1> tag, so it will display the actual value 'MyApp'.

3. Final Answer:

   <h1>Welcome to MyApp!</h1> -> Option A

4. Quick Check:

   Static public env var shows actual value [OK]

Hint: Static public vars show real value in template [OK]

Common Mistakes:

• Expecting variable name instead of value
• Assuming variable is undefined without import
• Confusing static and dynamic imports

4. You try to access a private environment variable in a Svelte component using this code:

import { SECRET_KEY } from '$env/static/private';

console.log(SECRET_KEY);

But you get an error during build. What is the likely cause?

medium

A. SECRET_KEY must start with PUBLIC_ prefix

B. You must import from '$env/dynamic/public' instead

C. Private variables cannot be imported in client-side code

D. You forgot to declare SECRET_KEY in .env file

Solution

1. Step 1: Understand private env variable usage

   Private environment variables are only available on the server side and cannot be imported into client-side code.

2. Step 2: Recognize build error cause

   Importing private variables in a component that runs in the browser causes build errors because secrets must stay server-only.

3. Final Answer:

   Private variables cannot be imported in client-side code -> Option C

4. Quick Check:

   Private vars are server-only [OK]

Hint: Private vars only on server, not client [OK]

Common Mistakes:

• Adding PUBLIC_ prefix to private vars
• Using dynamic public import for private vars
• Assuming missing .env declaration causes build error

5. You want to show a greeting message in your Svelte app that changes based on a public environment variable PUBLIC_GREETING. You also want to update this message without rebuilding the app. Which approach should you use?

hard

A. Import PUBLIC_GREETING from $env/static/public and use it directly

B. Import PUBLIC_GREETING from $env/dynamic/public and use it in your component

C. Store PUBLIC_GREETING in a local variable inside the component

D. Hardcode the greeting message in the component

Solution

1. Step 1: Understand static vs dynamic public env variables

   Static public variables are fixed at build time, so changes require rebuilding the app.

2. Step 2: Use dynamic public env for runtime updates

   Dynamic public variables from '$env/dynamic/public' reflect environment changes without rebuilding, ideal for updating messages.

3. Final Answer:

   Import PUBLIC_GREETING from $env/dynamic/public and use it in your component -> Option B

4. Quick Check:

   Dynamic public env allows runtime updates [OK]

Hint: Use $env/dynamic/public for runtime env changes [OK]

Common Mistakes:

• Using static public import for dynamic needs
• Storing env vars in local variables without import
• Hardcoding messages instead of using env vars