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

Introduction

Bolt.new est une plateforme de développement innovante alimentée par l'IA qui peut générer des applications web full-stack à l'aide de divers frameworks comme React, Vue, Svelte et bien plus. Mais si vous souhaitez apporter votre création Bolt.new sur les appareils mobiles ? Dans ce tutoriel complet, nous allons vous montrer comment exporter votre projet Bolt.new et le transformer en applications mobiles natives à l'aide de Capacitor.

Quelle que soit la plateforme de votre projet Bolt.new (React, Vue ou un autre framework pris en charge), ce guide vous aidera à créer des applications iOS et Android natives avec accès aux fonctionnalités de l'appareil comme la caméra, le stockage et les notifications push.

Avant de commencer : Exigences et durée

Durée estimée: 3-5 heures pour une mise en place complète

Exigences système:

Développement iOSMac avec macOS 12.0+ (nécessaire, pas de solution alternative)
Développement Android: N'importe quel système d'exploitation (Windows/Mac/Linux)
Espace Disponible: 20-30 Go pour les outils de développement
Mémoire: 8 Go de RAM minimum, 16 Go recommandé

Budget nécessaire:

Besoin de Budget99 $/an (pour l'App Store iOS)
Google Play: une facture unique de 25 $
Cursor Pro: 20 €/mois (facultatif, accélère le développement)

Ce que nous installerons:

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

Why Transform Your Bolt.new App to Mobile?

Portée transfrontalière: Deploy your AI-generated app to mobile app stores
Accès à l'appareil natif: Use camera, GPS, file system, and other native features
Performances améliorées: Le conteneur natif fournit des performances meilleures que les vues web
Capacités hors ligne: Travaillez hors ligne avec des solutions de stockage natives
Notifications Push: Engagez les utilisateurs avec un support de notifications push natives

Why Capacitor Over Expo?

If you’re considering mobile development options, Capacitor offers significant advantages over Expo, especially for web-first development:

Pourquoi __CAPGO_KEEP_0__ plutôt que Expo ?: Votre site web existant React, Next.js ou Vue.js devient une application iOS, Android et web avec aucune conversion nécessaire.
Pas de Rebuild Nécessaire: Prenez votre projet Bolt.new tel quel - pas besoin de réécrire pour un autre framework comme Expo le nécessite
Approche Web d'abord: Contrairement à Expo qui est mobile-first et maladroit sur le web, Capacitor traite le web comme un citoyen de premier rang
Développement sans heurts: Continuez à utiliser vos outils et vos workflows de développement web familiers
Liberté de framework: Fonctionne avec n'importe quel framework web (React, Vue, Svelte, Next.js, etc.) - pas bloqué sur React Native comme Expo

La différence clé :

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

Since your Bolt.new project is already a web application, Capacitor lets you extend it to mobile without changing a single line of code. Expo would require rebuilding your entire project for their framework.

Étape 1 : Configurer votre environnement de développement

Get Cursor - Your AI-Powered Code Editor

Afin de travailler efficacement avec votre projet Bolt.new, nous utiliserons Cursorune intelligente éditeur de code qui simplifie le développement :

Allez à cursor.sh and grab the installer for your OS
Exécutez le processus d'installation
Lancez Cursor une fois qu'il est prêt

Démarrer Cursor

Configurer le curseur pour une productivité maximale

Pour obtenir le maximum de Cursor, il faut effectuer quelques paramètres initiaux :

Considérez l'achat de Cursor Pro - La version gratuite fonctionne, mais Pro (20 $/mois) déverouille :
- Aide à l'intelligence artificielle illimitée
- Modèles premium (GPT-4, Claude)
- Réponses instantanées
- Support premium
Accéder aux paramètres avec Command+, ou Ctrl+, (Mac) ou

Paramètres de la souris

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

Autoriser les modèles

Choisissez votre modèl’AI - Nous recommandons Claude ou GPT-4 :

Sélectionner le modèle de la souris

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

Maintenant, amenons votre projet Bolt.new dans Cursor.

Téléchargez votre projet

Naviguez jusqu'à votre projet Bolt.new dans votre navigateur
Trouvez le Télécharger ou Export ouvrir le bouton de téléchargement de Bolt

Extraire-le dans un dossier sur votre ordinateur
Extrayez-le dans un dossier sur votre ordinateur.

Ouvrir dans Cursor

ouvrir le bouton d'export

Une fois extrait, ouvrez le projet dans Cursor :

Utilisez File > Open Folder dans Cursor
Sélectionnez le dossier de votre projet extrait Bolt.new
Cursor chargera votre projet

Ouvrez dans Cursor

Alternative : Cloner à partir de GitHub

Si vous avez connecté Bolt.new à GitHub :

Appuyez Shift+Command+P (Mac) ou Shift+Ctrl+P (Windows)
Recherchez « Git : Cloner »
Entrez l'URL de votre dépôt
Choisissez un emplacement pour le sauvegarder

Cloner dans le curseur

Étape 2 : Identifier votre cadre de projet

Bolt.new peut générer des projets à l'aide de différents frameworks. Identifions donc ce dont vous travaillez :

Vérifiez package.json

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

Inspection de package.json de Bolt.new

Types de projets Bolt.new courants :

React + Vite: Configuration la plus courante
Vue + Vite: Applications Vue.js
Svelte: Applications Svelte
Next.js: Applications React full-stack
JavaScript vanilla: Applications JavaScript

Étape 3 : Installer les Outils de Développement

Option A : Laisser Cursor AI Gérer Tout

Appuyez Command+K (Mac) ou Ctrl+K (Windows) en mode de curseur

Tapez cette requête :

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

Cursor AI effectuera automatiquement :

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

Installez Homebrew

Option B : Procédure d'installation manuelle

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

Ouvrez d'abord le terminal de Cursor avec Shift+Command+T ou (Mac) Shift+Ctrl+T ou (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 depuis 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 fonctionne localement

Votre application Bolt.new doit maintenant fonctionner (généralement à http://localhost:5173 pour les projets Vite).

Step 4: Configure Build for Mobile

Votre configuration variera en fonction de votre cadre de 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

Le curseur détectera votre framework et appliquera la bonne configuration.

Option B : Configuration manuelle par framework

Pour les Projets React + Vite :

Edit 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 React + 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 Vue + Vite :

Ajoutez à votre package.json Ajoutez à votre

{
  "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 : Construisez votre projet

Créez maintenant la version de production de votre application Bolt.new.

Option A : Construire avec Cursor AI

Demandez simplement à Cursor :

Build my Bolt.new project for production deployment

Cursor exécutera la commande de construction appropriée en fonction de votre framework.

Option B : Construire Manuellement

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

npm run build

Bolt.new Vite build réussi

Pour les applications Next.js :

npm run static

Confirmez le succès de la construction

Vérifiez que votre build a généré la sortie correcte :

Projets Vite: Cherchez un dist répertoire
Projets Next.jsVérifiez si un out répertoire

Bolt.new sortie de build

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

Option A : Installation rapide avec Cursor AI

Option A : Configuration rapide avec AI Cursor

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

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

Cursor AI gérera l'ensemble du processus de mise en place.

Option B : Installation manuelle étape par étape

Install les outils de ligne de commande de Capacitor.

npm install -D @capacitor/cli

Initialisez votre projet Capacitor :

npx cap init

Capacitor initialisation Bolt

Vous serez invité à fournir :

App name : Nom de votre projet Bolt.new
ID de bundle : Format comme com.yourcompany.yourapp

Continuez avec l'installation manuelle - installez les packages essentiels :

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

Ajoutez le support des plateformes mobiles :

npx cap add ios
npx cap add android

Capacitor plateformes ajoutées Bolt

Qu'est-ce qui s'est passé ?

La structure de votre projet Bolt.new ressemble maintenant à 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

Remarques importantes:

Votre web code reste inchangé src/ - modifiez-l’ici
ios/ et android/ ne sont pas à modifier
sont générés - ne modifiez pas npx cap sync
Après les modifications, exécutez toujours

Step 7: Configure Capacitor

Time to configure Capacitor for your specific framework.

Option A : Configuration automatique avec Cursor

Demander l'aide de 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 : Construire et synchroniser

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

Option A : Utilisation de l'IA Cursor

Dites à Cursor :

Build my project and sync it with Capacitor for mobile deployment

Option B : Processus manuel

Exécutez ces commandes dans la séquence :

npm run build
npx cap sync

Capacitor synchronise Bolt complet

Étape 9 : Construire des fichiers binaires prêts à l'exploitation avec Capgo Builder (recommandé)

Vous n'avez pas besoin d'un Mac ou d'une pipeline locale complète Xcode/Android Studio pour envoyer votre application sur l'App Store et Google Play. Capgo Constructeur Compile, sign et soumettre des builds iOS et Android depuis le cloud — la voie la plus rapide pour les applications vibe codées exportées de Bolt.new.

Capgo Builder

Pas de Mac nécessaire pour iOS — construire à partir de Windows, Linux ou votre environnement de codage AI
Un seul flux de travail CLI. — facile à scripter et à transmettre à Cursor, Claude Code, ou Codex
__CAPGO_KEEP_0__ Builder — expédier les correctifs JS/UI par air; reconstruire le binôme natif uniquement lorsque les plugins ou les autorisations changent

Configurez le Capgo Builder

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

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 clés de signature une fois (certificats Apple, profils de provisioning, clés de stockage Android). Voir Gestion des Identifiants et Créez une application iOS à partir de Windows.

Construirez iOS à partir de Windows

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 Constructeur diffuse les journaux de construction dans votre terminal. Avec App Store Connect configuré, les builds iOS peuvent aller directement vers TestFlight.

Téléchargez votre bundle web pour les mises à jour OTA :

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

Téléchargez votre bundle web pour les mises à jour OTA :

Étape 10 : Ouvrez les IDEs natifs (Facultatif pour les tests locaux)

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

Développement iOS

Option A : Via Cursor AI

Open my iOS project in Xcode

Option B : Commande Terminal

npx cap open ios

Ouverture du projet Bolt dans Xcode

Développement Android

Option A : Via Cursor AI

Open my Android project in Android Studio

Option B : Commande Terminal

npx cap open android

Ouverture du projet Bolt dans Android Studio

Étape 11 : Construction et Exécution Localement (Facultatif)

Exécution sur iOS

Configuration de Xcode (Première fois)

Choisissez votre cible:
- En regardant le bouton Play, cliquez sur le sélecteur de appareil
- Pour les tests : Sélectionnez tout simulateur d'iPhone
- Pour un appareil réel : Connectez votre iPhone via USB
Configurez Code Signature:
- Cliquez sur le nom de votre projet dans le côté gauche
- Allez dans l'onglet « Signature & Capacités »
- Activer « Gérer automatiquement la signature »
- Connectez-vous avec votre ID Apple
- Note: Les appareils réels nécessitent le programme Apple Developer (99 $/an)
Construirez votre application:
- Cliquez sur le bouton Play ▶️
- Première construction : 5-10 minutes (soyez patient !)
- Regardez la barre de progression en haut

Résolution des problèmes iOS:

“Aucun compte trouvé” : Ajoutez votre ID Apple dans Xcode > Paramètres > Comptes
“Échec de la construction” : Nettoyez le dossier de construction (Shift+Command+K) et réessayez
Problèmes du simulateur : Redémarrez le simulateur via Appareil > Redémarrer

L'application Bolt fonctionne sur iOS

L'application fonctionne sur Android

Configuration de Android Studio (Première utilisation)

Configuration SDK (automatique) :
- Android Studio détecte les composants manquants
- Click “Install missing SDK” when prompted
- Cela télécharge ~2-3 Go de fichiers
Créer un appareil virtuel:
- Open AVD Manager (phone icon in toolbar)
- Cliquez sur « + Créer un appareil virtuel »
- Sélectionnez « Pixel 6 » (bon choix par défaut)
- Téléchargez l'image système lorsque vous êtes invité
- Finish setup with default options
Exécutez votre application:
- Choisissez votre émulateur dans le menu déroulant
- Cliquez sur le bouton de lancement vert ▶️
- Première construction : 10-15 minutes
- Première construction : 10-15 minutes

L'émulateur démarre automatiquement:

Résolution des problèmes Android“La synchronisation de Gradle a échoué”
Essayez File > Réinitialiser les cachesActiver l'accélération matérielle dans les paramètres de l'AVD
Erreurs de construction: Mettre à jour Gradle via les corrections proposées

Mettre à jour Gradle via les corrections suggérées

Contrôle de vérification

Après une construction réussie, vérifiez :

L'application démarre sans plantage ✅ Le contenu de Bolt.new s'affiche correctement ✅ Les boutons et les interactions fonctionnent ✅ Le console n'affiche pas d'erreurs rouges

Vous rencontrez toujours des problèmes ? Les messages d'erreur vous disent généralement exactement ce qui ne va pas - lisez-les soigneusement !

Étape 12 : Activez le rechargement en direct (développement)

Accélérez votre flux de travail de développement avec le rechargement chaud.

Option A : Installation automatique avec le curseur

Posez la question

Enable live reload for my Capacitor app development

Le curseur configura tout automatiquement.

Option B : Configuration manuelle

Cursor configurera tout automatiquement .

# macOS
ipconfig getifaddr en0

# Windows  
ipconfig

Mettre à 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;

Appliquer la configuration :

npx cap copy

Live reload activé Bolt

Étape 13 : Ajouter des fonctionnalités natives

Améliorez votre application Bolt.new avec des capacités spécifiques au dispositif.

Option A : Intégration puissance par l'IA

Demander à 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

Installer des plugins natives populaires :

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

Créer un fichier de 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;
};

Utiliser 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;

Mettre à jour les modifications

Avec Cursor AI :

Sync my native feature changes to all platforms

Commande manuelle :

npx cap sync

Caractéristiques natives ajoutées Bolt

Étape 14 : Optimiser pour la production

Appareils et écrans de démarrage

Option A : Configuration de Cursor AI

Demander :

Create app icons and splash screens for my mobile app

Option B : Création manuelle des actifs

Obtenez l'outil des actifs :

npm install -D @capacitor/assets

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

npx capacitor-assets generate

Actifs de l'application Bolt générés

Optimiser la construction

Pour les projets Vite, optimisez votre construction :

// 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
        },
      },
    },
  },
})

Construction finale

Option A : Construire avec Cursor AI

Create the final production build and prepare for app store deployment

Option B : Processus de construction manuel

npm run build
npx cap sync
npx cap copy

Résoudre les problèmes courants

Problèmes spécifiques au framework

Projets React/Vite

Vérifiez base: './' est configuré dans la configuration Vite
Check that all imports use relative paths
Vérifiez que le dist dossier est généré correctement

Projets Vue

Make sure Vue Router uses hash mode for mobile
Vérifiez que les ressources sont correctement référencées
Verify component lazy loading works in mobile context

Projets Next.js

Vérifiez que l'export statique est configuré correctement
Check that dynamic imports work in static context
Vérifiez que les routes API ne sont pas utilisées (ou gérées correctement)

Erreurs de construction

Si vous rencontrez des erreurs de construction :

Nettoyez node_modules et réinstallez :

rm -rf node_modules package-lock.json
npm install

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

Atouts manquants

Pour les problèmes de chargement d'atouts :

Vérifiez que tous les atouts se trouvent dans le dossier public
Use relative paths for images and files
Vérifiez que le processus de construction copie tous les atouts nécessaires

Conclusion

Félicitations ! Vous avez réussi à transformer votre projet Bolt.new en applications mobiles natives. Votre application web générée par IA peut maintenant :

Exécuter nativement sur les appareils iOS et Android
Access device features like camera, GPS, and storage
Être distribué par les magasins d'applications
Fournir une expérience utilisateur mobile optimisée

Étapes suivantes

Capgo ConstructeurUtilisez des builds cloud natives pour les lancements sur TestFlight et Play Store
Mises à jour en direct: Implement Capgo Mises à jour en temps réel
Analytiques: Add mobile analytics to track user behavior
Performances: Suivez et optimisez les performances de votre application mobile
Tests: Testez votre application sur divers appareils et tailles d'écran

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

Ressources

Apprenez comment Capgo peut vous aider à délivrer des mises à jour instantanées à votre application mobile inscrivez-vous pour un compte gratuit aujourd'hui.

Continuez à partir de Transformez votre projet Bolt.new en applications mobiles natives avec Capacitor

Si vous utilisez Transformez votre projet Bolt.new en applications mobiles natives avec Capacitor pour planifier le travail de plugin natif, connectez-l’avec Capgo Répertoire de plugin pour le flux de travail du produit dans Capgo Répertoire de plugin Capacitor Plugins by Capgo Pour les détails d'implémentation dans Capacitor Plugins par Capgo. Ajouter ou Mettre à Jour les Plugins pour le détail d'implémentation dans Ajouter ou Mettre à Jour les Plugins Alternatives aux Plugins Entreprise d'Ionic pour le flux de travail du produit dans les alternatives Ionic Enterprise Plugin Capgo Bâtiments Natives pour le flux de travail du produit dans Capgo Bâtiments Natives.