Using environment variables in SvelteKit (and Vite)
Tags: svelte, sveltekit, javascript, webdev
Published: 2021-04-05 20:28:00

**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](https://kit.svelte.dev/docs/modules#$env-dynamic-private)
- [$env/dynamic/public](https://kit.svelte.dev/docs/modules#$env-dynamic-public)
- [$env/static/private](https://kit.svelte.dev/docs/modules#$env-static-private)
- [$env/static/public](https://kit.svelte.dev/docs/modules#$env-static-public)

**UPDATE April 13, 2022:** the [new Svelte FAQ](https://kit.svelte.dev/faq#how-do-i-use-environment-variables) 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:

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

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

```html
<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:

```ts
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`:

```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](https://vitejs.dev/guide/env-and-mode.html)

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](https://github.com/sveltejs/svelte-preprocess#replace-values).

---

# Fin

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

_Follow me on [Dev.to](https://dev.to/danawoodman), [Twitter](https://twitter.com/DanaWoodman) and [Github](https://github.com/danawoodman) for more web dev and startup related content_ 🤓