React + Vite on Vercel

TL;DR: Deploying a React + Vite app on Vercel turned into a case-sensitive filename fiasco. Takeaway? Deploy early, keep your naming consistent, and don’t trust Vite’s local chill vibes to match Vercel’s picky CI/CD.

Act 1: Vercel, You Seductive Siren

Vercel’s my ride-or-die. Free tier, one-click deploys, live in a heartbeat—I’ve hurled frontends, Next.js monstrosities, and half-baked ideas onto it like it’s my personal canvas. So when I decided to build a no-frills, single-page React app, I ditched Create React App (seriously, it’s deprecated—stop following those 2018 tutorials; even React’s website yeeted it) and grabbed Vite instead. Fast, modern, no Next.js bloat—I thought, “Vercel’s got this.” Cue the ominous music.

Act 2: The camelCase Conspiracy

I’m a folder-structure snob, molded by YouTube code binges and Shadcn’s gospel. Subfolders for related components? Yup. index.ts exports? You bet. camelCase filenames like input.tsx and commandResult.tsx because PascalCase feels like it’s shouting at me? Hell yeah. My src/ was chef’s-kiss gorgeous:

src/
├── components/
│   ├── input/
│   │   ├── index.ts
│   │   ├── input.tsx
│   ├── output/
│   │   ├── commandExecuted.tsx
│   │   ├── commandResult.tsx
├── lib/
│   ├── formatInputToCommand.ts
├── App.tsx
├── main.tsx

Vite locally was like, “Sweet, dude, we’re golden.” Built fine, ran like a dream. Deploy time: vercel add → deploy. Then—BOOM. A TypeScript error about missing import aliases. I stared at the screen, wondering if I’d accidentally joined a horror movie.

Act 3: Debugging Like a Mad Detective

“Is it the aliases? Shadcn uses them!” Nope. “The camelCase? Vite didn’t flinch locally!” Renamed to Input.tsx, redeployed—still busted. AI was as helpful as a wet sock—“Check your tsconfig, lol.” I could’ve manually uploaded the dist folder like some prehistoric hack, but I’m not here to play caveman. So, I debugged. Hours of commenting code, redeploying, and yelling at my monitor later, I started over.

New Vite + Shadcn project, deployed early—worked. Added a folder with index.ts—worked. Then, epiphany: folders with index.ts exports need PascalCase (Input/, not input/). Vite’s cool with chaos locally, but Vercel’s CI/CD is a stickler. Half a day torched, and I’m glaring at my code like it owes me rent.

Act 4: Wisdom From the Wreckage (and a Dopamine Hit)

What did this React + Vite + Vercel nightmare teach me? Deploy early—catch those production gremlins before you’re too deep. Pick a naming vibe (camelCase or PascalCase) and stick to it—mixing and matching from other codebases is a recipe for pain. And when errors hit, debug like it’s 2015—because in this AI-saturated era, the charm of wrestling a bug for hours and feeling that sweet, sweet dopamine rush when it’s fixed is what coding’s all about. Sure, you could prompt an AI to “VIBE code” it away, but where’s the fun in that? The real win is the learning that never stops—best practices like early deploys are gold, even if they come with a side of rage.

Wanna see the carnage for yourself? Check out the GitHub repo and the site term.ofcljaved.com Proof I survived—and so can you.