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 divers frameworks comme React, Vue, Svelte et plus encore. 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 __CAPGO_KEEP_0__ Capacitor.

Que votre projet Bolt.new utilise 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

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

Exigences du système:

Développement iOS: Mac avec macOS 12.0+ (obligatoire, pas de workaround)
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:

Développeur Apple: 99 €/an (pour l'App Store iOS)
Google Play: 25 € une fois payé
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)
Divers outils de ligne de commande

Pourquoi transformer votre application Bolt.new en mobile ?

Portée Multiplateforme: Déployez votre application générée par IA dans les magasins d'applications mobiles
Accès au Dispositif Native: 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 Push: Engagez les utilisateurs avec un support de notifications push natives

Pourquoi Capacitor au lieu d'Expo ?

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

One Codebase, Trois Platesformes: Votre site web existant React, Next.js ou Vue.js devient une application iOS, Android et web avec zéro conversion nécessaire
Aucune Reconstruction Nécessaire: Prenez votre projet Bolt.new tel quel - pas besoin de réécrire pour un framework différent comme Expo le nécessite
Approche Web d'Abord Vraie: Contrairement à Expo qui est mobile-first et maladroit sur web, Capacitor traite web comme un citoyen de premier rang
Développement Saisissable: Continuez à utiliser vos outils et workflows de développement web familiers
Liberté de Framework: Fonctionne avec n'importe quel framework web (React, Vue, Svelte, Next.js, etc.) - pas bloqué dans React Native comme Expo

La Différence Clé :

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

Étant donné que 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 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 puissant 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 :

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

Démarrer Cursor

Configurez Cursor pour une productivité maximale

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

Considérez de passer à 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édez aux paramètres Avec Command+, (Mac) ou Ctrl+, (Windows)

Paramètres de la souris

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

Permettre aux modèles

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

Choisissez le modèle de la souris

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

Permettre les commandes d'exécution

Étape 2 : Exportez votre projet Bolt.new

Amenez maintenant 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 Exporter bouton dans l'interface de Bolt

Téléchargez le fichier ZIP contenant votre projet
Extraie-le dans un dossier de votre ordinateur

Bolt.new fichiers de projet

Ouvrir dans Cursor

Une fois extrait, ouvrez le projet dans Cursor :

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

Ouvrir 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: Clone »
Entrez l'URL de votre dépôt
Choisissez 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 ce dont vous disposez :

Vérifiez package.json

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

L'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
Vanilla JS: Applications JavaScript simples

Étape 3 : Installer les outils de développement

Option A : Laissez Cursor AI s'occuper de 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 s'occupera 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 par l'IA rencontre des problèmes :

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

Pour les utilisateurs de 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 de Windows :

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

cd your-bolt-project
npm install
npm run dev

Bolt.new app en cours d'exécution localement

Votre application Bolt.new devrait maintenant être en cours d'exécution (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 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

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

Option B : Configuration manuelle par cadre

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

For Projet Next.js

Ajoutez-le à vos 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

Temps de création de 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

La construction de Bolt.new Vite a réussi

Pour les Applications Next.js :

npm run static

Confirmer le Succès de la Construction

Assurez-vous 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

Sortie de construction 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 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 d'installation.

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

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/ - modifiez-le là
ios/ et android/ sont générés - ne les modifiez pas
Après les modifications, exécutez toujours npx cap sync
Chaque plateforme a son propre processus de build

Étape 7 : Configurez Capacitor

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

Option A : Configuration automatique avec la souris

Demandez de l'aide à la Souris :

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 l'IA de la Souris

Dites à Cursor :

Build my project and sync it with Capacitor for mobile deployment

Option B : Processus manuel

Exécutez ces commandes dans cette séquence :

npm run build
npx cap sync

Capacitor synchronisez Bolt complete

Étape 9 : Ouvrez les IDEs natives

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

Ouvrez le 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

Ouvrir le projet Bolt dans Android Studio

Étape 10 : Construire et exécuter votre application mobile

Exécuter sur iOS

Configurer Xcode (Première fois)

Choisissez votre cible:
- Cliquez sur le sélecteur de appareil à côté du bouton Play
- Pour les tests : Choisissez n'importe quel simulateur d'iPhone
- Pour appareil réel : Connectez votre iPhone via USB
Configurer Code Signature:
- Cliquez sur le nom de votre projet dans le panneau de gauche
- Allez dans l'onglet « Signature et capacités »
- Activer « Gérer automatiquement la signature »
- Se connecter avec votre ID Apple
- Remarque : Les appareils réels nécessitent le programme Apple Developer (99 $/an)
Construire Votre Application:
- Cliquez sur le bouton ▶️ Play
- Première construction : 5-10 minutes (soyez patient !)
- Regardez la barre de progression en haut

Dépannage iOS:

« Aucun compte trouvé » : Ajouter un 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

L'application Bolt fonctionne sur iOS

Exécuter sur Android

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

SDK Configuration (automatique) :
- L'IDE Android Studio détecte les composants manquants
- Cliquez sur « Installer les composants manquants SDK » lorsque vous êtes invité
- Cela télécharge ~2-3 Go de fichiers
Créer un appareil virtuel:
- Ouvrir le gestionnaire AVD (icône de 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é
- Terminer 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 de lancement vert ▶️
- Première construction : 10-15 minutes
- L'émulateur démarre automatiquement

Résolution des problèmes Android:

« La synchronisation Gradle a échoué »: Essayez Fichier > Annuler la cache
É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

Bolt s'exécutant sur Android

Liste de vérification de vérification

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

✅ L'application démarre sans crasher ✅ Votre contenu 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 11 : Activez Live Reload (Développement)

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

Option A : Configuration automatique avec le curseur

Demander au curseur :

Enable live reload for my Capacitor app development

Le curseur configurera tout automatiquement.

Option B : Configuration manuelle

Obtenez votre adresse IP locale :

# 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 12 : 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'intelligence artificielle

Demande provenant de la souris de la souris :

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

La souris 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;

Synchro des modifications :

Avec la souris AI :

Sync my native feature changes to all platforms

Commande manuelle :

npx cap sync

Fonctionnalités natives ajoutées Bolt :

Étape 13 : Optimisez pour la production :

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

Option A : Configuration de l'assistant de curseur AI

Demande :

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

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

Optimiser la construction

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

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

Assurez-vous que base: './' est défini dans la configuration Vite
Vérifiez que toutes les importations utilisent des chemins de réference
Vérifiez que le dist dossier 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 assets sont correctement référencés
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 :

Effacez 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 le déploiement mobile

Ressources manquantes

Pour les problèmes de chargement de ressources :

Vérifiez que toutes les ressources sont dans le dossier public
Utilisez des chemins relatifs pour les images et les fichiers
Vérifiez que le processus de build copie toutes les ressources 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é via les magasins d'applications
Proposer une expérience utilisateur mobile optimisée

Étapes suivantes

Mises à jour en direct: Mettre en œuvre Capgo pour des mises à jour en temps réel sur les appareils mobiles
Analytique : Ajouter des analyses mobiles pour suivre le comportement des utilisateurs
Performances : Surveiller et optimiser les performances de votre application mobile
Tests : Tester votre application sur divers 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 à délivrer des mises à jour instantanées à votre application mobile, s'inscrire à un compte gratuit aujourd'hui.

Continuez de là 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-le avec Capgo Plugin Directory pour le flux de travail du produit dans le Répertoire de plugins Capgo Plugins Capacitor par Capgo pour le détail d'implémentation dans Plugins Capacitor par Capgo, Ajout ou Mise à jour de Plugins pour le détail d'implémentation dans Ajout ou Mise à jour de Plugins, Alternatives de plugins Ionic Enterprise pour le flux de travail du produit dans Alternatives de plugins Ionic Enterprise, et Capgo Builds natifs pour le flux de travail du produit dans Capgo Builds natifs.