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.