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'IA qui peut générer des applications web full-stack à l'aide de frameworks comme React, Vue, Svelte et bien plus. Mais qu'en est-il 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 en utilisant Capacitor.

Que votre projet Bolt.new utilise React, Vue ou un autre framework pris en charge, ce guide vous aidera à créer des applications natives iOS et Android 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 configuration complète

Exigences du Système:

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

Budget nécessaire:

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

Ce que nous installerons:

• Node.js & npm
• Xcode (Mac uniquement, pour iOS)
• Android Studio (pour Android)
• Outils de ligne de commande variés

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 au dispositif 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 natives
• Notifications pushcontext : Page/zone : Site Web de marketing Capgo. Rôle : Étiquette de navigation ou élément UI court. Clé de message `push_notifications` (Notifications push).

Why Capacitor plutôt qu'Expo ?

Si vous envisagez des options de développement mobile, Capacitor offre des avantages significatifs par rapport à Expo, notamment pour le développement web en premier :

• Un seul code, trois plateformes: Votre site web existant React, Next.js ou Vue.js devient une application iOS, Android et web avec aucune conversion nécessaire
• Aucune reconstruction requise: Prenez votre projet Bolt.new tel quel - aucune nécessité de réécrire pour un framework différent comme Expo le nécessite
• Approche web en premier lieu: Contrairement à Expo qui est mobile en premier et maladroit sur web, Capacitor traite web comme un citoyen de premier rang
• Développement sans heurts: Continuez à utiliser vos outils et workflows de développement 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 le support mobile (même codebase)
• Avec Expo: Créez pour mobile → Essayez de faire fonctionner le web (approche différente, souvent maladroit)

Puisque votre projet Bolt.new est déjà une application web, Capacitor vous permet d'y ajouter le support 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 Code Piloté par l'Intelligence Artificielle

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

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

Configurer Cursor pour une productivité maximale

Pour obtenir le maximum de Cursor, il faut effectuer certaines configurations initiales :

1. Considérez l'achat de Cursor Pro - La version gratuite fonctionne, mais Pro (20 $/mois) déverouille :

   • Aide à la prise de décision illimitée
   • Modèles premium (GPT-4, Claude)
   • Réponses instantanées
   • Support premium

2. Accéder aux paramètres avec Command+, ou Ctrl+, Paramètres de la souris

3. - Assurez-vous que l'assistance AI est activée : Autoriser les modèles

4. - Nous recommandons Claude ou GPT-4 : Sélectionnez le modèle de la souris

5. Activer l'exécution de commandes - Laissez le curseur exécuter les commandes automatiquement :

Étape 2 : Exportez votre projet Bolt.new

Maintenant, apportons votre projet Bolt.new dans Cursor.

Téléchargez votre projet

1. Navigatez jusqu'à votre projet Bolt.new dans votre navigateur
2. Trouvez le Télécharger ou Étape 2 : Exportez votre projet Bolt.new Maintenant, apportons votre projet Bolt.new dans Cursor. Téléchargez votre projet et naviguez jusqu'à votre projet Bolt.new dans votre navigateur. Trouvez le bouton d'exportation dans l'interface de Bolt.

3. Téléchargez le fichier ZIP contenant votre projet
4. Extraire-le dans un dossier sur votre ordinateur

Ouvrir dans Cursor

Une fois extrait, ouvrez le projet dans Cursor :

1. Utiliser File > Open Folder dans Cursor
2. Sélectionnez le dossier de projet Bolt.new extrait
3. Cursor chargera votre projet

Alternative : Cloner à partir de GitHub

Si vous avez connecté Bolt.new à GitHub :

1. Appuyez Shift+Command+P ou Shift+Ctrl+P Recherchez « Git : Cloner »
2. Entrez l'URL de votre dépôt
3. Choisissez un emplacement pour le sauvegarder
4. Cloner dans le curseur

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

Vérifiez package.json

Ouvrez

Step 3: Install Capacitor and Add Platform package.json pour voir quel framework votre projet utilise :

Types de projet Bolt.new courants :

• React + Vite: Configuration la plus courante
• Vue + Vite: Applications Vue.js
• Svelte: Applications Svelte
• Next.js: Applications React full-stack
• JS Vanilla: Applications JavaScript plaines

Étape 3 : Installer les Outils de Développement

Option A : Laissez Cursor AI Gérer Tout

1. Appuyez Command+K ou Ctrl+K sur le clavier de votre Mac
2. Tapez cette requête :

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

Cursor AI gérera automatiquement :

• Installer Node.js et npm si nécessaire
• Configurer Homebrew sur macOS
• Installer toutes les dépendances de votre projet
• Lancer votre serveur de développement

Option B : Procédure d'installation manuelle

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

Tout d'abord, ouvrez le terminal de Cursor avec Shift+Command+T ou Shift+Ctrl+T Pour les utilisateurs de macOS :

Pour les utilisateurs de Windows :

# 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

Téléchargez l'installateur de Node.js depuis

1. nodejs.org Terminez l'assistant d'installation
2. Complete
3. Dans la console de Cursor :

cd your-bolt-project
npm install
npm run dev

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

Étape 4 : Configurer la construction pour les appareils mobiles

Votre configuration variera en fonction de votre framework de projet.

Option A : Configuration automatique avec l'IA de Cursor

Demander à l'IA de Cursor 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

Il est temps de créer la mise en 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

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 un out répertoire

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

Transformez votre application web en applications mobiles natives.

Option A : Configuration rapide avec Cursor AI

Cliquez 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 configuration.

Option B : Configuration étape par étape manuelle

Installez les outils de ligne de commande de Capacitor :

npm install -D @capacitor/cli

Initialisez votre projet Capacitor :

npx cap init

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 la configuration 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

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/ - éditez-l’ici
• ios/ And android/ ne sont pas à modifier
• Exécutez toujours après les modifications npx cap sync
• Chaque plateforme a son propre processus de build

Étape 7 : Configurez Capacitor

Configurez Capacitor pour votre framework spécifique.

Option A : Configuration automatique avec le curseur

Demandez 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éparez votre application pour la mise en ligne mobile.

Option A : Utilisation de Cursor AI

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

npm run build
npx cap sync

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

Vous n'avez pas besoin d'un Mac ou d'un pipeline local complet 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'un pipeline local complet Xcode/Android Studio pour envoyer votre application sur l'App Store et Google Play.

Capgo Builder

• __CAPGO_KEEP_0__ Builder — construire à partir de Windows, du Linux ou de votre environnement de codage AI
• Un seul flux de travail CLI. — facile à scripter et à transmettre à Cursor, Claude Code, ou Codex
• Mise à jour en temps réel — expédier les correctifs JS/UI par voie aérienne ; reconstruire le binôme natif uniquement lorsque les plugins ou les autorisations changent

Set up Capgo Builder

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

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). Consultez Gestion des identifiants et Créez une application iOS à partir de Windows.

Demander une construction 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 Constructeur flux de build des journaux dans votre terminal. Avec App Store Connect configuré, les builds iOS peuvent aller directement à TestFlight.

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

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

Étape 10 : Ouvrez les IDE 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 Cursor AI

Open my iOS project in Xcode

Option B : Commande de terminal

npx cap open ios

Développement Android

Option A : Via Cursor AI

Open my Android project in Android Studio

Option B : Commande de terminal

npx cap open android

Étape 11 : Construire et Exécuter Localement (Facultatif)

Exécuter sur iOS

Configurer Xcode (Première fois)

1. Choisissez votre cible:

   • Cliquer sur le sélecteur de appareil à côté du bouton Play
   • context: Page/zone : Capgo Builder / produit de build natif cloud. Rôle : Étiquette de navigation ou élément UI court. Clé de message `native_build_builder_credit_next` (Crédit de build natif suivant).
   • Pour les tests : Choisissez n'importe quel simulateur d'iPhone

2. Configure Code Signing:

   • Configurer la signature de __CAPGO_KEEP_0__
   • Cliquer sur le nom de votre projet dans le côté gauche de la barre latérale
   • Allez dans l'onglet « Signing & Capabilities » (Signature et capacités » ) » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » » 
   • Se connecter avec votre ID Apple
   • Note: Les appareils réels nécessitent le programme Apple Developer (99 €/an)

3. Construire votre application:

   • Cliquez sur le bouton ▶️ Play
   • Première construction : 5-10 minutes (soyez patient !)
   • Contexte : Page/zone : Capgo Builder / produit de construction native cloud. Rôle : Étiquette de navigation ou élément de navigation court. Clé de message `native_build_builder_credit_first` (Crédit de constructeur de build native premier).

Regardez la barre de progression en haut:

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

Exécution sur Android

Configuration de Android Studio (Première fois)

1. 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 des fichiers d'environ 2 à 3 Go

2. Créer un appareil virtuel:

   • Ouvrez le gestionnaire AVD (icône téléphone dans la barre d'outils)
   • 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é
   • Terminez la configuration avec les options par défaut

3. Exécutez votre application:

   • Sélectionnez votre émulateur dans le menu déroulant
   • Cliquez sur le bouton de lancement vert ▶️
   • Première construction : 10-15 minutes
   • L'émulateur démarre automatiquement

Résolution des problèmes Android:

• « Échec de synchronisation Gradle »Essayez « Invalider les caches » dans Fichier >
• Émulateur lent: Activez l'accélération matérielle dans les paramètres AVD
• Erreurs de construction: Mettez à jour Gradle via les corrections suggérées

Liste de vérification

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

✅ L'application démarre 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 : Activez Live Reload (développement)

Améliorez votre flux de travail de développement avec la rechargement chaud.

Option A : Configuration automatique avec Cursor

Demandez à Cursor :

Enable live reload for my Capacitor app development

Cursor configurera tout automatiquement.

Option B : Configuration manuelle

1. Obtenez votre adresse IP locale :

# macOS
ipconfig getifaddr en0

# Windows  
ipconfig

2. 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;

3. Appliquez la configuration :

npx cap copy

Étape 13 : Ajoutez 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

Demandez à Cursor :

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

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

Option B : Installation manuelle des plugins

Installer des plugins natifs 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;

Synchroniser les modifications

Avec le curseur AI :

Sync my native feature changes to all platforms

Commande manuelle :

npx cap sync

Étape 14 : Optimiser pour la production

Icônes de l'application et écrans de splash

Option A : Configuration du curseur AI

Demande :

Create app icons and splash screens for my mobile app

Option B : Création manuelle des actifs

1. Obtenez l'outil des actifs :

npm install -D @capacitor/assets

2. Préparez vos graphiques :

   • Créer assets/icon.png (1024x1024px)
   • Créer assets/splash.png (2732x2732px)

3. Générez toutes les tailles automatiquement :

npx capacitor-assets generate

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

Final Build

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

• S'assurer que base: './' est défini 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

• Vérifiez que Vue Router utilise le mode de hachage pour les appareils mobiles
• Vérifiez que les ressources sont correctement référencées
• Vérifiez que la mise en cache des composants fonctionne dans le contexte mobile

Projets Next.js

• Assurez-vous que l'export statique est configuré correctement
• Vérifiez que les imports 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 :

1. Effacez node_modules et réinstallez :

rm -rf node_modules package-lock.json
npm install

2. Vérifiez les dépendances du projet Bolt.new pour la compatibilité mobile
3. Assurez-vous que tous les chemins relatifs sont corrects pour la mise en production mobile

Actifs manquants

Pour les problèmes de chargement d'actifs :

1. Vérifiez que tous les actifs se trouvent dans le dossier public
2. Utilisez des chemins relatifs pour les images et les fichiers
3. 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 Constructeur: Utilisez les builds cloud natives pour les lancements de TestFlight et de Play Store
• Live Mises à jour: Implémenter Capgo : Mettre à jour instantanément par voie aérienne
• Analytique: Ajoutez des analytics mobiles pour suivre le comportement des utilisateurs
• Performances: Surveillez et optimisez les performances 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

• Plateforme Bolt.new
• Documentation Capacitor
• Guide de déploiement mobile avec Vite
• Capgo Builder — Déploiements Cloud Native
• Capgo — Mises à jour en temps réel pour les applications Capacitor
• Base44 vers mobile

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

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

If vous utilisez Transform Your Bolt.new Project into Native Mobile Apps with Capacitor pour planifier le travail de plugin natif, connectez-l’à Capgo Plugin Directory for the product workflow in Capgo Plugin Directory, Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, Ajout ou mise à jour de plugins pour les détails d'implémentation dans Ajout ou mise à jour de plugins, Alternatives de plugins Enterprise Ionic pour le flux de travail du produit dans Alternatives de plugins Enterprise Ionic, et Capgo Native Builds pour le flux de travail du produit dans Capgo Native Builds.