Overview

This skill guides you through producing a production build of a Vite + React + TypeScript app, validating it locally, and deploying to static hosts. It covers build outputs (dist/), configuring a base path for subpaths, and ensuring SPA history fallback works across common hosts.

How This Skill Works

You build with pnpm build (vite build) to generate the dist/ folder, then use pnpm preview to test the production bundle locally. If deploying under a subpath, configure base in vite.config.ts and ensure the hosting environment supports SPA history fallback. Serve the dist/ directory as static content on the target host.

When to Use It

• Deploying a Vite React-TS app to Vercel, Netlify, GitHub Pages, or a custom static host
• Publishing under a subpath like /app/ or /blog/ and updating base path accordingly
• Ensuring SPA routes fall back to index.html on the hosting provider
• Locally validating the production build with a local static server using pnpm preview
• Documenting host-specific deployment notes and required config changes

Quick Start

1. Step 1: pnpm install
2. Step 2: If deploying under a subpath, update vite.config.ts with base: '/subpath/'
3. Step 3: pnpm build && pnpm preview --port 5000

Best Practices

• Use pnpm build (vite build) for production builds
• Run pnpm preview to validate the production dist/ locally before deployment
• Set base in vite.config.ts when deploying under a subpath
• Configure hosting for SPA history fallback (redirects to index.html)
• Keep dist/ as the static build output and test hosting metadata (assets, base, etc.)

Example Use Cases

• Vercel deployment with base '/myapp/' and SPA routing enabled
• Netlify hosting a subpath site like '/blog/' with proper redirects
• GitHub Pages serving dist/ from a repo page setup
• Custom Nginx setup serving dist/ under '/shop/' with try_files for index.html
• Docker container serving dist/ via a lightweight static server (e.g., nginx) for a subpath

Frequently Asked Questions