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.
