Deploying

This app is a static SPA — npm run build produces a dist/ folder that you can deploy to any static host.

Build the app

Run the build command

npm run build

This runs tsc -b to type-check your project, then bundles everything with Vite. Output goes to the dist/ directory.

Preview the production build locally

npm run preview

Vite serves the dist/ folder at http://localhost:4173 so you can verify everything works before deploying.

Because the app uses React Router with the HTML5 History API, your host must serve index.html for every route — not just /. Without this, refreshing a page like /features returns a 404. Each platform section below explains exactly how to configure this.

Deployment options

Netlify
Vercel
GitHub Pages
Cloudflare Pages
Other static hosts

Option 1 — drag and drop

Build the app

npm run build

Drop the dist/ folder

Go to netlify.com/drop and drag your dist/ folder onto the page.

Option 2 — connect a GitHub repo

Import your repo

In the Netlify dashboard, click Add new site → Import an existing project and connect your GitHub repository.

Configure build settings

Set the following:

Build command: npm run build
Publish directory: dist

Deploy

Click Deploy site. Netlify rebuilds on every push to the main branch.

SPA routing — required stepCreate the file public/_redirects with this content:

public/_redirects

/* /index.html 200

This tells Netlify to serve index.html for every path, which lets React Router handle routing on the client.

Import your repo

Go to vercel.com, click Add New Project, and import your GitHub repository.

Configure build settings

Select Vite as the framework preset. Vercel auto-populates:

Build command: npm run build
Output directory: dist

Deploy

Click Deploy. Vercel automatically handles SPA routing — no redirect configuration needed.

Vercel detects the Vite framework automatically and configures SPA routing for you. You do not need to add any redirect files.

Build the app

npm run build

Set the base path (subdirectory deploys only)

If you are deploying to username.github.io/repo-name rather than a custom domain, set the base option in vite.config.ts:

vite.config.ts

export default defineConfig({
  base: '/repo-name/',
  // ...rest of config
})

Skip this step if you are using a custom domain at the root.

Handle SPA routing with a 404.html trick

Copy dist/index.html to dist/404.html. GitHub Pages serves 404.html when a path is not found, and React Router takes over from there.

cp dist/index.html dist/404.html

Deploy to the gh-pages branch

Push the contents of dist/ to the gh-pages branch. The easiest way is with the gh-pages npm package:

npm install --save-dev gh-pages
npx gh-pages -d dist

Enable GitHub Pages

In your repository settings, go to Pages and set the source to the gh-pages branch.

Connect your repo

In the Cloudflare dashboard, go to Workers & Pages → Create → Pages and connect your GitHub repository.

Configure build settings

Set the following:

Build command: npm run build
Build output directory: dist

Add an SPA redirect rule

Create the file public/_redirects with this content:

public/_redirects

/* /index.html 200

Cloudflare Pages respects the same _redirects format as Netlify.

Deploy

Click Save and Deploy. Cloudflare Pages rebuilds on every push.

Any host that can serve static files can deploy this app.

Build the app

npm run build

Upload the dist/ folder

Upload the entire contents of dist/ to your hosting provider.

Configure 404 fallback for SPA routing

Configure your host to serve index.html in response to any 404 request. The exact setting varies by platform — look for options like “custom 404 page”, “error document”, or “fallback document”.

Static assets in the public/ directory (like vite.svg) are copied to dist/ during the build and served at the root path.

Development

Deployment

Build the app

Deployment options

Next steps

Troubleshooting

Adding pages

Build docs developers (and LLMs) love

Development

Deployment

​Build the app

​Deployment options

​Next steps

Troubleshooting

Adding pages

Build docs developers (and LLMs) love

Build the app

Deployment options

Next steps