Accessing Vercel system env variables from Vite

[mchen10]

Hey all! I’m trying to access the Vercel system env variables from a Vite FE. No matter what I do, they are null though. Here’s what I have right now.

My vite.config.ts is below. Note I have both URLs just because I was testing to see if one would work.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  base: './',
  define: {
    VITE_APP_URL: process.env.VITE_VERCEL_URL,
    VITE_PROD_URL: process.env.VITE_VERCEL_PROJECT_PRODUCTION_URL,
  },
});

My usage looks like this. Super basic. Note I’m trying basically everything that could possibly work (fetching the globally defined Vite vars, as well as just directly trying to read the Vercel env vars). Everything is logged as undefined.

  console.log(import.meta.env.VITE_APP_URL);
  console.log(import.meta.env.VITE_PROD_URL);

  console.log(import.meta.env.VITE_VERCEL_URL);
  console.log(import.meta.env.VITE_VERCEL_PROJECT_PRODUCTION_URL);

If I add a custom key under the Env variables in my project (such as “VITE_TEST”), I can directly read them as “import.meta.env.VITE_TEST” without issue.

Any ideas?

[anshumanb (Anshuman Bhardwaj)]

Hi @mchen10, welcome to the Vercel Community!

I tried to reproduce the issue but couldn’t. I can access the variables both locally and in production.

Here’s my code:

Here’s local output:

Vercel environment variables:

Here’s on production:

Also, when using env variables in the Vite config you must follow these docs because Vite doesn’t load env variables in the config automatically.

[mchen10]

Hey! I don’t mean custom env variables, I mean the system env variables defined here: System environment variables. These shouldn’t be set in the .env file manually right?

[anshumanb (Anshuman Bhardwaj)]

Oh sorry. I see what you mean now.

But I was able to access Vercel System environment variables, as follows:

For more information, see Vite on Vercel

[mchen10]

Am I going crazy?? I copied your code exactly

[anshumanb (Anshuman Bhardwaj)]

Hi @mchen10, sorry that it didn’t solve this issue.

Can you please share your public repo or a minimal reproducible example. That will let us all work together from the same code to figure out what’s going wrong.

[mchen10]

Ok I managed to figure it out. I have no idea why, but in my build, I need to not append “VITE” to the env var. So defining the global var in my build config as

VITE_APP_URL: JSON.stringify(process.env.VERCEL_URL),

works, but using process.env.VITE_VERCEL_URL doesn’t. Strange!

[anshumanb (Anshuman Bhardwaj)]

Hi @mchen10, that’s weird. I’ll try to reproduce this. Can you share your package.json?

Are you able to reproduce the same issues in a fresh Vite project? Because this one has some plugins configured.

[anshumanb (Anshuman Bhardwaj)]

Hi @mchen10, I was able to use VITE_ENV: JSON.stringify(process.env.VERCEL_ENV) without the VITE prefix as well.