vite-spa-nginx-deployment

What problem does it solve?

Deploying a Vite React SPA with nginx as a static file server is prone to common, hard-to-debug issues: broken client-side routing (e.g., 404 errors on page refresh, broken password reset email links), nginx permission errors that block access to static files, stale cached assets after deployments, infinite rewrite loops for SPA fallback, and misconfigured backend proxies that return 404s for API routes.

Core Features & Use Cases

• Stable nginx SPA Configuration: Provides a named location pattern for SPA fallback that avoids infinite rewrite cycles, plus static asset caching rules for optimal performance.
• React Routing Fix: Guides you to switch to HashRouter to ensure email links (like password reset or email verification) work correctly without server-side route support.
• Permission & Deployment Guidance: Includes steps to fix www-data file permissions for nginx access, Docker deployment workflows to avoid stale assets, and reverse proxy configuration for separate backend API services.
• Use Case: For example, if you are deploying a customer-facing React app built with Vite, this skill ensures users can refresh pages, click email links, and access backend APIs without 404 errors or permission issues.

Quick Start

Use the vite-spa-nginx-deployment skill to configure nginx to serve your Vite React SPA's dist/ folder, set up HashRouter for email links, fix www-data file permissions for the static file directory, and deploy the app without common routing or permission errors.