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

Introduction

Bolt.new est une plateforme de développement innovante alimentée par l'intelligence artificielle qui peut générer des applications web full-stack à l'aide de divers frameworks comme React, Vue, Svelte et bien plus. Mais qu'est-ce que vous faites si vous voulez 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.

Quel que soit le framework utilisé par votre projet Bolt.new, tel que 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 & Durée

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

Exigences du Système:

Développement iOS: Ordinateur avec macOS 12.0+ (obligatoire, pas de solution de contournement)
Développement Android: N'importe quel OS (Windows/Mac/Linux)
Espace Disque Libre: 20-30 Go pour les outils de développement
Mémoire: 8 Go de RAM minimum, 16 Go recommandés

Besoin de Budget:

Apple Developer: 99 $ par an (pour l'App Store iOS)
Google Play: 25 $ une fois pour toute
Cursor Pro: 20 euros par 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

Pourquoi transformer votre application Bolt.new en application mobile ?

Portée transfrontalière: Déployez votre application générée par IA dans les magasins d'applications mobiles
Accès à l'appareil natif: Utilisez la caméra, le GPS, le système de fichiers et d'autres fonctionnalités natives
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 natif
Notifications Pushcontext

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 ?: Si vous envisagez des options de développement mobile, __CAPGO_KEEP_0__ offre des avantages significatifs par rapport à Expo, notamment pour le développement web en premier lieu :
Un codebase unique, trois plateformes: Votre site web existant React, Next.js ou Vue.js devient une application iOS, Android ET web avec zéro conversion nécessaire
Approche Web Prioritaire Véritable: Contrairement à Expo qui est mobile-first et maladroit sur le web, Capacitor traite le web comme un citoyen de premier rang
Développement Saisissant: Continuez à utiliser vos outils et vos workflows de développement web familiers
Liberté de Framework: Fonctionne avec tout framework web (React, Vue, Svelte, Next.js, etc.) - pas bloqué dans React Native comme Expo

La Principale Différence :

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

: Puisque votre projet Bolt.new est déjà une application web, Capacitor vous permet d'y ajouter une prise en charge mobile sans modifier une seule ligne de code. Expo nécessiterait de reconstruire votre projet entier pour leur framework.

Étape 1 : Configurer votre environnement de développement

Obtenez Cursor - votre éditeur AI-poussiné Code

Pour travailler de manière efficace avec votre projet Bolt.new, nous utiliserons Cursor, un éditeur intelligent code qui simplifie le développement :

Allez à cursor.sh et récupérez l'installateur pour votre système d'exploitation
Exécutez le processus d'installation
Lancez Cursor une fois qu'il est prêt

Démarrer Cursor

Configurez Cursor pour une productivité maximale

Obtenir le maximum de Cursor nécessite une configuration initiale :

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ès aux paramètres avec Command+, ou Ctrl+, (Mac) ou

(Windows) Paramètres de Cursor

Activer les fonctionnalités d'IA - Assurez-vous que l'assistance par 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 de curseur

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, portons votre projet Bolt.new dans Cursor.

Téléchargez votre projet

Naviguez vers votre projet Bolt.new dans votre navigateur
Trouvez le Téléchargez ou Téléchargez le fichier ZIP contenant votre projet Extrayez-le dans un dossier sur votre ordinateur

Ouvrez dans Cursor
Une fois extrait, ouvrez le projet dans Cursor :

Téléchargez le fichier ZIP contenant votre projet

Extrayez-le dans un dossier sur votre ordinateur

Fichiers de projet Bolt.new

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

Ouvrez dans le curseur

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
Sélectionnez un emplacement pour le sauvegarder

Cloner dans le curseur

Étape 2 : Identifiez votre cadre de projet

Bolt.new peut générer des projets en utilisant différents cadres. Identifions donc ce dont vous travaillez :

Vérifiez package.json

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

Inspection de package.json 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
Vanilla JS: Applications JavaScript plain

Étape 3 : Installer les Outils de Développement

Option A : Laisser Cursor AI Gérer Tout

Appuyez 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 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 (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 de Node.js depuis nodejs.org
Terminez l'assistant de l'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 devrait maintenant fonctionner (généralement à http://localhost:5173 pour les projets Vite).

Étape 4 : Configurez la construction pour les appareils mobiles

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

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

Ajouter à votre package.json scripts :

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

Mettre à jour next.config.js:

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

module.exports = nextConfig

Étape 5 : Construire votre projet

L'heure est venue de créer 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

Confirmer le succès de la construction

Veuillez vous assurer que votre build a généré la sortie correcte :

Projets Vite: Cherchez un dist répertoire
projets Next.js: Vérifiez si un out répertoire

sortie de build Bolt.new

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

Transformons votre application web en applications mobiles natives.

Option A : Installation 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 gérera l'ensemble du processus de mise en place.

Option B : Installation manuelle étape par étape

Installez 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 :

Nom de l'application : Nom de votre projet Bolt.new
ID de l'application : 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 dans src/ - y éditez
ios/ et android/ contexte : Site web de marketing Capgo. Rôle : Étiquette de navigation ou élément UI court. Vu dans : page trust.astro. Clé de message `et` (Et).
sont générés - n'y éditez pas npx cap sync
Après les modifications, exécutez toujours

Step 7: Configure Capacitor

Étape 7 : Configurez Capacitor

Option A : Configuration automatique avec le curseur

Demandez l'aide du curseur :

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éparez votre application pour la déploiement mobile.

Option A : Utilisation de l'IA du curseur

Dites au curseur :

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 synchronisez Bolt complet

Étape 9 : Construire des binaires prêts à être mis en magasin avec le 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 Builder 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 Builder

__CAPGO_KEEP_0__ Builder __CAPGO_KEEP_0__ Builder
CLI Builder Code Builder
__CAPGO_KEEP_0__ Builder __CAPGO_KEEP_0__ Builder

Capgo Builder

Après votre build de production et Capacitor travail de synchronisation localement :

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 les informations de signature une fois (certificats Apple, profils de provisionnement, clés de stockage Android). Consultez Gestion des informations de signature et Construire iOS à partir de Windows.

Demander une 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 Les flux de build du constructeur s'affichent dans votre terminal. Avec App Store Connect configuré, les builds iOS peuvent aller directement vers TestFlight.

Envoyez votre bundle web pour les mises à jour OTA :

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

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

Si vous avez un Mac ou souhaitez des tests d'émulateur avant les builds cloud, ouvrez les projets natifs localement :

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

Développement iOS

Option A : Via l'intelligence artificielle de Cursor

Open my iOS project in Xcode

Option B : Commande de terminal

npx cap open ios

Ouverture du projet Bolt dans Xcode

Développement Android

Option A : Via l'intelligence artificielle de Cursor

Open my Android project in Android Studio

Option B : Commande de terminal

npx cap open android

Ouverture du projet Bolt dans Android Studio

Étape 11 : Construction et exécution locale (Facultatif)

Exécution sur iOS

Configuration de Xcode (Première fois)

Choisissez votre cible:
- Cliquer sur le sélecteur de dispositif à côté du bouton Play
- For testing : Choisissez n'importe quel simulateur d'iPhone
- For real device : Connectez votre iPhone via USB
Configurez Code Signature:
- Cliquez sur le nom de votre projet dans le côté gauche de la barre latérale
- Allez dans l'onglet « Signature et capacités »
- Activez « 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 l'ID Apple dans Xcode > Paramètres > Comptes
“Échec de la construction”: Effacez le dossier de construction (Shift+Command+K) et réessayez
Problèmes de simulateur: Redémarrez le simulateur via Appareil > Redémarrer

L'application Bolt fonctionne sur iOS

Exécution sur Android

Configuration de l'IDE Android Studio (Première utilisation)

SDK Configuration (automatique):
- Android Studio détectera les composants manquants
- Cliquez sur « Installer les composants manquants SDK » lorsque vous êtes invité
- Cela télécharge ~2-3 Go de fichiers
Créez un appareil virtuel:
- Ouvrez le gestionnaire AVD (icône téléphone dans la barre d'outils)
- Cliquez sur « + Créez un appareil virtuel »
- Sélectionnez « Pixel 6 » (bon choix par défaut)
- Téléchargez l'image système lorsque vous êtes invité
- Terminez la configuration avec les options par défaut
Exécutez votre application:
- Sélectionnez votre émulateur dans le menu déroulant
- Cliquez sur le bouton ▶️ Exécuter vert
- Première construction : 10-15 minutes
- Première construction : crédit de 10-15 minutes

L'émulateur démarre automatiquement:

Résolution des problèmes Android« La synchronisation de Gradle a échoué »
Essayez File > Invalider les cachesL'émulateur est lent
Activer l'accélération matérielle dans les paramètres AVDErreurs de construction

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

L'application Bolt fonctionne sur Android

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

✅ L'application se lance sans se crasher ✅ Le contenu de Bolt.new s'affiche correctement ✅ Les boutons et les interactions fonctionnent ✅ La console ne montre pas d'erreurs rouges

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

Étape 12 : Activer Live Reload (Développement)

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

Option A : Configuration automatique avec Cursor

Demander à Cursor :

Enable live reload for my Capacitor app development

Cursor configurera tout automatiquement.

Option B : Configuration manuelle

Obtenez 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é 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

Demande de 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 les plugins natives populaires :

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

Créez 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;
};

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

Synchronisez les modifications

Avec Cursor AI :

Sync my native feature changes to all platforms

Commande manuelle :

npx cap sync

Fonctionnalités natives ajoutées Bolt

Étape 14 : Optimisation 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 d'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

Génération des actifs de l'application Bolt effectuée

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 : Construction 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ésolution des problèmes courants

Problèmes spécifiques au framework

Projets React/Vite

Vérifiez base: './' est configuré dans la configuration Vite
Vérifiez que toutes les importations utilisent des chemins relatifs
Vérifiez que le dist répertoire est généré correctement

Projets Vue

Assurez-vous que Vue Router utilise le mode hash pour les appareils mobiles
Vérifiez que les ressources sont correctement référencées
Vérifiez que le chargement différé des composants fonctionne dans le contexte mobile

Projets Next.js

Assurez-vous que l'export statique est configuré correctement
Vérifiez que les importations dynamiques fonctionnent dans le contexte statique
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
Assurez-vous que tous les chemins relatifs sont corrects pour la mise en ligne mobile

Actifs manquants

Pour les problèmes de chargement d'actifs :

Vérifiez que tous les actifs se trouvent dans le dossier public
Utilisez des chemins relatifs pour les images et les fichiers
Vérifiez que le processus de construction copie tous les actifs 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
Accéder aux fonctionnalités de l'appareil comme la caméra, le GPS et le stockage
Être distribué par les magasins d'applications
Fournir une expérience utilisateur mobile optimisée

Étapes suivantes

Capgo ConstructeurNote sur les informations d'identification d'Appflow
Titre du constructeur de build natifBonne chance avec la build V2 Capgo : Utilisez des builds cloud natifs pour les lancements de TestFlight et Play Store :
Analytiques: Ajoutez des analytiques mobiles pour suivre le comportement des utilisateurs
Performance: Suivez et optimisez la performance de votre application mobile
Test: 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 à un compte gratuit aujourd'hui. Continuez.

Continuez depuis 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 des plugins pour le flux de travail du produit dans Capgo Répertoire des plugins Capacitor Plugins par Capgo pour les détails d'implémentation dans Capacitor Plugins par Capgo Ajouter ou Mettre à Jour les Plugins pour les détails d'implémentation dans Ajouter ou Mettre à Jour les Plugins Alternatives aux Plugins Entreprise Ionic pour le flux de travail produit dans Alternatives aux Plugins Entreprise Ionic, et Capgo Bâtiments Natives pour le flux de travail produit dans Capgo Bâtiments Natives.

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

Introduction

Avant de Commencer : Exigences &amp; Durée

Pourquoi transformer votre application Bolt.new en application mobile ?

Why Capacitor Over Expo?

Étape 1 : Configurer votre environnement de développement

Obtenez Cursor - votre éditeur AI-poussiné Code

Configurez Cursor pour une productivité maximale

Étape 2 : Exportez votre projet Bolt.new

Téléchargez votre projet

Extrayez-le dans un dossier sur votre ordinateur

Alternative : Cloner à partir de GitHub

Étape 2 : Identifiez votre cadre de projet

Vérifiez package.json

Étape 3 : Installer les Outils de Développement

Option A : Laisser Cursor AI Gérer Tout

Option B : Procédure d'installation manuelle

Étape 4 : Configurez la construction pour les appareils mobiles

Option A : Configuration automatique avec Cursor AI

Option B : Configuration manuelle par framework

Pour les projets Next.js

Étape 5 : Construire votre projet

Option A : Construire avec Cursor AI

Option B : Construire Manuellement

Confirmer le succès de la construction

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

Option A : Installation rapide avec Cursor AI

Option B : Installation manuelle étape par étape

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

Step 7: Configure Capacitor

Option A : Configuration automatique avec le curseur

Option B : Configuration manuelle

Étape 8 : Construire et synchroniser

Option A : Utilisation de l'IA du curseur

Option B : Processus manuel

Étape 9 : Construire des binaires prêts à être mis en magasin avec le Capgo Builder (recommandé)

Capgo Builder

Capgo Builder

Demander une build cloud

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

Développement iOS

Développement Android

Étape 11 : Construction et exécution locale (Facultatif)

Exécution sur iOS

Configuration de Xcode (Première fois)

Exécution sur Android

Configuration de l'IDE Android Studio (Première utilisation)

L'application Bolt fonctionne sur Android

Étape 12 : Activer Live Reload (Développement)

Option A : Configuration automatique avec Cursor

Option B : Configuration manuelle

Étape 13 : Ajouter des fonctionnalités natives

Option A : Intégration puissance par l'IA

Option B : Installation manuelle des plugins

Utilisez dans vos composants

Synchronisez les modifications

Étape 14 : Optimisation pour la production

Appareils et écrans de démarrage

Optimiser la construction

Construction finale

Résolution des problèmes courants

Problèmes spécifiques au framework

Projets React/Vite

Projets Vue

Projets Next.js

Erreurs de construction

Actifs manquants

Conclusion

Étapes suivantes

Ressources

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

Avant de Commencer : Exigences & Durée