About app :-

1. React App

2. created using vite

3. Uses Firebase

4. Deployed on vercel

How am I handling env variables :-

1. I'm setting env variables on vercel (vercel > settings > environment variables )

2. Env variables are basically firebase config variables (like apikey, appid, etc.)

3. For example, one of my env key looks like :- VITE_APIKEY. (I've prefixed all env keys with VITE_).

4. So, this way I don't push my .env file to github. (I'm confused though, on the fact that whether one should make .env file available onto github since I'm directly setting envs on vercel).

5. In my firebase.ts file, I access variables like this :-

const env = import.meta.env;

const firebaseConfig = {apiKey: env.VITE_APIKEY,};

6. (ISSUE) The env variables are not working. This firebase.ts file is pushed to github as it is (and thus vercel). However, in some other discussions, I found env variables being accessed like this :- process.env.VITE_APIKEY. So, I tried setting the firebaseConfig keys in above file by using process.env rather than import.meta.env. But that didn't work. Indeed, in the latter case, I got error saying that the env variable doesn't exist. So, I don't know what am I missing here.

To conclude,

When using import.meta.env.VITE_APIKEY , the website atleast works. Just firebase interaction is not working. (The entire thing works on local).

When using process.env.VITE_APIKEY, nothing works.

Additional Context :- 1. This is how my vite.config.ts file is defined

export default defineConfig({plugins: [react()],})

I'd really be thanful if I could get some help on how can I make my envs work. Also, I can move this question if it wouldn't be relevant in this sub.

I have a very simple Vite React app with no database (it uses Supabase). What's the easiest and possibly cheapest way of deploying it? Note that this is for demonstration purposes only, so I don't expect much traffic (if any at all).

Hey everyone 👋

I’m currently working on a frontend project built with React + Vite + TypeScript.

I’ve read the Vercel docs and noticed that Vercel mainly focuses on Next.js, but I’m wondering if there’s an official or recommended way to deploy Vite-based projects there, especially on the free plan.

Here’s what I’ve tried so far:

•	Built the project using npm run build — everything works fine.

•	The output is in the /dist folder (default for Vite).

•	I saw some mentions that it’s possible to host it on Vercel with static export, but I’m not sure about the right configuration for routing and environment variables.

My questions:

1.	Does Vercel free plan fully support React + Vite projects?

2.	Are there any limitations (build time, bandwidth, or file size)?

3.	If Vercel isn’t ideal, what’s the best free alternative (Netlify, GitHub Pages, Cloudflare Pages, etc.) for Vite apps?

4.	Also, I’ll need a simple free backend — would you recommend something like Render, Railway, or Supabase for small APIs?

Thanks in advance! 🙏 I’d really appreciate any guidance or setup examples.

Hey folks, I am having an intermittent issue when i go to my website that seems to be vercel react issue.

Uncaught SyntaxError: Unexpected token '<' -- seeing this in console

Overall the site works on other peoples computers just seems to not work in prod on mine unless i clear catch.

If I clear clear site data it goes away but seems to come back after a day.