---
title: "Déployer une appli Vite et React par MCP, avec while.sh"
url: https://while.sh/fr/guides/appli-vite-react/
author: "Aloïs Oddon, cofondateur de Nextmap"
updated: 2026-11-02
---

# Mettre en ligne une appli React faite avec Vite depuis votre agent IA, par MCP

Votre agent IA a écrit votre appli React avec Vite. Branché à while par MCP, il la met aussi en ligne, en HTTPS et en France, et chaque page s'ouvre depuis son lien, même après un rechargement.

## Prérequis

- Une appli React faite avec Vite, et son package.json.
- Un agent IA qui travaille dans un terminal : Claude Code, Codex, Cursor ou Gemini CLI.

## Étape 1 : Donnez ces instructions à votre agent

Ouvrez votre agent dans le dossier de votre appli, et collez-lui ces instructions :

```text titre="Instructions"
Connecte-toi à while avec mon compte (while.sh/agents), puis mets mon appli en ligne.
```

Sans compte, votre agent met votre appli en ligne à l'essai, en une demande. Pour la garder, ouvrez le lien qu'il vous donne et créez votre compte.

Avec votre compte, votre agent ajoute lui-même le serveur MCP de while. S'il vous le demande, relancez-le. Au premier appel à while, une page s'ouvre dans votre navigateur. Dans Claude Code, si elle ne s'ouvre pas, tapez /mcp, choisissez while, puis Authenticate. Sur cette page, choisissez votre appli, ou « Une nouvelle appli », puis cliquez sur Autoriser.

## Étape 2 : Ouvrez votre appli

Votre agent vous donne l'adresse de votre appli, par exemple `https://mon-appli.while.cloud`, en HTTPS.

## Ce que fait votre agent

Il écrit while.yaml à la racine de votre appli :

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

Votre appli est construite avec `npm run build` à chaque mise en ligne (source 1), puis le dossier `dist` est servi, avec un cache HTTP. Un chemin comme `/dashboard`, ouvert depuis un lien ou rechargé, renvoie votre appli, et React Router affiche la bonne page.

## Passer l'adresse de votre API à la construction

> Vous, à votre agent : Branche l'appli sur notre API, à api.acme.fr.

Votre agent ajoute l'adresse au service, dans while.yaml :

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

Vite l'écrit dans votre appli à la construction, et votre code la lit dans `import.meta.env.VITE_API_URL` (source 2). Ces valeurs se lisent dans le navigateur : une clé secrète reste du côté de votre API.

## Ajouter une API et sa base

> Vous, à votre agent : Ajoute une API Node.js et une base PostgreSQL pour les réservations.

Votre agent ajoute un service à while.yaml, à côté de votre appli, avec sa base PostgreSQL sauvegardée chaque jour. Le détail est dans la recette de l'API Node.js et de sa base PostgreSQL.

## Réserver votre appli à vos collègues

> Vous, à votre agent : Réserve l'appli aux personnes de l'entreprise.

Votre agent ajoute deux lignes au service :

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

Une fois votre Google Workspace ou Microsoft 365 relié à while, avec l'offre Pro, vos collègues l'ouvrent avec leur compte habituel, sans page de connexion à écrire.

## Partager avec un client, protégé par un mot de passe

> Vous, à votre agent : Ouvre l'appli à notre client, avec un mot de passe.

Votre agent réserve l'appli, puis, sur la page de l'appli dans while, vous créez un lien de 1, 7 ou 30 jours, avec un mot de passe que votre agent ne verra jamais.

## Passer sur votre propre domaine

> Vous, à votre agent : Mets l'appli sur app.acme.fr.

Votre agent déclare le domaine, vous ajoutez les enregistrements DNS qu'il vous donne, et le certificat HTTPS suit.

## Voir une nouvelle version avant de la mettre en ligne

> Vous, à votre agent : Montre-moi la nouvelle version avant de la mettre en ligne.

Votre agent ouvre une prévisualisation, à son adresse à elle, avec ses propres données. Vous la regardez, puis il la met en production.

## Revenir à la version d'avant

> Vous, à votre agent : Reviens à la version d'avant.

Dans les 30 minutes qui suivent une mise en ligne, la version d'avant revient en une seconde. Ensuite, en quelques secondes. Une fois la version d'avant revenue, votre agent lit ce qui a cassé dans les journaux de while, corrige et remet en ligne.

## Prochaines étapes

- [Mettre en ligne une API Node.js et sa base PostgreSQL](/fr/guides/api-node-postgresql/)
- [Mettre en ligne un site statique](/fr/guides/site-statique/)
- [Comparer les alternatives à Vercel](/fr/comparatifs/alternative-vercel/)

## Sources

1. [Vite, mettre en ligne un site statique (npm run build, le dossier dist)](https://vite.dev/guide/static-deploy), 2026-11-02
2. [Vite, les variables d'environnement (VITE_)](https://vite.dev/guide/env-and-mode), 2026-11-02

## Questions

### Faut-il un Dockerfile ou un serveur nginx ?

Non. Votre appli est construite avec npm run build, puis servie avec un cache HTTP.

### Mon appli monopage (SPA) avec React Router marche-t-elle au rechargement ?

Oui. Un chemin comme /dashboard renvoie votre appli, et React Router affiche la bonne page. Un fichier absent reste une erreur 404.

### Mon appli peut-elle avoir une API à côté ?

Oui. Votre agent ajoute un service à while.yaml, avec sa base PostgreSQL si besoin.

### Et Vue, Svelte ou Solid ?

Toute appli Vite se met en ligne de la même façon, avec son dossier dist.