The Dreaded Friday Afternoon Deployment
Every software developer knows the feeling: the app compiles flawlessly on your local machine, but the moment you push to Vercel or your production server, users see a blank white screen or get HTTP 404 errors when refreshing inner pages.
The Most Common Deployment Traps & How to Fix Them:
1The SPA Refresh 404 Trap:
*Problem:* In a React Single Page Application, navigating to
/about works via internal router links. But when a user hits browser refresh on https://domain.com/about, the static server searches for a file named /about/index.html that does not exist and throws a 404.*Fix:* Configure rewrite rules. On Netlify, create a
public/_redirects file containing: /* /index.html 200. On Nginx, configure: try_files $uri /index.html;.2Stale Asset Caching:
*Problem:* You push a critical bug fix, but existing users still experience the bug because their browser cached the old
index.js bundle for 30 days.*Fix:* Use content-hashed filenames in Vite (e.g.
index-C4x8a.js) and set your HTML document to Cache-Control: no-cache, while static hashed assets are cached immutably with max-age=31536000, immutable.3CORS (Cross-Origin Resource Sharing) Errors:
*Fix:* Ensure your backend API explicitly whitelists the exact production protocol and domain name:
https://korvith.com (including handling OPTIONS preflight requests).