DEV Community

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

Posted 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:

VITE_FIREBASE_APIKEY="----"
VITE_FIREBASE_AUTH_DOMAIN="---"
VITE_FIREBASE_PROJECT_ID="---"
VITE_FIREBASE_STORAGE_BUCKET="---"
VITE_FIREBASE_MESSAGING_SENDER_ID="---"
VITE_FIREBASE_APP_ID="---"
VITE_FIREBASE_MEASUREMENT_ID="---"
VITE_DGRAPH_ENDPOINT="---"
Enter fullscreen mode Exit fullscreen mode

Step 4

  • Create your configuration file.

Example: src/config.ts

export let firebase_config: any;
export let dgraph_config: any;

let process: any;

if (process && process.env) {
    dgraph_config = process.env.VITE_DGRAPH_ENDPOINT;
    firebase_config = {
        "apiKey": process.env.VITE_FIREBASE_APIKEY,
        "authDomain": process.env.VITE_FIREBASE_AUTH_DOMAIN,
        "projectId": process.env.VITE_FIREBASE_PROJECT_ID,
        "storageBucket": 
          process.env.VITE_FIREBASE_STORAGE_BUCKET,
        "messagingSenderId": 
          process.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
        "appId": process.env.VITE_FIREBASE_MEASUREMENT_ID,
        "measurementId": process.env.VITE_DGRAPH_ENDPOINT
    };
} else {
    dgraph_config = import.meta.env.VITE_DGRAPH_ENDPOINT;
    firebase_config = {
        "apiKey": import.meta.env.VITE_FIREBASE_APIKEY,
        "authDomain": import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
        "projectId": import.meta.env.VITE_FIREBASE_PROJECT_ID,
        "storageBucket": 
          import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
        "messagingSenderId":
          import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
        "appId": import.meta.env.VITE_FIREBASE_MEASUREMENT_ID,
        "measurementId": import.meta.env.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": [
            "vite/client"
        ]
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,

J

Discussion (0)