DEV Community

Cover image for Sharing Secret Environment Variables with SvelteKit and Vercel
Jonathan Gamble
Jonathan Gamble

Posted on • Updated on

Sharing Secret Environment Variables with SvelteKit and Vercel

If you deploy with Vercel, you know how easy it is to to work with. Sometimes you want to hide certain environment variables from your users. In this example, I am going to use the Firebase Api keys, although they do not necessarily need to be secured.

Step 1

  • Create .env file at the root of your sveltekit project

Step 2

  • Add this file .env to your .gitignore file

Step 3

  • Add the environment variables you want to secure to the file with the VITE_ prefix.

SvelteKit with vite imports the dotenv package under the hood.

Example .env file:

Enter fullscreen mode Exit fullscreen mode

Step 4

  • Create your configuration file.

Example: src/config.ts

let process: any;

const p = process?.env ? process.env : import.meta.env;

export const dgraph_config = p.VITE_DGRAPH_ENDPOINT;
export const firebase_config = {
    "authDomain": p.VITE_FIREBASE_AUTH_DOMAIN,
    "projectId": p.VITE_FIREBASE_PROJECT_ID,
    "storageBucket": p.VITE_FIREBASE_STORAGE_BUCKET,
    "measurementId": p.VITE_DGRAPH_ENDPOINT
Enter fullscreen mode Exit fullscreen mode
  • SvelteKit uses import.meta.env.VITE_YOUR_VARIABLE as a way to automatically import any file with .env.

  • Vercel uses process.env.YOUR_VARIABLE to import the environments.

  • You don't need the VITE_ prefix in Vercel, I just kept it for consistency.

Step 5 - Typescript Users

  • If you use typescript (why you wouldn't is beyond me) and you get a type error with import.meta.env, add this to tsconfig.json:
    "compilerOptions": {
        "types": [
Enter fullscreen mode Exit fullscreen mode

Step 6 - Vercel

  • Add your equivalent variables to your Vercel Project under Settings --> Environment Variables:

Vercel Environment

Step 7

Finally, import the code in any file you want to use it in:

import { firebase_config } from '../config';
Enter fullscreen mode Exit fullscreen mode

Note: If you want to test production and dev versions on your local machine, you could also use dev to detect which mode you're in:

import { dev } from '$app/env';
Enter fullscreen mode Exit fullscreen mode

Hope this helps someone,


Top comments (2)

revazsurg profile image
Revaz Surguladze • Edited

Just wondering whether the let process declaration in src/config.ts would shadow the global process object and therefore the p constant would always be assigned import.meta.env?

jdgamble555 profile image
Jonathan Gamble

The let declaration is so that Typescript does not throw an error. Vercel will set the process variable as expected. The ? checks whether or not it is undefined. The let keyword does not actually set it to a value.