## The Invisible Bug That Broke My React Deployment (and What It Taught Me)

I thought deploying a React app would be the easiest part of the project—until my production build went live and… a blank screen appeared. No errors in the browser. No crashes in the console. Just silence.

Locally, everything worked perfectly. npm start was fine. But once deployed to GitHub Pages/Vercel, the app simply refused to render. That’s when I realized the problem wasn’t React—it was the deployment assumptions I had made.

After hours of debugging, I found the culprit hiding in plain sight: incorrect routing configuration and missing homepage setup in package.json. React Router was trying to handle routes as if it was running on a server, but static hosting doesn’t work that way by default.

// Fix for React Router on static hosting
<BrowserRouter basename={process.env.PUBLIC_URL}>

And in package.json:

"homepage": "https://your-username.github.io/repo-name"

That tiny line fixed everything.

Lesson learned:

Deployment isn’t just “uploading code”—it’s understanding the environment your code runs in. React apps behave differently when they lose their server context.

Now I always ask myself before deploying:

• Will this run on a static server?
• Do I need routing adjustments?
• Did I test the production build locally (npm run build && serve build)?

A simple mistake turned into a valuable reminder: production is a different world than development.