Environment variables ($env) in Svelte - Mini Project: Build & Apply

Using Environment Variables in Svelte

📖 Scenario: You are building a simple Svelte app that shows a greeting message. The greeting text should come from an environment variable to keep it flexible and secure.

🎯 Goal: Create a Svelte component that reads a greeting message from an environment variable and displays it on the page.

📋 What You'll Learn

Create an environment variable named PUBLIC_GREETING with the value Hello from environment!

Import the environment variable using $env/static/public in the Svelte component

Display the greeting message inside an <h1> tag

Ensure the component updates correctly when the environment variable changes

💡 Why This Matters

🌍 Real World

Environment variables are used to store configuration like API keys, URLs, or messages without hardcoding them in your app. This keeps your app flexible and secure.

💼 Career

Knowing how to use environment variables is essential for frontend developers working with frameworks like Svelte, React, or Vue, especially when deploying apps to different environments.

1

Set up the environment variable

Create a file named .env in your project root. Add the line PUBLIC_GREETING='Hello from environment!' exactly as shown.

Svelte

# Your code here

Hint

The environment variable must start with PUBLIC_ to be accessible in Svelte.

2

Import the environment variable in the Svelte component

In src/App.svelte, import PUBLIC_GREETING from $env/static/public using import { PUBLIC_GREETING } from '$env/static/public';.

Svelte

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

Hint

Use $env/static/public to import public environment variables starting with PUBLIC_.

3

Display the greeting message in the component

Add an <h1> tag inside src/App.svelte that displays the imported PUBLIC_GREETING variable using curly braces: <h1>{PUBLIC_GREETING}</h1>.

Svelte

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

{PUBLIC_GREETING}  

Hint

Use curly braces {} to insert JavaScript variables inside Svelte markup.

4

Complete the Svelte component

Ensure the src/App.svelte file exports a default component with the import and the <h1> tag showing PUBLIC_GREETING. The file should start with the import and then the markup.

Svelte

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

{PUBLIC_GREETING}  

Hint

The component is complete when it imports the variable and displays it inside an <h1> tag.

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