Environment variables in SvelteKit

What are environment variables?

Environment variables are named variables which change the way our application runs. This enables us to have multiple environments, with different databases etc, without requiring any code changes.

Why & when should I use environment variables?

Use environment variables to differentiate between environments (product, preview, dev, etc.) for things such as:

• database credentials and urls
• publishable keys (e.g. with supabase, the anon and url)
• secrets (e.g. with stripe, the secret key)

For example, we generally have a separate database for production and development. Our environment variable for DATABASE_URL locally could be DATABASE_URL=dbdev.ourapp.com while our deployed application would have DATABASE_URL=dbprod.ourapp.com.

Where do environment variables live?

They are stored in a .env file, or some variation of that such as .env.local, etc. My preference is to use .env.

.env files must not be added to version control - so make sure they are in our .gitignore.

.gitignore

...
.env

Because these are kept out of version control, it is common to pair every .env file with a .env.example file showing what it should contain. The example file should be version controlled.

What does a .env file look like?

An environment variable file is plaintext.

Below is a mockup of .env and .env.example for a simple application using supabase and stripe.

.env

VITE_SUPABASE_URL=https://abcdefg.supabase.co
VITE_SUPABASE_ANON_KEY=eyJdfdnuu3e3ej3Wjew.eyJewqedsa
VITE_STRIPE_PUBLIC_KEY=pk_test_24mk3szSd4233
STRIPE_SECRET_KEY=sk_test_24mfdsk3E4r

.env.example

VITE_SUPABASE_URL=https://xxxxxx.supabase.co
VITE_SUPABASE_ANON_KEY=<jwt_token>
VITE_STRIPE_PUBLIC_KEY=<stripe_public_key>
STRIPE_SECRET_KEY=<stripe_secret_key>

OK, so what’s different about them with SvelteKit?

Public / publishable keys

SvelteKit uses Vite which provides access to environment variables via ({}).VAR_NAME.

({}).VAR_NAME is limited to public/publishable keys which are prefixed with VITE_.

Importing the two publishable supabase keys from the example above would be:

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

Secret keys

But what if we want to make use of a secret key which shouldn’t be exposed to the world. Such as our STRIPE_SECRET_KEY?

We can do so by adding the dotenv package to our application dependencies.

npm install dotenv
or
yarn add dotenv

Now, wherever we need to access our secrets, we import the package and point it at our environment variable file.

This example is a snippet from initialising stripe

src/lib/utils/stripe.ts

...
import dotenv from 'dotenv';

// dotenv.config looks for a .env file in the project's root
// directory. If using a .env.local etc or a file in a
// subdirectory a path must be specified
// e.g. dotenv.config({ path: '.env.local' });
dotenv.config();

const stripeSecretKey = process.env['STRIPE_SECRET_KEY'] as string;
...

Now our application can access our secret environment variables.