Introducción
Bolt.nuevo es una plataforma de desarrollo innovadora impulsada por inteligencia artificial que puede generar aplicaciones web de pila completa utilizando varios frameworks como React, Vue, Svelte y más. Pero ¿qué pasa si deseas llevar tu creación de Bolt.nuevo a dispositivos móviles? En este tutorial exhaustivo, mostraremos cómo exportar tu proyecto de Bolt.nuevo y transformarlo en aplicaciones móviles nativas utilizando Capacitor.
Independientemente del framework que utilice tu proyecto de Bolt.nuevo, como React, Vue o otro framework admitido, esta guía te ayudará a crear aplicaciones iOS y Android nativas con acceso a características del dispositivo como cámara, almacenamiento y notificaciones push.
Antes de Empezar: Requisitos y Tiempo
Tiempo Estimado: 3-5 horas para configuración completa
Requisitos del Sistema:
- Desarrollo de iOS: Mac con macOS 12.0+ (requerido, sin solución alternativa)
- Desarrollo de Android: Cualquier sistema operativo (Windows/Mac/Linux)
- Espacio Libre: 20-30 GB para herramientas de desarrollo
- Memoria: 8 GB de RAM mínimo, 16 GB recomendado
Presupuesto Necesario:
- Desarrollador de Apple: $99/año (para tienda de aplicaciones iOS)
- Google Play: $25 pago único
- Cursor Pro: $20/mes (opcional, acelera el desarrollo)
¿Qué Instalará:
- Node.js & npm
- Xcode (solo para Mac, para iOS)
- Android Studio (para Android)
- Diversas herramientas de línea de comandos
¿Por qué Transformar su App Bolt.new a Móvil?
- Alcance Plataforma Cruzada: Despliegue su app generada por IA en tiendas de aplicaciones móviles
- Acceso a Dispositivos Nativos: Utilice cámara, GPS, sistema de archivos y otras características nativas
- Mejora de Rendimiento: El contenedor nativo proporciona un mejor rendimiento que las vistas web
- Capacidades en modo offline: Trabaja en modo offline con soluciones de almacenamiento nativo
- Notificaciones Pushcontext: Página/área: Sitio web de marketing de Capgo. Rol: Etiqueta de IU o elemento de navegación corto. Clave de mensaje `push_notifications` (Notificaciones Push).
Why Capacitor Over Expo?
¿Por qué Capacitor en lugar de Expo?
- Si estás considerando opciones de desarrollo móvil, __CAPGO_KEEP_0__ ofrece ventajas significativas sobre Expo, especialmente para el desarrollo web primero:Una base de código única, tres plataformas
- : Tu sitio web existente de React, Next.js o Vue.js se convierte en aplicación iOS, Android y web con cero conversión necesariaNo se requiere reconstrucción
- : Lleva tu proyecto Bolt.new tal como está - no es necesario reescribirlo para un marco de trabajo diferente como requiere Expo: Unlike Expo which is mobile-first and clunky on web, Capacitor treats web as a first-class citizen
- Desarrollo Ininterrumpido: Continúa utilizando tus herramientas y flujos de trabajo de desarrollo web familiares
- Libertad de Marco: Funciona con cualquier marco de trabajo web (React, Vue, Svelte, Next.js, etc.) - no está bloqueado en React Native como Expo
La Diferencia Clave:
- Con Capacitor: Construye tu sitio web → Agrega soporte para móviles (mismo código base)
- Con Expo: Construye para móviles → Intenta hacer que el sitio web funcione (enfoque diferente, a menudo engorroso)
Desde que tu proyecto Bolt.new ya es una aplicación web, Capacitor te permite extenderla a móviles sin cambiar una sola línea de code. Expo requeriría reconstruir tu proyecto completo para su marco de trabajo.
Paso 1: Configura tu entorno de desarrollo
Obtén Cursor - Tu Editor de Code con Inteligencia Artificial
Para trabajar de manera eficiente con su proyecto Bolt.new, usaremos Cursor, un editor inteligente code que simplifica el desarrollo:
- Diríjase a cursor.sh y obtenga el instalador para su sistema operativo
- Realice el proceso de instalación
- Lanzar Cursor una vez que esté listo

Configurar Cursor para una mayor productividad
Obtener el máximo provecho de Cursor requiere algunas configuraciones inicial:
-
Considerar obtener Cursor Pro - La versión gratuita funciona, pero Pro ($20/mes) desbloquea:
- Asistencia AI ilimitada
- Modelos premium (GPT-4, Claude)
- Respuestas instantáneas
- Soporte premium
-
Acceso a Configuración con
Command+,(Mac) oCtrl+,(Windows)

- Activar características AI - Asegúrese de que la asistencia AI esté activada:

- Elegir Tu Modelo de Inteligencia Artificial - Recomendamos Claude o GPT-4:

- Habilitar Ejecución de Comandos - Deje que Cursor ejecute comandos automáticamente:

Paso 2: Exportar Tu Proyecto Bolt.new
Ahora, traigamos tu proyecto Bolt.new a Cursor.
Descargar Tu Proyecto
- Navegue hasta tu proyecto Bolt.new en su navegador
- Encuentre el Descargar o Descargar botón de descarga de Bolt

- Extraerlo a una carpeta en tu computadora
- Archivos del proyecto de Bolt.new

Una vez extraído, abre el proyecto en Cursor:
Usar
- en Cursor
File > Open FolderBotón de exportación - Seleccione el carpeta de proyecto extraído de Bolt.new
- El cursor cargará su proyecto

Alternativa: Clonar desde GitHub
Si ha conectado Bolt.new a GitHub:
- Presione
Shift+Command+PoShift+Ctrl+PBuscar por "Git: Clonar" - Ingrese la URL de su repositorio
- Seleccione un lugar para guardarla
- Clonar en Cursor

Step 2: Identifica tu marco de trabajo
La función Bolt.new puede generar proyectos utilizando diferentes marcos. Vamos a identificar qué estás trabajando con:
Revisa package.json
Abre package.json para ver qué marco de trabajo utiliza tu proyecto:

Tipos de proyectos Bolt.new comunes:
- React + Vite: Configuración más común
- Vue + Vite: Aplicaciones Vue.js
- Svelte: Aplicaciones de Svelte
- Next.js: Aplicaciones de React full-stack
- Vanilla JS: Aplicaciones de JavaScript puro
Paso 3: Instalar Herramientas de Desarrollo
Opción A: Dejar que Cursor AI se encargue de todo
- Presione
Command+K(Mac) oCtrl+K(Windows) en Cursor - Escriba esta solicitud:
Install all necessary development tools including Node.js, then install project dependencies and start the dev server
Cursor AI realizará automáticamente:
- Instale Node.js y npm si es necesario
- Configura Homebrew en macOS
- Instale todas las dependencias del proyecto
- Inicia tu servidor de desarrollo

Opción B: Proceso de instalación manual
Si prefieres el control manual o el enfoque de inteligencia artificial encuentra problemas:
Primero, abre la terminal de Cursor con Shift+Command+T (Mac) o Shift+Ctrl+T Para usuarios de macOS:
Para usuarios de macOS: Instale Xcode si no lo tiene instalado
# 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
Para usuarios de Windows:
- Descargar el instalador de Node.js desde nodejs.org
- Completar el asistente de instalación
- En la terminal de Cursor:
cd your-bolt-project
npm install
npm run dev

Su aplicación Bolt.new debería estar en ejecución ahora (normalmente en http://localhost:5173 para proyectos de Vite).
Paso 4: Configurar la compilación para móviles
Su configuración variará según el marco de trabajo de su proyecto.
Opción A: Configuración automática con la Inteligencia Artificial de Cursor
Pida a la Inteligencia Artificial de Cursor que se encargue de la configuración:
Configure my Bolt.new project for mobile deployment with proper build settings
El cursor detectará su framework y aplicará la configuración correcta.
Opción B: Configuración manual por framework
Para proyectos de React + Vite:
Editar 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,
},
},
},
})
Para proyectos de Vue + Vite:
Modificar vite.config.js:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
base: './',
build: {
outDir: 'dist',
assetsDir: 'assets',
},
})
Para proyectos de Next.js
Agregar a su package.json scripts:
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"static": "next build && next export"
}
}
Actualizar next.config.js:
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
trailingSlash: true,
images: {
unoptimized: true,
},
}
module.exports = nextConfig
Paso 5: Construya su proyecto
Es hora de crear la compilación de producción de su aplicación Bolt.new.
Opción A: Construir con Cursor AI
Simplemente pregunte a Cursor:
Build my Bolt.new project for production deployment
Cursor ejecutará el comando de construcción adecuado según su marco de trabajo.
Opción B: Construir manualmente
Para proyectos basados en Vite (React/Vue/Svelte):
npm run build

Para aplicaciones de Next.js:
npm run static
Confirmar éxito de construcción
Asegúrese de que su construcción generó la salida correcta:
- Proyectos Vite: Busque un
distdirectorio - Proyectos de Next.js: Verifique si existe un
outcarpeta

Paso 6: Agregue Capacitor a su proyecto Bolt.new
Transformemos su aplicación web en aplicaciones móviles nativas.
Opción A: Configuración rápida con Cursor AI
Pulsa Command+K (Mac) o Ctrl+K (Windows) y solicite:
Add Capacitor to my project and set up iOS and Android platforms
Cursor AI se encargará de todo el proceso de configuración.
Opción B: Configuración manual paso a paso
Instale las herramientas de línea de comandos de Capacitor:
npm install -D @capacitor/cli
Inicie su proyecto Capacitor:
npx cap init

Se le pedirá que proporcione:
- Nombre de la aplicación: Su nombre de proyecto Bolt.new
- ID de paquete: Formato como
com.yourcompany.yourapp
Continuar con la configuración manual - instale paquetes esenciales:
npm install @capacitor/core @capacitor/ios @capacitor/android
Agregar soporte para plataforma móvil:
npx cap add ios
npx cap add android

¿Qué pasó?
Su estructura de proyecto Bolt.new ahora se ve así:
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
Observaciones importantes:
- Su web code permanece en
src/- edita allí ios/yandroid/se generan - no editen- Después de los cambios, siempre ejecute
npx cap sync - Cada plataforma tiene su propio proceso de compilación
Paso 7: Configure Capacitor
Es hora de configurar Capacitor para su marco de trabajo específico.
Opción A: Autoconfiguración con Cursor
Pida ayuda a Cursor:
Configure capacitor.config.ts for my Bolt.new project build output
Opción B: Configuración Manual
Para Aplicaciones Basadas en 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;
Para Aplicaciones de 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;
Paso 8: Compilar y Sincronizar
Prepárate para la implementación móvil.
Opción A: Utilizando Cursor AI
Dile a Cursor:
Build my project and sync it with Capacitor for mobile deployment
Opción B: Proceso Manual
Ejecuta estos comandos en secuencia:
npm run build
npx cap sync

Paso 9: Compilar Binarios Listos para Tiendas con Capgo Constructor (Recomendado)
No necesitas un Mac ni una pipeline local completa de Xcode/Android Studio para enviar a la Tienda de Mac App y Google Play. Capgo Constructor Por qué __CAPGO_KEEP_0__ Constructor?
Why Capgo Builder?
- — construye desde Windows, Linux o tu entorno de codificación AI Una sola __CAPGO_KEEP_0__ flujo de trabajo
- — fácil de scriptear y delegar a Cursor, Claude CLI, o Codex — easy to script and hand off to Cursor, Claude Code, or Codex
- — envía correcciones de JS/UI por aire; reconstruye el binario nativo solo cuando cambian plugins o permisos Configura __CAPGO_KEEP_0__ Constructor
Después de tu compilación de producción y Capgo sincronización de trabajo local:
After your production build and Capacitor sync work locally:
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
Compila, firma y puede enviar compilaciones de iOS y Android desde la nube — el camino más rápido para aplicaciones codificadas con Vibe exportadas desde Bolt.new. Administración de credenciales y Crear iOS desde Windows.
Solicitar una compilación en la nube
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 El flujo de compilación de los streams se muestra en tu terminal. Con App Store Connect configurado, las compilaciones de iOS pueden ir directamente a TestFlight.
Subir tu paquete web para actualizaciones OTA:
npx @capgo/cli@latest bundle upload --channel production
Paso 10: Abrir IDEs nativos (Opcional para pruebas locales)
Si tienes un Mac o quieres pruebas de emulador antes de las compilaciones en la nube, abre los proyectos nativos localmente:
Acceder a los entornos de desarrollo nativos para tu aplicación.
Desarrollo de iOS
Opción A: A través de Cursor AI
Open my iOS project in Xcode
Opción B: Comando de Terminal
npx cap open ios

Desarrollo de Android
Opción A: A través de Cursor AI
Open my Android project in Android Studio
Opción B: Comando de Terminal
npx cap open android

Paso 11: Compilar y ejecutar localmente (opcional)
Ejecutar en iOS
Configuración de Xcode (Primera vez)
-
Elegir destino:
- Haga clic en el selector de dispositivo al lado del botón de reproducción
- Para pruebas: Elige cualquier simulador de iPhone
- Para dispositivo real: Conecta tu iPhone mediante USB
-
Configura Code de firmado:
- Haga clic en el nombre de su proyecto en el panel lateral izquierdo
- Vaya a la pestaña “Firmado y capacidades”
- Habilite “Administrar automáticamente la firmado”
- Inicie sesión con su ID de Apple
- Notas: Los dispositivos reales requieren el programa de desarrolladores de Apple (99€/año)
-
Construya su aplicación:
- Haga clic en el botón ▶️ de reproducción
- Primera compilación: 5-10 minutos (¡sea paciente!)
- Conteste en el panel de progreso en la parte superior
Solución de problemas de iOS:
- “No se encontró cuenta”: Agregar ID de Apple en Xcode > Configuración > Cuentas
- “Falló la compilación”: Limpiar carpeta de compilación (Shift+Command+K) y volver a intentarlo
- Problemas del simulador: Reiniciar simulador mediante Dispositivo > Reiniciar

Ejecutando en Android
Configuración de Android Studio (Primera vez)
-
SDK Configuración (automático):
- Android Studio detectará componentes faltantes
- Click “Instale los SDK faltantes” cuando se le solicite
- Se descargan ~2-3GB de archivos
-
Crear Dispositivo Virtual:
- Abrir Administrador de AVD (ícono de teléfono en la barra de herramientas)
- Click “+ Crear Dispositivo Virtual”
- Seleccionar “Pixel 6” (buena opción por defecto)
- Descargar la imagen del sistema cuando se le solicite
- Finalizar la configuración con opciones por defecto
-
Ejecutar Tu Aplicación:
- Seleccionar tu emulador desde el menú desplegable
- Hacer clic en el botón de ejecución verde ▶️
- Primera compilación: 10-15 minutos
- El emulador arranca automáticamente
Resolución de problemas de Android:
- “Falló la sincronización de Gradle”: Intenta Invalidear cachés > Cachés de archivo
- El emulador es lento: Habilita la aceleración de hardware en los ajustes de AVD
- Errores de compilación: Actualiza Gradle mediante las correcciones sugeridas

Lista de verificación de verificación
Después de una compilación exitosa, verifica:
✅ La aplicación se lanza sin colapsar ✅ Tu contenido de Bolt.new se muestra correctamente ✅ Los botones y las interacciones funcionan ✅ La consola no muestra errores rojos
¿Todavía tienes problemas? Los mensajes de error suelen decirte exactamente qué está mal - léelos con cuidado!
Paso 12: Habilitar Live Reload (Desarrollo)
Acelera tu flujo de trabajo de desarrollo con recarga caliente.
Opción A: Configuración Automática con Cursor
Pregúntale a Cursor:
Enable live reload for my Capacitor app development
Cursor configurará todo automáticamente.
Opción B: Configuración Manual
- Obtén tu dirección IP local:
# macOS
ipconfig getifaddr en0
# Windows
ipconfig
- Actualiza tu
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;
- Aplica la configuración:
npx cap copy

Paso 13: Agregar Características Nativas
Mejore su aplicación Bolt.new con capacidades específicas del dispositivo.
Opción A: Integración con Inteligencia Artificial
Solicitud de Cursor:
Add native share, camera, and geolocation features to my Bolt.new app
Cursor instalará plugins y creará la integración code.
Opción B: Instalación Manual de Plugins
Instale populares plugins nativos:
npm i @capacitor/share @capacitor/camera @capacitor/geolocation
Cree un archivo de utilidades para proyectos de 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;
};
Utilice en sus componentes:
// 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;
Sincronice Cambios
Con la Inteligencia Artificial de Cursor:
Sync my native feature changes to all platforms
Comando manual:
npx cap sync

Paso 14: Optimizar para Producción
Íconos de Aplicación y Pantallas de Presentación
Opción A: Configuración de AI de Cursor
Solicitud:
Create app icons and splash screens for my mobile app
Opción B: Creación de Activos Manual
- Obtén la herramienta de activos:
npm install -D @capacitor/assets
-
Prepara tus gráficos:
- Crear
assets/icon.png(1024x1024px) - Crear
assets/splash.png(2732x2732px)
- Crear
-
Generar todos los tamaños automáticamente:
npx capacitor-assets generate

Optimizar construcción
Para proyectos Vite, optimiza tu construcción:
// 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
},
},
},
},
})
Construcción final
Opción A: Construir con Cursor AI
Create the final production build and prepare for app store deployment
Opción B: Proceso de construcción manual
npm run build
npx cap sync
npx cap copy
Resolución de problemas comunes
Problemas específicos del marco
Proyectos React/Vite
- Asegúrate de que
base: './'esté configurado en la configuración de Vite - Verifique que todas las importaciones utilicen rutas relativas
- Verificar que el
distcarpeta se genere correctamente
Proyectos de Vue
- Asegúrese de que Vue Router utilice el modo hash para móviles
- Verifique que los activos se refieran correctamente
- Proyectos de Next.js
Asegúrese de que la exportación estática esté configurada correctamente
- Verifique que las importaciones dinámicas funcionen en el contexto estático
- Verifique que las rutas __CAPGO_KEEP_0__ no se utilicen (o se manejen correctamente)
- Verify that API routes are not used (or properly handled)
Proyectos de Vue
Si encuentra errores de compilación:
- Borra node_modules y reinstálalos:
rm -rf node_modules package-lock.json
npm install
- Verifica las dependencias del proyecto Bolt.new para compatibilidad con dispositivos móviles
- Asegúrate de que todos los caminos relativos estén correctos para la implementación móvil
Recursos faltantes
Para problemas de carga de recursos:
- Verifica que todos los recursos estén en la carpeta pública
- Utiliza caminos relativos para imágenes y archivos
- Verifica que el proceso de compilación copie todos los recursos necesarios
Conclusión
¡Felicidades! Has transformado exitosamente tu proyecto Bolt.new en aplicaciones móviles nativas. Tu aplicación web generada por IA ahora puede:
- Ejecutarse de manera nativa en dispositivos iOS y Android
- Acceder a características del dispositivo como cámara, GPS y almacenamiento
- Distribuirse a través de tiendas de aplicaciones
- Proporcionar una experiencia de usuario móvil optimizada
Pasos siguientes
- Capgo Constructor de aplicacionesPaso a paso para transformar Bolt en una nueva aplicación móvil con Capacitor
- : Utilizar construcciones nativas en la nube para lanzamientos de TestFlight y Play StoreActualizaciones en vivo Capgo __CAPGO_KEEP_0__
- : Implementar para actualizaciones instantáneas por vía aéreaAnálisis de datos
- Desempeño: Supervise y optimiza el rendimiento de tu aplicación móvil
- Pruebas: Prueba tu aplicación en varios dispositivos y tamaños de pantalla
Tu creación con Bolt.new está lista para el ecosistema móvil!
Recursos
- Plataforma Bolt.new
- Capacitor Documentación
- Guía de implementación móvil con Vite
- Capgo Constructor — Construcciones nacidas en la nube
- Capgo - Actualizaciones en vivo para aplicaciones Capacitor
- Base44 a móvil
Aprende cómo Capgo puede ayudarte a entregar actualizaciones instantáneas a tu aplicación móvil, regístrate para una cuenta gratuita hoy.
Sigue adelante desde Transformar tu proyecto Bolt.new en aplicaciones móviles nativas con Capacitor
Si estás utilizando Transformar tu proyecto Bolt.new en aplicaciones móviles nativas con Capacitor para planificar el trabajo de plugins nativos, conecta con Capgo Directorio de Plugins para el flujo de trabajo del producto en Capgo Directorio de Plugins, Capacitor Plugins por Capgo para los detalles de implementación en Capacitor Plugins por Capgo, Agregar o Actualizar Plugins para los detalles de implementación en Agregar o Actualizar Plugins, Alternativas de Plugins de Ionic Enterprise para el flujo de trabajo del producto en Alternativas de Plugins de Ionic Enterprise, y Capgo Construcción Nativa para el flujo de trabajo del producto en Capgo Construcción Nativa.