Transformez votre projet Bolt.new en applications mobiles natives avec Capacitor

Introduction

Bolt.new est une plateforme de développement innovante propulsée par l'IA, capable de générer des applications web full-stack avec divers frameworks comme React, Vue, Svelte, et bien d'autres. Mais que faire si vous souhaitez porter votre création Bolt.new sur mobile ? Dans ce tutoriel complet, nous vous montrerons comment exporter votre projet Bolt.new et le transformer en applications mobiles natives en utilisant Capacitor.

Version courte : la Passer de Bolt à iOS et Android résume tout le parcours sur un seul écran : l'export, Capacitor, les builds cloud sans Mac et les live updates.

Que votre projet Bolt.new utilise React, Vue ou un autre framework compatible, ce guide vous aidera à créer des apps natives iOS et Android avec un accès aux fonctionnalités de l'appareil comme la caméra, le stockage et les notifications push.

Avant de commencer : prérequis et temps requis

Temps estimé: 3 à 5 heures pour une configuration complète

Configuration requise:

Développement iOS: Mac avec macOS 12.0+ (requis, aucune alternative)
Développement Android: n'importe quel OS (Windows/Mac/Linux)
Espace libre: 20-30 Go pour les outils de développement
Mémoire: 8 Go de RAM minimum, 16 Go recommandés

Budget nécessaire:

Apple Developer : 99 $/an (pour l'App Store iOS)
Google Play : frais uniques de 25 $
Cursor Pro : 20 $/mois (optionnel, accélère le développement)

Ce que nous allons installer:

Node.js & npm
Xcode (Mac uniquement, pour iOS)
Android Studio (pour Android)
Divers outils en ligne de commande

Pourquoi transformer votre application Bolt.new en mobile ?

Portée multiplateforme: Déployez votre application générée par IA sur les stores mobiles
Accès natif aux appareils: Use camera, GPS, file system, and other native features
Performances améliorées: Le container natif offre de meilleures performances que les web views
Capacités hors ligne: Travaillez hors ligne avec des solutions de stockage natives
Notifications push: Fidélisez vos utilisateurs grâce au support des notifications push natives

Pourquoi choisir Capacitor plutôt qu'Expo ?

Si vous envisagez des options de développement mobile, Capacitor offre des avantages considérables par rapport à Expo, surtout pour le développement web-first :

Une base de code, trois plateformes: Votre site React, Next.js ou Vue.js actuel devient une application iOS, Android ET web sans aucune conversion nécessaire
Aucun nouveau build requis: Utilisez votre projet Bolt.new tel quel — pas besoin de tout réécrire pour un autre framework comme l'exige Expo
Une véritable approche web-first: Contrairement à Expo, qui est mobile-first et peu fluide sur le web, Capacitor traite le web comme une plateforme à part entière
Développement fluide: Continuez à utiliser vos outils et workflows de développement web habituels
Liberté de framework: Fonctionne avec n'importe quel framework web (React, Vue, Svelte, Next.js, etc.) — sans être bloqué sur React Native comme avec Expo

La différence clé :

Avec Capacitor: Créez votre site web → Ajoutez le support mobile (même codebase)
Avec Expo: Créez pour le mobile → Essayez de faire fonctionner le web (approche différente, souvent laborieuse)

Puisque votre projet Bolt.new est déjà une application web, Capacitor vous permet de l'étendre au mobile sans changer une seule ligne de code. Expo vous obligerait à reconstruire tout votre projet pour son framework.

Étape 1 : Configurez votre environnement de développement

Installez Cursor — votre éditeur Code boosté par l'IA

Pour travailler efficacement avec votre projet Bolt.new, nous allons utiliser Cursor, un éditeur code intelligent qui simplifie le développement :

Rendez-vous sur cursor.sh et récupérez l'installeur pour votre OS
Suivez le processus d'installation
Lancez Cursor une fois qu'il est prêt

Lancez Cursor

Configurer Cursor pour une productivité maximale

Pour tirer le meilleur parti de Cursor, une configuration initiale est nécessaire :

Pensez à passer à Cursor Pro - La version gratuite fonctionne, mais la version Pro (20 $/mois) débloque :
- L'assistance IA illimitée
- Les modèles premium (GPT-4, Claude)
- Des réponses instantanées
- Support premium
Accéder aux paramètres par Command+, (Mac) ou Ctrl+, (Windows)

Paramètres de Cursor

Activer les fonctionnalités IA - Assurez-vous que l'assistance IA est activée :

Autoriser les modèles

Choisissez votre modèle d'IA - Nous recommandons Claude ou GPT-4 :

Sélectionner le modèle Cursor

Activer l'exécution de commandes - Laissez Cursor exécuter les commandes automatiquement :

Autoriser l'exécution de commandes

Étape 2 : Exportez votre projet Bolt.new

Importons maintenant votre projet Bolt.new dans Cursor.

Téléchargez votre projet

Accédez à votre projet Bolt.new dans votre navigateur
Trouvez le Télécharger ou Exporter bouton dans l’interface de Bolt

Téléchargez le fichier ZIP contenant votre projet
Décompressez-le dans un dossier sur votre ordinateur

Fichiers du projet Bolt.new

Ouvrir dans Cursor

Une fois extraits, ouvrez le projet dans Cursor :

Utiliser File > Open Folder dans Cursor
Sélectionnez votre dossier de projet Bolt.new extrait
Cursor va charger votre projet

Ouvrir dans Cursor

Alternative : cloner depuis GitHub

Si vous avez connecté Bolt.new à GitHub :

Appuyez sur Shift+Command+P (Mac) ou Shift+Ctrl+P (Windows)
Recherchez « Git: Clone »
Saisissez l'URL de votre dépôt
Choisissez un emplacement pour l'enregistrer

Cloner dans Cursor

Étape 2 : identifier le framework de votre projet

Bolt.new peut générer des projets utilisant différents frameworks. Identifions celui que vous utilisez :

Vérifier le package.json

Ouvrez package.json pour voir quel framework votre projet utilise :

Inspection du package.json de Bolt.new

Types de projets Bolt.new courants :

React + Vite: La configuration la plus courante
Vue + Vite: Les applications Vue.js
Svelte: applications Svelte
Next.js: applications React full-stack
Vanilla JS: applications JavaScript pur

Étape 3 : installer les outils de développement

Option A : laisser Cursor AI tout gérer

Appuyez sur Command+K (Mac) ou Ctrl+K (Windows) dans Cursor

Tapez cette requête :

Install all necessary development tools including Node.js, then install project dependencies and start the dev server

Cursor AI fera automatiquement :

Installez Node.js et npm si nécessaire
Configurez Homebrew sur macOS
Installez toutes les dépendances du projet
Lancez votre serveur de développement

Installer Homebrew

Option B : Processus d'installation manuel

Si vous préférez un contrôle manuel ou si l'approche IA rencontre des problèmes :

Tout d'abord, ouvrez le terminal de Cursor par Shift+Command+T (Mac) ou Shift+Ctrl+T (Windows)

Pour les utilisateurs macOS :

# Get Homebrew package manager
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Install Node.js via Homebrew
brew install node

# Move to your project folder
cd your-bolt-project

# Install project packages
npm install

# Launch development server
npm run dev

Pour les utilisateurs Windows :

Téléchargez l'installateur Node.js sur nodejs.org
Terminez l'assistant d'installation
Dans le terminal de Cursor :

cd your-bolt-project
npm install
npm run dev

L'application Bolt.new tourne en local

Votre application Bolt.new devrait maintenant être lancée (généralement sur http://localhost:5173 pour les projets Vite).

Étape 4 : configurer le build pour mobile

Votre configuration variera selon le framework de votre projet.

Option A : configuration automatique avec Cursor AI

Demander à Cursor AI de gérer la configuration :

Configure my Bolt.new project for mobile deployment with proper build settings

Cursor détectera votre framework et appliquera la bonne configuration.

Option B : configuration manuelle par framework

Pour les projets React + Vite :

Modifier vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: './',
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    rollupOptions: {
      output: {
        manualChunks: undefined,
      },
    },
  },
})

Pour les projets Vue + Vite :

Modifier vite.config.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: './',
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
  },
})

Pour les projets Next.js

Ajoutez à vos package.json scripts :

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "static": "next build && next export"
  }
}

Mise à jour next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,
  images: {
    unoptimized: true,
  },
}

module.exports = nextConfig

Étape 5 : Compiler votre projet

Il est temps de créer le build de production de votre application Bolt.new.

Option A : Compiler avec Cursor AI

Demandez simplement à Cursor :

Build my Bolt.new project for production deployment

Cursor exécutera la commande de build appropriée selon votre framework.

Option B : Compiler manuellement

Pour les projets basés sur Vite (React/Vue/Svelte) :

npm run build

Build Vite de Bolt.new réussi

Pour les applications Next.js :

npm run static

Confirmation du succès du build

Assurez-vous que votre build a généré le bon output :

Projets Vite: Recherchez un dist répertoire
Projets Next.js: Vérifiez s'il y a un out répertoire

résultat de build Bolt.new

Étape 6 : ajoutez Capacitor à votre projet Bolt.new

Transformons votre application web en applications mobiles natives.

Option A : Configuration rapide avec Cursor AI

Appuyez sur Command+K (Mac) ou Ctrl+K (Windows) et demandez :

Add Capacitor to my project and set up iOS and Android platforms

Cursor AI s'occupera de toute la configuration.

Option B : Configuration manuelle étape par étape

Installez les outils en ligne de commande de Capacitor :

npm install -D @capacitor/cli

Initialisez votre projet Capacitor :

npx cap init

Initialisation Capacitor Bolt

On vous demandera :

Nom de l'app: le nom de votre projet Bolt.new
ID du bundle: Formater comme com.yourcompany.yourapp

Continuer avec la configuration manuelle - installer les packages essentiels :

npm install @capacitor/core @capacitor/ios @capacitor/android

Ajouter le support des plateformes mobiles :

npx cap add ios
npx cap add android

Ajout des plateformes Capacitor Bolt

Que s'est-il passé ?

La structure de votre projet Bolt.new ressemble désormais à ceci :

your-bolt-project/
├── src/           # Your app source (React/Vue/etc)
├── public/        # Static files  
├── dist/          # Build output (Vite)
├── out/           # Build output (Next.js)
├── ios/           # iOS Xcode project (NEW!)
├── android/       # Android Studio project (NEW!)
├── capacitor.config.ts  # Mobile configuration
└── package.json   # Dependencies

Notes importantes:

Votre code web reste dans src/ - modifiez à cet endroit
ios/ et android/ sont générés - ne pas modifier
Après les modifications, lancez toujours npx cap sync
Chaque plateforme a son propre processus de build

Étape 7 : Configurer Capacitor

Il est temps de configurer Capacitor pour votre framework spécifique.

Option A : Configuration automatique avec Cursor

Demandez de l'aide à Cursor :

Configure capacitor.config.ts for my Bolt.new project build output

Option B : Configuration manuelle

Pour les applications basées sur Vite :

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your Bolt App',
  webDir: 'dist',
  bundledWebRuntime: false,
  server: {
    androidScheme: 'https'
  }
};

export default config;

Pour les applications Next.js :

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your Bolt App',
  webDir: 'out',
  bundledWebRuntime: false,
  server: {
    androidScheme: 'https'
  }
};

export default config;

Étape 8 : Build et sync

Préparez votre application pour le déploiement mobile.

Option A : avec Cursor AI

Dites à Cursor :

Build my project and sync it with Capacitor for mobile deployment

Option B : Processus manuel

Exécutez ces commandes dans l'ordre :

npm run build
npx cap sync

Capacitor sync Bolt terminé

Étape 9 : Build de binaires prêts pour les stores avec Capgo Builder (Recommandé)

Pas besoin d'un Mac ni d'un pipeline local Xcode/Android Studio complet pour publier sur l'App Store et Google Play. Builder Capgo compile, signe et peut soumettre des builds iOS et Android depuis le cloud — la voie la plus rapide pour les apps "vibe-coded" exportées depuis Bolt.new.

Pourquoi le builder Capgo ?

Aucun Mac requis pour iOS — build depuis Windows, Linux ou votre environnement de code IA
Un workflow CLI unique — facile à scripter et à transmettre à Cursor, Claude Code ou Codex
Compatible avec Live Updates — déployez des correctifs JS/UI à distance ; ne recompilez le build natif qu'en cas de changement de plugins ou de permissions

Configurer Capgo Builder

Après votre build de production et votre synchronisation Capacitor locale :

npx @capgo/cli@latest login
npx @capgo/cli@latest init
npx @capgo/cli@latest build init --platform ios
npx @capgo/cli@latest build init --platform android

Enregistrez vos identifiants de signature une seule fois (certificats Apple, profils de provisionnement, keystore Android). Voir Gestion des identifiants et Compiler pour iOS depuis Windows.

Demander un build cloud

npm run build
npx cap sync
npx @capgo/cli@latest build com.yourcompany.yourapp --platform ios --build-mode release
npx @capgo/cli@latest build com.yourcompany.yourapp --platform android --build-mode release

Capgo Builder diffuse les logs de build dans votre terminal. Avec App Store Connect configuré, les builds iOS peuvent aller directement sur TestFlight.

Envoyez votre bundle web pour les mises à jour OTA :

npx @capgo/cli@latest bundle upload --channel production

Étape 10 : Ouvrir les IDE natifs (facultatif pour les tests locaux)

Si vous avez un Mac ou si vous souhaitez tester sur émulateur avant les builds cloud, ouvrez les projets natifs localement :

Accédez aux environnements de développement natifs de votre application.

Développement iOS

Option A : Via Cursor AI

Open my iOS project in Xcode

Option B : Commande terminal

npx cap open ios

Xcode ouvre le projet Bolt

Développement Android

Option A : Via Cursor AI

Open my Android project in Android Studio

Option B : Commande terminal

npx cap open android

Android Studio ouvre le projet Bolt

Étape 11 : Compiler et exécuter localement (facultatif)

Exécution sur iOS

Configuration de Xcode (première fois)

Choisissez votre cible:
- À côté du bouton Play, cliquez sur le sélecteur d'appareil
- Pour tester : choisissez n'importe quel simulateur iPhone
- Pour un appareil réel : connectez votre iPhone via USB
Configurer la signature Code:
- Click your project name in left sidebar
- Allez dans l'onglet « Signing & Capabilities »
- Activez « Automatically manage signing »
- Connectez-vous avec votre Apple ID
- Remarque: Les appareils physiques nécessitent l'Apple Developer Program (99 $/an)
Compilez votre application:
- Cliquez sur le bouton ▶️ Play
- Premier build : 5 à 10 minutes (soyez patient !)
- Surveillez la barre de progression en haut

Troubleshooting iOS:

« No account found »: Ajoutez l'Apple ID dans Xcode > Settings > Accounts
« Failed to build »: Nettoyez le dossier de build (Shift+Command+K) et réessayez
Problèmes de simulateur: Redémarrez le simulateur via Device > Restart

L'application Bolt tourne sur iOS

Exécution sur Android

Configuration d'Android Studio (première fois)

Configuration SDK (automatique) :
- Android Studio détectera les composants manquants
- Cliquez sur « Install missing SDK » lors du prompt
- Cela télécharge environ 2 à 3 Go de fichiers
Créer un appareil virtuel:
- Open AVD Manager (phone icon in toolbar)
- Cliquez sur « + Create Virtual Device »
- Sélectionnez « Pixel 6 » (un bon choix par défaut)
- Téléchargez l'image système lors du prompt
- Finish setup with default options
Lancer votre application:
- Sélectionnez votre émulateur dans le menu déroulant
- Cliquez sur le bouton vert ▶️ Run
- Premier build : 10-15 minutes
- L'émulateur démarre automatiquement

Dépannage Android:

« Gradle sync failed »: Essayez File > Invalidate Caches
Émulateur lent: Activez l'accélération matérielle dans les paramètres AVD
Erreurs de build: Mettre à jour Gradle via les correctifs suggérés

L'application Bolt tourne sur Android

Checklist de vérification

Une fois le build réussi, vérifiez :

✅ L'app se lance sans crash ✅ Votre contenu Bolt.new s'affiche correctement ✅ Les boutons et interactions fonctionnent ✅ La console n'affiche aucune erreur rouge

Toujours des problèmes ? Les messages d'erreur indiquent généralement précisément ce qui ne va pas — lisez-les attentivement !

Étape 12 : Activer le Live Reload (développement)

Accélérez votre workflow de développement avec le hot reloading.

Option A : Configuration automatique avec Cursor

Demander à Cursor :

Enable live reload for my Capacitor app development

Cursor configurera tout automatiquement.

Option B : Configuration manuelle

Récupérez votre adresse IP locale :

# macOS
ipconfig getifaddr en0

# Windows  
ipconfig

Mettez à jour votre capacitor.config.ts:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your Bolt App',
  webDir: 'dist', // or 'out' for Next.js
  bundledWebRuntime: false,
  server: {
    url: 'http://YOUR_IP_ADDRESS:5173', // or 3000 for Next.js
    cleartext: true,
  },
};

export default config;

Appliquez la configuration :

npx cap copy

Live reload activé sur Bolt

Étape 13 : Ajouter des fonctionnalités natives

Enrichissez votre application Bolt.new avec des fonctionnalités spécifiques à l'appareil.

Option A : Intégration via l'IA

Demandez à Cursor :

Add native share, camera, and geolocation features to my Bolt.new app

Cursor installera les plugins et créera l'intégration code.

Option B : Installation manuelle des plugins

Installez des plugins natifs populaires :

npm i @capacitor/share @capacitor/camera @capacitor/geolocation

Créez un fichier d'utilitaires pour les projets React :

// utils/capacitor.js
import { Share } from '@capacitor/share';
import { Camera, CameraResultType } from '@capacitor/camera';
import { Geolocation } from '@capacitor/geolocation';

export const shareContent = async (title, text, url) => {
  await Share.share({
    title,
    text,
    url,
    dialogTitle: 'Share with friends',
  });
};

export const takePicture = async () => {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: true,
    resultType: CameraResultType.Uri
  });
  return image;
};

export const getCurrentPosition = async () => {
  const coordinates = await Geolocation.getCurrentPosition();
  return coordinates;
};

Utilisation dans vos composants

// For React components
import React from 'react';
import { shareContent, takePicture } from '../utils/capacitor';

function MyComponent() {
  const handleShare = () => {
    shareContent('My Bolt App', 'Check out this amazing app!', 'https://your-app.com');
  };

  const handleCamera = async () => {
    try {
      const photo = await takePicture();
      console.log('Photo taken:', photo);
    } catch (error) {
      console.error('Camera error:', error);
    }
  };

  return (
    <div>
      <button onClick={handleShare}>Share App</button>
      <button onClick={handleCamera}>Take Photo</button>
    </div>
  );
}

export default MyComponent;

Synchroniser les changements

Avec Cursor AI :

Sync my native feature changes to all platforms

Commande manuelle :

npx cap sync

Fonctionnalités natives ajoutées à Bolt

Étape 14 : Optimiser pour la production

Icônes d'app et splash screens

Option A : Configuration de Cursor AI

Requête :

Create app icons and splash screens for my mobile app

Option B : Création manuelle des assets

Obtenir l'outil d'assets :

npm install -D @capacitor/assets

Préparer vos graphismes :
- Créer assets/icon.png (1024x1024px)
- Créer assets/splash.png (2732x2732px)
Générer toutes les tailles automatiquement :

npx capacitor-assets generate

Assets de l'app Bolt générés

Optimiser le build

Pour les projets Vite, optimisez votre build :

// vite.config.js
export default defineConfig({
  plugins: [react()], // or vue()
  base: './',
  build: {
    outDir: 'dist',
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'], // adjust for your framework
        },
      },
    },
  },
})

Build final

Option A : Build avec Cursor AI

Create the final production build and prepare for app store deployment

Option B : Processus de build manuel

npm run build
npx cap sync
npx cap copy

Dépannage des problèmes courants

Problèmes liés au framework

Projets React/Vite

Assurez-vous base: './' est défini dans la config Vite
Vérifiez que tous les imports utilisent des chemins relatifs
Vérifiez que le dossier dist est généré correctement

Projets Vue

Assurez-vous que Vue Router utilise le mode hash pour le mobile
Vérifiez que les assets sont correctement référencés
Vérifiez que le lazy loading des composants fonctionne en contexte mobile

Projets Next.js

Assurez-vous que l'export statique est correctement configuré
Vérifiez que les imports dynamiques fonctionnent en contexte statique
Vérifiez que les routes API ne sont pas utilisées (ou sont bien gérées)

Erreurs de build

Si vous rencontrez des erreurs de build :

Supprimez node_modules et réinstallez :

rm -rf node_modules package-lock.json
npm install

Vérifiez la compatibilité mobile des dépendances du projet Bolt.new
Assurez-vous que tous les chemins relatifs sont corrects pour le déploiement mobile

Assets manquants

Pour les problèmes de chargement d’assets :

Vérifiez que tous les assets sont dans le dossier public
Use relative paths for images and files
Vérifiez que le processus de build copie bien tous les assets nécessaires

Conclusion

Félicitations ! Vous avez transformé avec succès votre projet Bolt.new en applications mobiles natives. Votre application web générée par IA peut désormais :

S’exécuter nativement sur les appareils iOS et Android
Access device features like camera, GPS, and storage
Distribuez via les stores
Offrez une expérience utilisateur mobile optimisée

Étapes suivantes

Builder Capgo: Utilisez des builds cloud natifs pour vos releases TestFlight et Play Store
Live Update(s): Implémenter Capgo pour des mises à jour OTA instantanées
Statistiques: Add mobile analytics to track user behavior
Performance: Surveillez et optimisez les performances mobiles de votre app
En test: Testez votre app sur différents appareils et tailles d'écran

Votre création Bolt.new est maintenant prête pour l'écosystème mobile !

Ressources

Découvrez comment Capgo peut vous aider à livrer des mises à jour instantanées à votre application mobile, créez un compte gratuit aujourd'hui.

Continuez avec Transform Your Bolt.new Project into Native Mobile Apps with Capacitor

Si vous utilisez Transformez votre projet Bolt.new en applications mobiles natives avec Capacitor pour planifier le travail sur les plugins natifs, connectez-l’à Capgo Répertoire des plugins pour le workflow produit dans Capgo Plugin Directory, Plugins Capacitor par Capgo pour les détails d'implémentation dans Plugins Capacitor par Capgo, Ajouter ou mettre à jour des plugins pour les détails d'implémentation dans Adding or Updating Plugins, Alternatives aux plugins Ionic Enterprise pour le workflow produit dans les alternatives aux plugins Ionic Enterprise, et Capgo Native Build pour le workflow produit dans Capgo Native Builds.