---
title: "Deploy a Vite and React app over MCP with while.sh"
url: https://while.sh/en/guides/deploy-vite-react/
author: "Aloïs Oddon, co-founder of Nextmap"
updated: 2026-11-02
---

# Deploy a React app built with Vite from your AI agent, over MCP

Your AI agent wrote your React app with Vite. Connected to while over MCP, it also deploys it, over HTTPS and in France, and every page opens from its link, even after a reload.

## Prerequisites

- A React app built with Vite, and its package.json.
- An AI agent that works in a terminal: Claude Code, Codex, Cursor or Gemini CLI.

## Step 1: Give your agent these instructions

Open your agent in your app's folder and paste these instructions into it:

```text titre="Instructions"
Connect to while with my account (while.sh/agents), then deploy my app.
```

Without an account, your agent deploys your app as a trial, in one request. To keep it, open the link it gives you and create your account.

With your account, your agent adds while's MCP server itself. If it asks you to, restart it. On the first call to while, a page opens in your browser. In Claude Code, if it doesn't open, type /mcp, choose while, then Authenticate. On that page, choose your app, or "A new app", then click Authorize.

## Step 2: Open your app

Your agent gives you your app's address, for example `https://mon-appli.while.cloud`, over HTTPS.

## What your agent does

It writes while.yaml at the root of your app:

```yaml titre="while.yaml"
apiVersion: while/v1
project: mon-appli
services:
  - name: web
    type: static
    root: dist
```

Your app is built with `npm run build` at every deployment (source 1), then the `dist` folder is served, with an HTTP cache. A path like `/dashboard`, opened from a link or reloaded, returns your app, and React Router shows the right page.

## Pass your API's address at build time

> You, to your agent: Connect the app to our API, at api.acme.com.

Your agent adds the address to the service, in while.yaml:

```yaml titre="while.yaml"
    build:
      args:
        VITE_API_URL: https://api.acme.com
```

Vite writes it into your app at build time, and your code reads it from `import.meta.env.VITE_API_URL` (source 2). Anyone can read these values in the browser, so a secret key stays on your API's side.

## Add an API and its database

> You, to your agent: Add a Node.js API and a PostgreSQL database for the bookings.

Your agent adds a service to while.yaml, next to your app, with its PostgreSQL database backed up every day. The details are in the guide for a Node.js API and its PostgreSQL database.

## Restrict your app to your colleagues

> You, to your agent: Restrict the app to people in the company.

Your agent adds two lines to the service:

```yaml titre="while.yaml"
    access: internal
    email_domains: [acme.com]
```

Once your Google Workspace or Microsoft 365 is connected to while, on the Pro plan, your colleagues open it with their usual account, with no sign-in page to write.

## Share with a customer, protected by a password

> You, to your agent: Open the app to our customer, with a password.

Your agent makes the app private. Then, on the app's page in while, you create a link that lasts 1, 7 or 30 days, with a password your agent will never see.

## Move to your own domain

> You, to your agent: Put the app on app.acme.com.

Your agent declares the domain, you add the DNS records it gives you, and the HTTPS certificate follows.

## See a new version before you deploy it

> You, to your agent: Show me the new version before you deploy it.

Your agent opens a preview, at its own address, with its own data. You look at it, then your agent puts it into production.

## Go back to the previous version

> You, to your agent: Go back to the previous version.

In the 30 minutes after a deployment, the previous version comes back in a second. After that, it takes a few seconds. Once the previous version is back, your agent reads what broke in while's logs, fixes it and deploys again.

## Next steps

- [Deploy a Node.js API and its PostgreSQL database](/en/guides/deploy-node-api-postgresql/)
- [Deploy a static site](/en/guides/deploy-static-site/)
- [Compare the Vercel alternatives](/en/comparisons/vercel-alternatives/)

## Sources

1. [Vite, deploying a static site (npm run build, the dist folder)](https://vite.dev/guide/static-deploy), 2026-11-02
2. [Vite, environment variables (VITE_)](https://vite.dev/guide/env-and-mode), 2026-11-02

## Questions

### Do I need a Dockerfile or an nginx server?

No. Your app is built with npm run build, then served with an HTTP cache.

### Does my single-page app (SPA) with React Router work on reload?

Yes. A path like /dashboard returns your app, and React Router shows the right page. A missing file is still a 404 error.

### Can my app have an API alongside it?

Yes. Your agent adds a service to while.yaml, with its PostgreSQL database if needed.

### What about Vue, Svelte or Solid?

Every Vite app deploys the same way, with its dist folder.