Single-page app (React/Vue/Angular) shows 404 'Not Found' when I refresh or open a deep link like /dashboard/settings directly. How do I add the history fallback on Nginx, S3/CloudFront, Netlify and Vercel?

Cause: with client-side routing (history mode), /dashboard/settings only exists inside the browser. A refresh or a shared link sends that path to the server, which looks for a real file or route, finds none, and returns 404. The server must answer unknown paths with index.html and let the JavaScript router take over, while still serving real files (JS, CSS, images) normally. Fix (pick your host): 1. Nginx: inside the location for the site, try the file, then the directory, then fall back to the app shell: location / { try_files $uri $uri/ /index.html; } The last argument of try_files is the fallback URI used when nothing earlier matches. 2. S3 + CloudFront: a private S3 origin usually answers a missing key with 403 (or 404). In the CloudFront distribution add custom error responses for those status codes, with response page path /index.html and HTTP response code 200. CloudFront lets you return a different status than the origin sent. Be aware this also applies to missing API or asset paths on that distribution, so keep API paths on a separate behavior or origin. 3. Netlify: add a rewrite (status 200, not a redirect) as the last rule, either in a _redirects file with the line /* /index.html 200 or in netlify.toml as [[redirects]] from = "/*", to = "/index.html", status = 200. Existing files win over the rewrite by default. 4. Vercel: add to vercel.json { "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }] }. Vercel gives precedence to the filesystem before rewrites, so real static files are still served. 5. Make sure the app is built with the correct base path if it is not hosted at the domain root (see the router's base option). Don't: serve index.html with a 200 for missing static assets as a blanket rule on a server that cannot tell them apart; it hides real 404s and causes MIME-type errors for scripts. Verify: request a deep link directly (curl -I https://example.com/dashboard/settings) and confirm it returns index.html with status 200, while a nonexistent file such as /assets/missing.js still returns 404. Sources: https://nginx.org/en/docs/http/ngx_http_core_module.html https://docs.netlify.com/manage/routing/redirects/rewrites-proxies/ https://vercel.com/docs/project-configuration/vercel-json https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/custom-error-pages-response-code.html