Sveltekit - Environmental Variables

---

---

Environmental Variables in SvelteKit are crucial for managing and storing sensitive information like API keys, database credentials, and other configuration settings. These variables can be categorized into private and public types, with further differences between static and dynamic values.

Static Private Variables

Static private environment variables are defined in a .env file and are available at build time. They can be accessed in server-side code using the $env/static/private module.

Syntax Example

For example, if you define a passphrase in your .env file:

PASSPHRASE="open sesame"

Then, you can import it in your server module like this:

import { PASSPHRASE } from '$env/static/private';

Dynamic Private Variables

Dynamic private variables are accessed using the $env/dynamic/private module and are not available until the application is running. This is especially helpful when you need to read values that may change or are determined at runtime.

Static Public Variables

In SvelteKit, the static public variables are special environmental variables that can be safely shown in the browser. These public variables start with the prefix PUBLIC_ to set them apart from private variables, which should not be shared.

Using Static Public Variables

To use the static public variables follow the steps mentioned below:

• Define Variables in .env File: Firstly, you have to define your public environment variables in a .env file like this:

PUBLIC_THEME_BACKGROUND="steelblue"
    PUBLIC_THEME_FOREGROUND="bisque"

Import Variables in Svelte Component: In your Svelte component such as src/routes/+page.svelte, you have to import these variables as follows:

<script>
    import {
        PUBLIC_THEME_BACKGROUND,
        PUBLIC_THEME_FOREGROUND
    } from '$env/static/public';
</script>

Now, you can use these imported variables to style your component.

Dynamic Public Variables

In SvelteKit, dynamic public variables are environment variables that can be accessed at runtime and are safe to expose to the client side. You can get these variables by importing them from $env/dynamic/public, so you can use them in your components.

Using Dynamic Public Variables

To use the Dynamic public variables follow the steps mentioned below:

• Define Variables: Firstly, you have to define your dynamic public variables in your environment configuration (e.g., .env file) in the following ways:

PUBLIC_THEME_BACKGROUND="steelblue"
    PUBLIC_THEME_FOREGROUND="bisque"

Importing in Svelte Component: Then, In your Svelte component, you can import these variables as mentioned below:

<script>
    import { env } from '$env/dynamic/public';
</script>

Now, you can use these dynamic variables to style your component dynamically

Example

The following example demonstrates the usage of dynamic public variables displaying Hello World on the browser with the background color steel blue and foreground color bisque.

<!--src/.env-->
PUBLIC_THEME_BACKGROUND="steelblue"
PUBLIC_THEME_FOREGROUND="bisque"

<!--src/routes/+page.svelte-->
<script>
    import { env } from '$env/dynamic/public';
</script>

<main style:background={env.PUBLIC_THEME_BACKGROUND} style:color={env.PUBLIC_THEME_FOREGROUND}>
    Hello, World!
</main>

Output