DEV Community

hideckies
hideckies

Posted on • Updated on • Originally published at blog.hdks.org

Environment Variables in SvelteKit and Vercel

#sveltekit #vercel #webdev

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>"
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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/*"]
        }
    },
    // ...
}
Enter fullscreen mode Exit fullscreen mode

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;

}
Enter fullscreen mode Exit fullscreen mode



  1. Configuration in Vercel

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

Add your environment variables in the Vercel Settings.

screenshot

5. Done

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

Top comments (3)

Collapse
 
hoishing profile image
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
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
 
danielrios549 profile image
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.

Collapse
 
rossrobino profile image
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
        },
...
Enter fullscreen mode Exit fullscreen mode

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...

Read next

sandygalabada profile image

Blur page body when hover on Nav Bar

Sandy Galabada -

safdarali profile image

5 Steps You Must Follow to Deploy a React App on Hostinger

Safdar Ali -

igadii profile image

How TypeScript Makes React Better: Smoother Developer Experience, Fewer Bugs (With a useState Example)

Idris Gadi -

alexis_clarembeau_8c3c0e2 profile image

How are responsive websites doing in 2024?

Alexis Clarembeau -