Bolt.new : créer, sécuriser et mettre en ligne une application complète avec l'IA

Bolt.new est un outil de développement par IA qui crée, exécute et met en ligne une application web complète directement dans votre navigateur, à partir d’une simple description en français. Vous expliquez ce que vous voulez, Bolt.new écrit le code, installe les dépendances et affiche l’application en direct à côté de la conversation. Aucun logiciel à installer, aucune configuration serveur.

Ce tutoriel s’adresse aux entrepreneurs, indépendants et créateurs de projets qui veulent construire une vraie application, pas seulement une maquette. Vous verrez comment l’interface fonctionne, comment formuler des prompts précis, comment connecter une base de données avec des comptes utilisateurs, comment sécuriser l’ensemble et comment le mettre en ligne sur votre propre domaine.

Qu’est-ce que Bolt.new ?

Bolt.new est une plateforme de StackBlitz qui combine un grand modèle de langage et un environnement de développement complet exécuté dans le navigateur grâce à la technologie WebContainers. Elle génère des applications web full-stack (interface, logique, base de données) à partir d’instructions en langage naturel, et permet de les modifier, de les tester puis de les publier sans quitter l’onglet.

Contrairement à un outil no code classique, Bolt.new produit du vrai code source, le plus souvent en React et TypeScript. Vous pouvez le lire, le modifier à la main, le télécharger ou le synchroniser avec GitHub. L’outil se situe donc à mi-chemin entre le no code et le développement traditionnel : c’est l’une des portes d’entrée les plus accessibles du vibe coding.

À quoi sert Bolt.new ? Les usages concrets

Bolt.new excelle pour les projets web de petite et moyenne taille, où la rapidité compte plus que l’architecture parfaite :

• Valider une idée : un prototype cliquable en une heure pour tester un concept auprès de futurs clients.
• Créer un outil interne : suivi de demandes, annuaire, planning, mini-CRM, tableau de bord.
• Lancer une plateforme de mise en relation : annonces de services entre particuliers, réservation de créneaux, catalogue de prestataires.
• Construire une page ou un site vitrine avec formulaires et contenus dynamiques.
• Produire un MVP (produit minimum viable) avec comptes utilisateurs, base de données et paiement.

Il est moins adapté aux logiciels très volumineux, aux applications qui exigent une architecture sur mesure ou aux projets soumis à de fortes contraintes réglementaires, qui demandent une équipe de développement et des revues de code systématiques.

Découvrir l’interface de Bolt.new

L’écran se divise en deux parties : la conversation avec l’IA à gauche, l’espace de travail à droite. Ce dernier propose plusieurs onglets qu’il faut savoir utiliser à bon escient.

Zone	Rôle	Quand l’utiliser
Conversation	Formuler les demandes, lire les explications de l’IA	En permanence
Preview (aperçu)	Voir et tester l’application en direct	Après chaque modification
Code	Parcourir l’arborescence et modifier les fichiers	Pour vérifier, corriger une valeur, verrouiller un fichier
Terminal / console	Lire les erreurs, les messages de build	Quand l’aperçu reste blanc ou affiche une erreur
Historique des versions	Revenir à un état antérieur	Quand une demande a cassé quelque chose

Deux options de la zone de saisie méritent d’être connues dès le départ : le bouton d’amélioration du prompt, qui reformule votre demande de façon plus détaillée avant envoi, et le mode discussion, qui permet d’échanger avec l’IA sur une idée ou un bug sans qu’elle modifie immédiatement le code. Utilisez ce dernier dès que vous hésitez sur la marche à suivre.

Comment créer une application avec Bolt.new : les étapes

Fil rouge de ce tutoriel : une plateforme d’entraide entre voisins, dans l’esprit des sites de services entre particuliers. Chaque membre crée un profil et publie des annonces ; les autres les consultent et le contactent.

Étape 1 — Écrire un premier prompt structuré

Le premier message conditionne toute la suite. Décrivez le public, les fonctionnalités de la première version, ce qui est hors périmètre et le style attendu :

Crée une application web d'entraide entre voisins, en français.
Public : habitants d'un même quartier, peu à l'aise avec l'informatique,
qui utilisent surtout leur smartphone.
Version 1 :
- page d'accueil avec la liste des annonces de services (titre, catégorie,
  quartier, date) et un filtre par catégorie ;
- page de détail d'une annonce ;
- formulaire de publication d'une annonce.
Utilise des données fictives pour l'instant, sans base de données.
Style : sobre et chaleureux, fond clair, couleur principale vert sauge,
grandes zones cliquables, parfaitement lisible sur mobile.
Hors périmètre : paiement, messagerie, notation.

En quelques dizaines de secondes, Bolt.new crée les fichiers, installe les paquets et affiche l’application dans l’onglet Preview. Testez chaque page avant d’aller plus loin.

Étape 2 — Itérer par petites demandes

Avancez ensuite par modifications courtes, testées une à une. Plus une demande est ciblée, moins l’IA risque de toucher à ce qui fonctionne déjà :

Dans la liste des annonces, ajoute une barre de recherche au-dessus du filtre.
Elle filtre sur le titre et la description, sans tenir compte des majuscules
ni des accents. Ne modifie pas la page de détail ni le formulaire.

Si le résultat ne vous convient pas, ne corrigez pas une erreur par une autre : revenez à la version précédente et reformulez.

Étape 3 — Verrouiller les fichiers validés

Quand une page ou un composant est terminé, verrouillez-le depuis l’onglet Code (clic droit sur le fichier ou le dossier). L’IA ne pourra plus le modifier tant que le verrou est actif. C’est la meilleure protection contre les régressions, ces fonctionnalités qui cessent de marcher parce qu’une autre demande a réécrit un fichier partagé.

À l’inverse, vous pouvez cibler un fichier précis pour indiquer à l’IA où intervenir. Les deux gestes combinés rendent l’outil beaucoup plus prévisible.

Étape 4 — Gérer les versions et revenir en arrière

Chaque modification crée un point dans l’historique. Si une demande casse l’application, restaurez la dernière version saine au lieu d’enchaîner les correctifs. En formation, c’est le réflexe qui fait gagner le plus de temps et de tokens : trois demandes de correction successives coûtent souvent plus cher qu’un retour arrière suivi d’une demande mieux formulée.

Pour les projets importants, connectez aussi le projet à GitHub : vous disposerez d’une sauvegarde indépendante de Bolt.new et d’un historique complet.

Étape 5 — Créer l’espace utilisateur et la base de données

L’application passe maintenant aux vraies données. Bolt.new propose deux options :

• La base de données intégrée de Bolt, créée automatiquement, sans compte externe : idéale pour démarrer vite.
• Supabase, une plateforme externe fondée sur PostgreSQL, qui offre un tableau de bord complet, l’authentification, le stockage de fichiers et un contrôle fin des règles d’accès.

Le choix dépend de l’ambition du projet :

Critère	Base intégrée de Bolt	Supabase
Mise en place	Automatique, aucun compte à créer	Création d’un compte et d’un projet Supabase, puis connexion
Visibilité sur les données	Limitée à ce que propose l’interface de Bolt	Tableau de bord complet : tables, utilisateurs, journaux, requêtes SQL
Règles d’accès	Gérées via les demandes à l’IA	Politiques Row Level Security consultables et modifiables
Indépendance	Liée à la plateforme Bolt	Base réutilisable depuis un autre outil ou un autre front
Idéal pour	Prototype, démonstration, petit outil	Application destinée à de vrais utilisateurs

Rien n’empêche de démarrer sur la base intégrée puis de migrer vers Supabase quand le projet se confirme : demandez alors à l’IA un plan de migration détaillé avant toute modification, et vérifiez table par table que les données ont bien été transférées.

Pour une application destinée à durer, Supabase donne davantage de visibilité sur ce qui se passe. Une fois la connexion établie depuis l’interface, décrivez précisément la structure attendue :

Connecte l'application à la base de données et crée :
- une table profiles (id lié au compte, prénom, quartier, photo, compétences,
  date de création) ;
- une table annonces (id, auteur lié au profil, titre, catégorie,
  description, quartier, disponible oui/non, date de création).
Ajoute l'inscription et la connexion par e-mail et mot de passe.
Après l'inscription, l'utilisateur complète son profil avant d'accéder
aux annonces. Remplace les données fictives par les données de la base.

Testez ensuite le parcours complet : inscription, validation du profil, publication d’une annonce, déconnexion, reconnexion.

Étape 6 — Sécuriser l’application

C’est l’étape que les débutants oublient, et la plus importante. Une application peut fonctionner parfaitement à l’écran tout en laissant n’importe qui lire ou modifier les données des autres. Demandez explicitement les règles d’accès :

Active la Row Level Security sur toutes les tables et crée les politiques :
- tout utilisateur connecté peut lire les annonces et les profils publics ;
- un utilisateur ne peut créer, modifier ou supprimer que ses propres annonces ;
- un utilisateur ne peut modifier que son propre profil ;
- les visiteurs non connectés ne voient aucune donnée.
Liste ensuite chaque politique créée avec une phrase d'explication.

Puis faites le test des deux comptes : créez deux utilisateurs, et essayez avec le second de modifier ou supprimer l’annonce du premier. Si cela fonctionne, la sécurité est défaillante. Vérifiez aussi qu’aucune clé secrète n’apparaît dans le code de l’interface : seules les clés prévues pour être publiques (comme la clé anonyme de Supabase, protégée par les règles d’accès) peuvent y figurer.

Étape 7 — Publier et configurer le domaine

Cliquez sur le bouton de publication : Bolt.new construit l’application et la met en ligne sur une adresse publique. Vous pouvez ensuite rattacher un nom de domaine personnalisé depuis les réglages du projet, en suivant les instructions DNS affichées.

Avant d’annoncer le lancement, faites un dernier « crash test » :

Agis comme un testeur. Liste tous les parcours utilisateur de l'application
et, pour chacun, les cas limites à vérifier : champs vides, textes très longs,
image trop lourde, perte de connexion, double clic sur « Publier »,
utilisateur non connecté qui tente d'accéder à une page privée.
Présente le résultat sous forme de check-list.

Déroulez cette liste vous-même sur ordinateur et sur smartphone, corrigez, puis republiez.

Astuces pour aller plus vite et économiser des tokens

Chaque échange consomme des tokens, d’autant plus que le projet est volumineux. Quelques habitudes changent nettement la donne :

• Une demande = une intention. Mieux vaut trois messages précis qu’un message flou qu’il faudra corriger trois fois.
• Réfléchissez en mode discussion, puis lancez la modification une fois la solution claire.
• Verrouillez ce qui est terminé et excluez du contexte les fichiers inutiles.
• Corrigez à la main les petites choses (un texte, une couleur, une marge) directement dans l’onglet Code.
• Collez le message d’erreur exact de la console plutôt que « ça ne marche pas ».
• Repartez d’une version saine plutôt que d’empiler les correctifs.

Pour le design, soyez concret : couleurs en codes hexadécimaux, police souhaitée, espacement, exemples de sites dont vous aimez le style. Une demande du type « rends-le plus pro » donne des résultats aléatoires ; « utilise la police Inter, augmente les marges entre les cartes, arrondis les angles à 12 pixels et ajoute une ombre légère au survol » donne exactement ce que vous voulez.

Adapter l’application aux smartphones et aux tablettes

La plupart des utilisateurs d’une application grand public la découvriront sur leur téléphone. Ne vous contentez pas de réduire la fenêtre de l’aperçu : ouvrez l’adresse publiée sur un vrai smartphone et parcourez chaque écran. Puis formulez une demande dédiée :

Vérifie l'affichage de toutes les pages sur des écrans de 375, 768 et 1280 pixels.
Sur mobile : menu replié dans un bouton, cartes d'annonces sur une seule colonne,
boutons d'au moins 44 pixels de haut, aucun défilement horizontal.
Liste les problèmes trouvés avant de les corriger.

Pensez aussi aux détails qui font la différence à la publication : un titre et une description de page pour le partage sur les réseaux, une icône d’application (favicon), des images compressées pour limiter le temps de chargement sur les connexions mobiles.

Les erreurs fréquentes sur Bolt.new (et comment les éviter)

Erreur	Conséquence	Solution
Premier prompt vague	Application générique, à refaire	Décrire public, fonctionnalités V1, hors périmètre et style
Enchaîner les correctifs	Code confus, tokens gaspillés	Revenir à la dernière version saine et reformuler
Ne rien verrouiller	Des pages validées se cassent	Verrouiller chaque fichier terminé
Base de données sans règles d’accès	Données exposées à tous	Row Level Security et test avec deux comptes
Clé d’API secrète dans le code front	Clé récupérable par n’importe qui	Variables d’environnement et fonctions côté serveur
Tester uniquement sur ordinateur	Interface inutilisable sur mobile	Vérifier chaque écran sur smartphone avant publication
Pas de sauvegarde externe	Projet perdu en cas de problème de compte	Synchroniser avec GitHub ou télécharger le code

Bolt.new face aux autres outils : comparaison

Bolt.new n’est pas le seul outil de génération d’applications. Voici comment il se situe :

Outil	Environnement	Accès au code	Profil idéal
Bolt.new	Navigateur	Complet (éditeur, terminal, export)	Créateurs qui veulent aller vite tout en gardant la main sur le code
Lovable	Navigateur	Oui, via GitHub	Créateurs attachés à l’édition visuelle de l’interface
Cursor	Application de bureau	Complet	Projets structurés, utilisateurs à l’aise avec un éditeur de code
Claude Code	Terminal, IDE	Complet	Développeurs, projets longs, workflow Git et MCP
Power Apps	Navigateur, écosystème Microsoft	Low code, pas de code source classique	Applications métier internes sous Microsoft 365

Un parcours fréquent consiste à prototyper sur Bolt.new, puis à exporter le code vers GitHub pour le faire évoluer dans Cursor ou avec Claude Code quand l’application prend de l’ampleur. Si vous hésitez avec son concurrent le plus direct, notre guide sur Lovable détaille ses particularités. Pour des applications internes dans un environnement Microsoft, Power Apps reste une option sérieuse.

Comment apprendre Bolt.new et progresser ?

Bolt.new se prend en main en une soirée, mais créer une application fiable demande une méthode. Le parcours que nous recommandons :

1. Première séance : interface, premiers prompts, verrouillage et historique des versions, sur un petit projet sans base de données.
2. Deuxième séance : publication, domaine personnalisé, lecture des erreurs dans la console.
3. Troisième séance : comptes utilisateurs, base de données, règles de sécurité et test de bout en bout.
4. Ensuite : design avancé, fonctionnalités complexes, puis synchronisation GitHub pour préparer la suite.

Pour suivre ce parcours avec un formateur, la formation Bolt.new pour créer des applications professionnelles d’EspritAcadémique construit une plateforme d’entraide entre voisins de A à Z, en deux heures et demie de pratique, sans prérequis. Au programme notamment :

• la prise en main de l’interface, les premiers prompts, le verrouillage des fichiers et la gestion des versions ;
• les tokens, les clés d’API, les réglages avancés, la mise en ligne et la configuration des domaines ;
• l’espace utilisateur, la validation des profils et le choix entre la base intégrée de Bolt et Supabase ;
• la migration de la base, la sécurisation de l’application et les tests de bout en bout ;
• la génération de contenus par l’IA, la création d’un annuaire et le design avancé de l’interface.

En résumé

Bolt.new permet de passer d’une idée à une application en ligne sans rien installer, à condition de travailler avec méthode : un premier prompt structuré, des demandes courtes, des fichiers verrouillés dès qu’ils sont validés, un historique utilisé sans hésitation. La base de données et la sécurité ne s’improvisent pas : activez les règles d’accès, testez avec deux comptes et gardez vos clés secrètes hors du code avant de publier.