Skip Navigation

Scott Spence

SvelteKit .env secrets

2 min read
Hey! Thanks for stopping by! Just a word of warning, this post is almost 3 years old, . If there's technical information in here it's more than likely out of date.

So SvelteKit is super awesome n’ all and the best thing ever but have you ever tried to use a .env secret that you didn’t want exposed on the client?

SvelteKit uses Vite and it has a specific way to reference Env Variables and Modes, you reference a .env variable with:


The VITE_* prefix means in SvelteKit it makes that variable available on the client.

What if you have a secret key?

So if you want a secret key that’s not exposed to the client then, what? Remove the VITE_* prefix? Well, no, so, how to have secrets??

The answer is don’t use Vite and instead use something to load the variables from the .env file.

Use env-cmd or dotenv or whatever you want to use to ensure the runtime process.env is populated in dev.


Here I have defined my .env file at the root of my project:


Then I’ve created a secret.js file to access my secret:

export const API_URL = process.env['SUPER_SECRET_SECRET']

Then I’ve added env-cmd to my dev script in my package.json so that process.env has the super secret secret populated:

"scripts": {
  "dev": "env-cmd svelte-kit dev",

Now I can access my super secret secret and have client side variables too.


There’s another option to use which I found on the Blog by Hideckies in their example it’s a svelte.config.js change:

const config = {
  kit: {
    // ...
    vite: {
      define: {
        'process.env': process.env,

export default config

Check out the post linked earlier for more info!


A kind thank you to Discord users Xyo and especially saikatdas0790 on the Svelte Discord svelte-kit channel for helping me out with this!

There's a reactions leaderboard you can check out too.

Copyright © 2017 - 2024 - All rights reserved Scott Spence