This is a common issue with SPAs which occurs while working with child paths/routes. This is not specific to vercel and even occurs on other platforms as well, Here is something you can try with vercel:
Create a vercel.json file within the root folder of your project. Add this config to the file:
{
"rewrites": [
{ "source": "/(.*)", "destination": "/" }
]
}
As mentioned in this doc as well:
Answer from Chinz on Stack Overflow"rewrites" specifies the rules for URL rewrites.
{ "source": "/(.*)", "destination": "/" }tells Vercel that for any URL path that matches/(.*)(essentially any path), redirect the request to the root path (/).
reactjs - How to deploy React TypeScript app to Vercel with Vite - Stack Overflow
Deploying Vite react app on Vercel doesn't show up Firebase related env variables
Cheapest and easiest way to deploy a simple Vite React app?
express - How to deploy a Vite + React SSR application on Vercel? - Stack Overflow
Videos
About app :-
React App
created using vite
Uses Firebase
Deployed on vercel
How am I handling env variables :-
I'm setting env variables on vercel (vercel > settings > environment variables )
Env variables are basically firebase config variables (like apikey, appid, etc.)
For example, one of my env key looks like :-
VITE_APIKEY. (I've prefixed all env keys withVITE_).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).
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.