Plateforme de développement web full-stack propulsée par l’IA par StackBlitz qui génère, exécute et déploie des applications entièrement dans le navigateur.
| Commande | Description |
|---|
Naviguer vers bolt.new | Ouvrir Bolt.new dans le navigateur |
| Se connecter avec GitHub ou Google | Créer un compte pour la persistance des projets |
| Taper un prompt dans le chat | Commencer à construire une application |
| Cliquer sur “Deploy” quand prêt | Déployer sur Netlify ou d’autres hébergeurs |
| Forker vers StackBlitz | Continuer l’édition dans l’IDE StackBlitz |
| Télécharger le projet | Obtenir le code source en zip |
Architecture de Bolt.new :
1. Vous décrivez ce que vous voulez en langage naturel
2. L'IA génère le projet complet (frontend + backend + config)
3. WebContainer exécute l'application dans le navigateur (pas de serveur nécessaire)
4. L'aperçu en direct se met à jour pendant que l'IA fait des modifications
5. Vous itérez en discutant — l'IA modifie le code en temps réel
6. Déployez directement sur Netlify ou téléchargez le source
Technologie : Fonctionne sur les WebContainers StackBlitz
- Node.js s'exécute DANS le navigateur (pas un serveur distant)
- npm install, build et serveur dev s'exécutent tous localement
- Pas de Docker, pas de VMs, pas de calcul cloud
| Style de prompt | Description |
|---|
| ”Build a todo app with React and Tailwind” | Spécifier le framework et le style |
| ”Create a REST API with Express and MongoDB” | Prompt orienté backend |
| ”Make a landing page for a SaaS product” | Prompt orienté design |
| ”Add authentication with email/password” | Ajouter des fonctionnalités au projet existant |
| ”Fix the bug where the form doesn’t submit” | Déboguer les problèmes existants |
| ”Change the color scheme to dark mode” | Modifications de style |
| ”Add a dashboard page with charts” | Demande de nouvelle page/fonctionnalité |
| ”Refactor the code to use TypeScript” | Améliorations de la qualité du code |
Bons prompts :
"Build a blog platform with Next.js, Tailwind CSS,
and MDX support. Include a homepage listing posts,
individual post pages, and a tag filtering system."
"Create a weather dashboard using React that fetches
from the OpenWeatherMap API. Show current weather,
5-day forecast, and a search by city feature."
Mauvais prompts :
"Make me a website" → Trop vague
"Build Facebook" → Trop large
"Fix everything" → Pas de cible spécifique
Conseils :
- Spécifiez la stack technique (React, Vue, Svelte, etc.)
- Décrivez les fonctionnalités dont vous avez besoin
- Mentionnez les préférences de style (Tailwind, CSS modules)
- Référencez des API ou sources de données spécifiques
- Décomposez les grandes applications en prompts incrémentaux
| Framework | Description |
|---|
| React | Bibliothèque UI à base de composants |
| Next.js | Framework React avec SSR/SSG |
| Vue.js | Framework JavaScript progressif |
| Nuxt | Framework Vue avec SSR/SSG |
| Svelte | Framework réactif à la compilation |
| SvelteKit | Framework full-stack Svelte |
| Astro | Constructeur de sites statiques orienté contenu |
| Solid.js | Bibliothèque UI réactive à grain fin |
| Angular | Framework TypeScript complet |
| Framework | Description |
|---|
| Express.js | Framework web Node.js minimaliste |
| Fastify | Framework web Node.js rapide |
| Hono | Framework léger orienté edge |
| NestJS | Framework entreprise TypeScript |
| tRPC | API type-safe de bout en bout |
| Remix | Framework React full-stack |
| Bibliothèque | Description |
|---|
| Tailwind CSS | Framework CSS utility-first |
| shadcn/ui | Bibliothèque de composants React |
| DaisyUI | Bibliothèque de composants Tailwind |
| Material UI | Système de design Google pour React |
| Chakra UI | Composants React accessibles |
| Radix UI | Composants accessibles sans style |
| Commande | Description |
|---|
| Cliquer sur un fichier dans la barre latérale | Ouvrir le fichier dans l’éditeur |
| Modifier le code directement | Modifications manuelles du code |
Ctrl + S | Sauvegarder les modifications du fichier |
| Clic droit sur fichier → New File | Créer un nouveau fichier |
| Clic droit sur fichier → Delete | Supprimer le fichier |
| Clic droit sur dossier → New Folder | Créer un répertoire |
| Les modifications de fichiers sont auto-détectées | Le hot reload met à jour l’aperçu |
| Commande | Description |
|---|
| Cliquer sur le panneau terminal en bas | Accéder au terminal WebContainer |
npm install package | Installer des paquets npm |
npm run dev | Démarrer le serveur de développement |
npm run build | Compiler pour la production |
npx prisma migrate dev | Exécuter les migrations Prisma |
node script.js | Exécuter des scripts Node.js |
| Commande | Description |
|---|
| ”Add a navbar with logo and links” | Ajouter de nouveaux composants |
| ”Make the button bigger and blue” | Modifications de style |
| ”Add form validation for email” | Ajouter des fonctionnalités |
| ”The page crashes when I click submit” | Rapports de bugs |
| ”Show loading spinner while data fetches” | Améliorations UX |
| ”Add error handling for the API call” | Robustesse |
| ”Make it responsive for mobile” | Design responsive |
| ”Add dark mode toggle” | Changement de thème |
| Commande | Description |
|---|
| L’historique du chat montre toutes les modifications | Suivre ce que l’IA a modifié |
| ”Undo the last change” | Annuler les modifications de l’IA |
| ”Go back to the version with the blue header” | Référencer des états précédents |
| Télécharger le projet à tout moment | Sauvegarder des instantanés localement |
| Forker vers StackBlitz pour git | Intégration git complète |
| Commande | Description |
|---|
| Cliquer sur le bouton “Deploy” | Démarrer le processus de déploiement |
| Connecter le compte Netlify | Autoriser l’accès Netlify |
| Compilation et déploiement automatiques | Obtenir une URL en direct en secondes |
| Support de domaine personnalisé | Configurer dans le tableau de bord Netlify |
| HTTPS inclus | Certificats SSL automatiques |
| Commande | Description |
|---|
| Télécharger le projet → déployer manuellement | N’importe quel fournisseur d’hébergement |
| Forker vers StackBlitz → connecter CI/CD | Déploiement basé sur GitHub |
| Forker vers GitHub → auto-deploy Vercel/Netlify | Workflows basés sur git |
Télécharger → npm run build → upload dist/ | Hébergement statique manuel |
Workflow de déploiement :
1. Cliquer sur "Deploy" dans Bolt.new
2. Sélectionner Netlify (ou connecter le compte)
3. Bolt.new compile le projet
4. Téléverse sur Netlify automatiquement
5. Obtenir votre URL en direct : https://your-app.netlify.app
Pour les domaines personnalisés :
1. Déployer d'abord pour obtenir l'URL Netlify
2. Aller au tableau de bord Netlify → Paramètres du domaine
3. Ajouter votre domaine personnalisé
4. Mettre à jour les enregistrements DNS chez votre registrar
| Fonctionnalité | Description |
|---|
| Node.js s’exécute dans le navigateur | Aucun serveur distant nécessaire |
| Support npm/yarn/pnpm | Gestion complète des paquets |
| Système de fichiers dans le navigateur | Système de fichiers virtuel |
| Serveur de dev dans le navigateur | Hot reload avec URLs locales |
| Pas de Docker requis | Tout s’exécute côté client |
| Fonctionne hors ligne (après chargement) | Pas besoin d’internet continu |
Ce qui fonctionne dans les WebContainers :
✓ Node.js (LTS le plus récent)
✓ npm, yarn, pnpm
✓ Compilation TypeScript
✓ Vite, Webpack, esbuild
✓ Express, Fastify, Hono
✓ SQLite (en mémoire)
✓ Prisma (avec SQLite)
✓ Opérations sur le système de fichiers
Ce qui NE fonctionne PAS :
✗ Conteneurs Docker
✗ PostgreSQL / MySQL / MongoDB
✗ Dépendances binaires natives
✗ Python / Ruby / Go
✗ Opérations au niveau système
✗ Processus en arrière-plan de longue durée
| Base de données | Description |
|---|
| SQLite (en mémoire) | Fonctionne directement dans le WebContainer |
| Prisma + SQLite | ORM avec base de données locale |
| Supabase (distant) | PostgreSQL via API |
| Firebase (distant) | NoSQL via Firebase SDK |
| Turso (distant) | SQLite edge via libSQL |
| PlanetScale (distant) | MySQL via API |
Pour le développement local dans Bolt.new :
SQLite + Prisma est la meilleure combinaison
- S'exécute entièrement dans le WebContainer
- Aucun service externe nécessaire
- ORM complet avec migrations
Pour la production :
Se connecter à une base de données hébergée
- Supabase (offre gratuite : 500 Mo)
- Turso (offre gratuite : 9 Go)
- PlanetScale (offre gratuite : 5 Go)
Définir les chaînes de connexion comme variables d'environnement
| Modèle | Description |
|---|
| ”React + Vite + Tailwind starter” | SPA React moderne |
| ”Next.js app with shadcn/ui” | React full-stack |
| ”Express API with Prisma + SQLite” | Backend API REST |
| ”Vue + Nuxt + Tailwind” | Vue full-stack |
| ”Svelte + SvelteKit” | Svelte full-stack |
| ”Astro blog with MDX” | Site de contenu |
| ”Landing page with Tailwind” | Page marketing |
-
Commencer avec un prompt clair et spécifique — Décrivez la stack technique, les fonctionnalités et les préférences de design dès le départ. “Build a task manager with React, Tailwind, and localStorage persistence” obtient de meilleurs résultats que “make a todo app.”
-
Construire de manière incrémentale — Commencez par la fonctionnalité principale, vérifiez qu’elle fonctionne, puis ajoutez les fonctionnalités une par une. Chaque prompt devrait se concentrer sur une seule chose plutôt que de tout demander à la fois.
-
Référencer le code lors du débogage — Au lieu de “ça ne marche pas,” dites “la fonction handleSubmit dans ContactForm.tsx n’envoie pas la requête POST” pour des corrections plus ciblées.
-
Utiliser le terminal pour la vérification — Vérifiez la sortie du terminal pour les erreurs de compilation, les dépendances manquantes ou les problèmes d’exécution avant de demander à l’IA de déboguer.
-
Télécharger des sauvegardes régulièrement — Téléchargez votre projet périodiquement comme filet de sécurité. Les projets basés sur le navigateur peuvent être perdus si vous effacez les données du navigateur.
-
Spécifier les versions de paquets si nécessaire — Si vous avez besoin d’une version spécifique d’une bibliothèque, mentionnez-le : “Use react-query v5” ou “Use Tailwind CSS v3, not v4.”
-
Forker vers StackBlitz pour l’édition avancée — Quand vous avez besoin de git, de plusieurs terminaux ou de workflows plus complexes, forkez le projet vers l’IDE StackBlitz complet.
-
Utiliser les variables d’environnement pour les secrets — Ne codez jamais en dur les clés API dans les prompts. Demandez à l’IA d’utiliser des variables d’environnement et définissez-les dans la plateforme de déploiement.
-
Choisir SQLite pour les bases de données dans le navigateur — Puisque les WebContainers ne peuvent pas exécuter PostgreSQL ou MySQL, utilisez SQLite avec Prisma pour le développement local et passez à une base hébergée pour la production.
-
Tirer parti de la palette de commandes — Appuyez sur Ctrl + K pour rechercher rapidement des fichiers, exécuter des commandes et naviguer dans votre projet sans cliquer dans les menus.
