Deploy a Vite frontend
Publish a Vite application as a static site and connect it to a separate API.
A standard Vite frontend builds into static files. Deploy those files as a Static Site; you do not need a continuously running vite preview server.
Prepare the repository
Commit your source, package.json, and package-manager lockfile. Ensure the build script invokes Vite, directly or after type checking:
{
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
}Keep your existing TypeScript checks if your project already includes them. Run the build locally and confirm that its output directory contains index.html and the generated assets.
Create a static site
| Setting | Value |
|---|---|
| Service type | Static Site |
| Build method | Railpack |
| Build command | npm run build |
| Publish directory | dist |
| Start command | Leave empty |
Use your actual package manager and configured build.outDir if they differ. Select the correct root in a monorepo so the manifest and lockfile are available.
Configure the API URL
For a browser application calling a separate API, add a public build variable such as:
VITE_API_URL=https://api.example.comRead it in browser code:
const response = await fetch(`${import.meta.env.VITE_API_URL}/products`);The API must expose a public HTTPS endpoint and allow the frontend's origin when CORS applies. Do not point browser code at a private database or private-service hostname.
Every VITE_* value used by the frontend is public build output. Never put database passwords or backend API secrets in those variables. After changing a value, deploy again so Vite can compile it into the site.
Support client-side routing
If you use React Router, Vue Router, or another history-based browser router, add a /* to /index.html rewrite with action 200 in Redirects & rewrites. Deploy the change, then open a nested route directly in a new tab.
If JavaScript or CSS returns the HTML page instead of the expected asset, inspect its path and Vite's base setting. Do not hide missing assets behind a blanket fallback without checking the browser's network errors.
Connect a domain and verify
Follow Custom domains, then verify the homepage, a nested route, a direct asset URL, and API calls from the final origin. If authentication uses cookies, verify its domain, SameSite policy, HTTPS requirements, and CORS credentials configuration on the API.
Vite can also be part of an SSR framework. If your output needs a Node server, deploy the framework's production server as a web service instead of using these static-only settings.