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.