Environment variables / $env/static/public • Svelte Tutorial

Advanced SvelteKit Environment variables $env/static/public

Some environment variables can be safely exposed to the browser. These are distinguished from private environment variables with a PUBLIC_ prefix.

Add values to the two public environment variables in .env:

PUBLIC_THEME_BACKGROUND="steelblue"
PUBLIC_THEME_FOREGROUND="bisque"

Then, import them into src/routes/+page.svelte:

src/routes/+page

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

<script lang="ts">
	const PUBLIC_THEME_BACKGROUND = 'white';
	const PUBLIC_THEME_FOREGROUND = 'black';
	import {
		PUBLIC_THEME_BACKGROUND,
		PUBLIC_THEME_FOREGROUND
	} from '$env/static/public';
</script>

Edit this page on GitHub

previous next

$env/dynamic/private $env/dynamic/public

<script>

	const PUBLIC_THEME_BACKGROUND = 'white';

	const PUBLIC_THEME_FOREGROUND = 'black';

</script>

<main

	style:background={PUBLIC_THEME_BACKGROUND}

	style:color={PUBLIC_THEME_FOREGROUND}

	{PUBLIC_THEME_FOREGROUND} on {PUBLIC_THEME_BACKGROUND}

</main>

<style>

	main {

		position: fixed;

		display: flex;

		align-items: center;

		justify-content: center;

		left: 0;

		top: 0;

		width: 100%;

		height: 100%;

		font-size: 10vmin;

</style>

show text show editor