Environment Variables in SvelteKit and Vercel

This post is from my blog.

---

When using environment variables in web apps, we use it as process.env.YOUR_ENV in most cases.

I wrote about deploying SvelteKit app with Vercel in the previous post.
In this post, I tell you about using environment variables in SvelteKit and using them in Vercel as process.env.

1. Create a .env file

At first, create a .env file in your project root and then add some variables. For example:

// .env
VITE_MY_API_KEY="<MY_API_KEY>"
VITE_MY_URL="<MY_URL>"

Note that you should add prefix VITE_ to your variables. This is because SvelteKit uses Vite under the hood.

I recommend you add .env to .gitignore by the way.

2. Using environment variables in SvelteKit

Convert variables so that it can be used in your project.
For example, create Env.js in lib directory and declare them.
Note that the file name(here Env.js) is arbitrary, but not a .svelte file.

 javascript
// src/lib/Env.js
export const MY_API_KEY = import.meta.env.VITE_MY_API_KEY;
export const MY_URL = import.meta.env.VITE_MY_URL;

import.meta.env is the object in Vite.

You can now use them in your project.

 javascript
// sample.svelte
import { MY_API_KEY } from '$lib/Env';

console.log(MY_API_KEY);

3. Using them as process.env in Vercel app

To use your environement variables as process.env in Vercel, you should add the setting in svelte.config.js.

 javascript
// svelte.config.js

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

export default config;

Check the following settings compilerOptions.paths of jsconfig.json. If not, add it.

 javascript
// jsconfig.json
{
    // ...
    "compilerOptions": {
        "baseUrls": ".",
        "paths": {
            "$lib": ["src/lib"],
            "$lib/*": ["src/lib/*"]
        }
    },
    // ...
}

Finally, although I don’t know this is the best practice, use them as follow for instance:

 javascript

// sample.svelte

import { MY_API_KEY } from '$lib/Env';

let myApiKey;

if (process.env.NODE_ENV === 'production') {

    // For production

    myApiKey = process.env.MY_API_KEY;

} else {

    // For development

    myApiKey = MY_API_KEY;

}

1. Configuration in Vercel

*See this article for how to deploy your app in Vercel.

Add your environment variables in the Vercel Settings.

5. Done

You can now use process.env in SvelteKit app hosted with Vercel.

Comments

[Kelvin Ng]

I first get it done by using your checking NODE_ENV approach. Later I found other using dotenv package to achieve similar result. source

npm i dotenv
and then

import dotenv from 'dotenv'
dotenv.config()
let {VAR1, VAR2} = process.env

no need to change any config files, the same code apply to both development and production env. Eliminated the need to check NOED_ENV at run time.

[Daniel Rios]

I like this method too, the downsides is that you need to add a package for production and import dotenv/config in every single file you use it.

But the good thing is that you can still use the VITE_ prefixed variables on the client, and non-prefixed ones in the server in files files hooks and endpoints, without the client know about them.

I only think VITE shoud expose non-prefixed ones to server only automatically, and VITE_ prefixed ones to both server and client, I simply don't know why on earth this isn't the default behaviour.

[Ross Robino]

Thanks for this article it helped me get set up with env variables.

With recent sveltekit updates I had to remove define:{... from the svelte config file and put it into vite.config.js:

...
const config = {
        plugins: [sveltekit()],
        define: {
                'process.env': process.env
        },
...

I also saw this come out recently, looks like it could be a new way to deal with env variables.
kit.svelte.dev/docs/modules#$env-d...