How to deploy a Vite React app.

The short answer

To deploy a Vite React app, give your coding agent the sentence below. Antideploy sees Vite in your package.json, runs npm run build, and serves the output folder, dist by default, as a static site. It is free on every plan and never counts against your apps or deploys.

What Antideploy detects

• Vite. Detected from the vite dependency. Create React App, Astro, Gatsby and SvelteKit with the static adapter are treated the same way.
• The build. It needs a build script in package.json, such as vite build. Without one there is no output folder, and Antideploy says so.
• The output folder. dist, or the outDir your Vite config sets.
• The start script. A start script that only runs a development server, such as vite or vite preview, is ignored. A real server script, such as node server.js, is kept and the project becomes an app with a server.

Variables in a Vite app

Vite copies variables that start with VITE_ into the built files while it builds. That has two effects.

• Set a VITE_ variable before the build, because setting it afterwards cannot repair a build that already ran without it
• Anyone who loads your site can read a VITE_ variable, so never put a secret in one
• Secrets belong on a server, behind an API your app calls

Pages, links and refresh

React Router and similar libraries change the address in the browser without asking the server. If someone refreshes on /dashboard, the server has no file called dashboard. The server that hosts your files sends index.html for any address without a file extension, so your app loads and its router takes over. A missing file with an extension, such as a missing image, returns a 404.

Talking to an API

Do not use localhost for the API address, because on a visitor's computer localhost is their own machine. Read the address from a VITE_ variable, or use a relative path when the API is on the same site. If the API is a separate Antideploy app, it must allow your site's address with CORS. See how to deploy a full-stack app.

Step by step

1. Check the build on your machine

   npm run build should pass and write a dist folder.

2. Paste the sentence and approve one link

   Your agent starts a login and shows you a link and a code. Open it, check the code and click Approve.

3. Open your address

   Your agent deploys and tells you where it is live, in the form my-app.antideploy.app, with HTTPS.