Environment variables ($env) in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are environment variables in Svelte?

Environment variables are special values set outside your code that your app can use to store settings like API keys or mode (development or production). They help keep sensitive info safe and make your app flexible.

intermediate

How do you access environment variables in SvelteKit using $env?

You import <code>$env/static/private</code> or <code>$env/static/public</code> to access variables at build time, or <code>$env/dynamic/private</code> and <code>$env/dynamic/public</code> for runtime access. Public variables start with <code>PUBLIC_</code> and are safe to expose to the browser.

beginner

Why should environment variables starting with PUBLIC_ be used carefully?

Variables starting with PUBLIC_ are exposed to the browser, so they should not contain secrets like passwords or private keys. Use them only for safe, public info like API URLs.

intermediate

What is the difference between static and dynamic environment variables in SvelteKit?

Static variables are replaced at build time and cannot change after. Dynamic variables are read at runtime, allowing changes without rebuilding the app.

beginner

How do you add environment variables to your SvelteKit project?

Create a .env file in your project root and add variables like API_KEY=12345. Then restart the dev server to load them. Use PUBLIC_ prefix for variables you want available in the browser.

Which prefix should you use for environment variables that need to be accessible in the browser in SvelteKit?

A PRIVATE_

B PUBLIC_

C SECRET_

D CLIENT_

Only variables starting with PUBLIC_ are exposed to the browser in SvelteKit.

Where do you import static environment variables from in SvelteKit?

A process.env

B $env/dynamic/private or $env/dynamic/public

C import.meta.env

D $env/static/private or $env/static/public

Static environment variables are imported from $env/static/private or $env/static/public in SvelteKit.

What happens if you change a static environment variable after building your SvelteKit app?

A The variable is ignored

B The app updates automatically

C The app must be rebuilt to see the change

D The app crashes

Static variables are baked into the build, so you must rebuild the app to apply changes.

Which file do you typically use to define environment variables in a SvelteKit project?

A .env

B config.js

C package.json

D index.html

Environment variables are usually defined in a .env file at the project root.

Why should secret keys NOT be prefixed with PUBLIC_ in SvelteKit?

A Because PUBLIC_ variables are exposed to the browser

B Because PUBLIC_ variables are ignored

C Because PUBLIC_ variables are encrypted

D Because PUBLIC_ variables are only for server use

PUBLIC_ variables are sent to the browser, so secrets should never use this prefix.

Explain how to use environment variables in a SvelteKit app, including how to keep secrets safe.

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

Describe the difference between static and dynamic environment variables in SvelteKit and when to use each.

Consider when your app needs to read the variable.