UPDATE August 8, 2022: SvelteKit now has support for both private and public environment variables without directly using Vite, so please refer to the following docs instead of this article:

• $env/dynamic/private
• $env/dynamic/public
• $env/static/private
• $env/static/public

UPDATE April 13, 2022: the new Svelte FAQ now has this info in it (though I go into a little more detail here in case you're curious)

Setting environment variables in SvelteKit is as simple as creating a .env file at the base of your repo and add some content to it:

VITE_MESSAGE="World"
SOME_PRIVATE_VAR="You can't see me"

Then, in your route or component, use import.meta.env.VAR:

<h1>Hello, {import.meta.env.VITE_MESSAGE}</h1>

Which will get you "Hello, World".

Important note: Keys prefixed with VITE_ will be accessible to your components, routes and endpoints and other JS/TS code. Any key not prefixed cannot be imported to prevent leaking keys unintentionally.

Typescript

If you want to type your env vars in Typescript, you can extend ImportMetaEnv in your global.d.ts file:

interface ImportMetaEnv {
  VITE_MESSAGE: string
}

If you want to use env vars in your endpoints or non-Svelte code and not get TS errors, you'll need to add "module": "es2020" to your tsconfig.json:

{
  "compilerOptions": {
    "module": "es2020",
    // ...
  }
  // ...
}

Security note 🔐

Any environment variable prefixed with VITE_ has the potential to be leaked to the client browser if you use it in your Svelte components. Make sure to do the following to keep potential secrets safe:

• ✅ ALWAYS: Only use secret keys in "endpoints" or other server-side code (e.g. a database connection string, auth token or secret)
• 🛑 NEVER: do something like const env = import.meta.env in a component as now anyone can access all the values attached to env.
• 🛑 NEVER: access your private environment variables in Svelte components or routes (e.g. DON'T do this in a component: console.log(import.meta.env.VITE_DATABASE_URL)).

Vite statically replaces any use of an environment variable so import.meta.env.VITE_FOO will compile down to "foo" assuming your .env has VITE_FOO="foo" in it.

Going further

You can read more about Vite's import.meta.env here

Note: you cannot use dynamic access of keys, e.g. this won't work: import.meta.env["VITE_MESSAGE"]. If you need dynamic variables, a solution would be to use svelte-preprocess's replace setting.

Fin

Well, that's it for today, give this post a 👍 / 🦄 / 🔖 if it was helpful for ya!

Follow me on Dev.to, Twitter and Github for more web dev and startup related content 🤓