How to use env variables in utility functions used by both client and main process?

[igorlanko]

For example I have a src/utils/supabase.ts file that can be called by both App.svelte and src/main/index.ts:

import { createClient } from '@supabase/supabase-js'

let supabaseUrl: string
let supabaseKey: string

if (typeof window !== 'undefined' && import.meta.env) {
   console.log('Loading envs for client...')

   supabaseUrl = import.meta.env.VITE_SUPABASE_URL
   supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY
} else {
   console.log('Loading envs for server...')

   supabaseUrl = process.env.VITE_SUPABASE_URL!
   supabaseKey = process.env.VITE_SUPABASE_ANON_KEY!
}

if (!supabaseUrl || !supabaseKey) {
   throw new Error('Missing Supabase credentials')
}

export const supabase = createClient(supabaseUrl, supabaseKey)

export const getSession = async () => {
   const session = await (await supabase.auth.getSession()).data.session

   return session
}

I'm not sure I understood this correctly https://electron-vite.org/config/#environment-variables, but I've forwarded the variables over to the processes, even though they're VITE_ prefixed.

export default defineConfig(({ mode }) => {
   const env = loadEnv(mode)

   return {
      main: {
         plugins: [externalizeDepsPlugin()],
	   define: {
	      VITE_SUPABASE_URL: JSON.stringify(env.VITE_SUPABASE_URL),
	      VITE_SUPABASE_ANON_KEY: JSON.stringify(env.VITE_SUPABASE_ANON_KEY),
	      VITE_APP_URL: JSON.stringify(env.VITE_APP_URL),
	      VITE_API_URL: JSON.stringify(env.VITE_API_URL)
	   }
	},
	preload: {
	   plugins: [externalizeDepsPlugin()],
	   define: {
	      // same thing as in main
	   }
         },
	renderer: {
	   plugins: [svelte()],
	   define: {
	      // same thing as in main
	   }
	}
   }  
})

I've created two .env.production and .env.development.local files. While if I use process.env.VITE_SUPABASE_URL in the main process for example, it has no issues accessing it.

However the supabase util function throws error when trying to reach process.env when it's called by the main process.

What am I doing wrong? How to set variables properly so that they're accessible by client & processes simultaneously?

---

Making sort of a “proxy” for VITE_SUPABASE_URL: JSON.stringify(env.VITE_SUPABASE_URL), like 'process.env.VITE_SUPABASE_URL': JSON.stringify(env.VITE_SUPABASE_URL) makes it work I guess, but feels like I'm reinventing the wheel.

[alex8088]

In the main process, also use import.meta.env instead of process.env.

[igorlanko]

Hey @alex8088! So basically use import.meta.env everywhere? Specify VITE_ prefix in env and it should be used in both client & main/preload with import.meta.env?