Environment variables ($env) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import environment variables from SvelteKit.

Svelte

import { [1] } from '$env/static/private';

Drag options to blanks, or click blank then click option'

Aenv

BenvStatic

CenvPublic

DenvPrivate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'envPublic' or 'envStatic' which are not valid import names.

Trying to import from '$env/static/public' for private variables.

In SvelteKit, environment variables are imported using env from $env/static/private for private variables.

2fill in blank

medium

Complete the code to access a public environment variable named VITE_API_URL.

Svelte

import { [1] } from '$env/static/public';

const apiUrl = [1].VITE_API_URL;

Drag options to blanks, or click blank then click option'

AenvPrivate

BenvPublic

CenvStatic

Denv

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'envPrivate' for public variables.

Trying to access variables without importing them.

Public environment variables are accessed via envPublic imported from $env/static/public.

3fill in blank

hard

Complete the code to correctly import a private environment variable.

Svelte

import { [1] } from '$env/static/private';

const secret = [1].MY_SECRET;

Drag options to blanks, or click blank then click option'

AenvStatic

BenvPublic

Cenv

DenvPrivate

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong import names like 'envPublic' for private variables.

Using 'envPrivate' or 'envStatic' which are not valid.

Private environment variables must be imported from $env/static/private using env.

4fill in blank

hard

Fill both blanks to import and use a public environment variable named VITE_API_KEY.

Svelte

import { [1] } from '$env/static/public';

const apiKey = [2].VITE_API_KEY;

Drag options to blanks, or click blank then click option'

AenvPublic

BenvPrivate

Cenv

DenvStatic

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing private and public environment variable imports.

Using different names for import and usage.

Both import and usage must use envPublic for public environment variables.

5fill in blank

hard

Fill all three blanks to import private env variables and access MY_SECRET and MY_TOKEN.

Svelte

import { [1] } from '$env/static/private';

const secret = [2].MY_SECRET;
const token = [3].MY_TOKEN;

Drag options to blanks, or click blank then click option'

Aenv

BenvPublic

DenvPrivate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'envPublic' or 'envPrivate' instead of 'env'.

Using different names for import and usage.

Private environment variables are imported as env and accessed via the same name.