Convierte tu proyecto de Bolt.new en apps móviles nativas con Capacitor

Introducción

Bolt.new es una plataforma de desarrollo innovadora impulsada por IA que puede generar aplicaciones web full-stack usando varios frameworks como React, Vue, Svelte y más. Pero, ¿qué pasa si quieres llevar tu creación de Bolt.new a dispositivos móviles? En este tutorial completo, te mostraremos cómo exportar tu proyecto de Bolt.new y transformarlo en apps móviles nativas usando Capacitor.

Versión corta: el Página de Bolt a iOS y Android resume todo el proceso en una sola pantalla: exportación, Capacitor, cloud builds sin necesidad de un Mac y live updates.

Ya sea que tu proyecto de Bolt.new use React, Vue u otro framework compatible, esta guía te ayudará a crear apps nativas para iOS y Android con acceso a funciones del dispositivo como cámara, almacenamiento y notificaciones push.

Antes de empezar: requisitos y tiempo

Tiempo estimado: 3-5 horas para la configuración completa

Requisitos del sistema:

Desarrollo para iOS: Mac con macOS 12.0+ (obligatorio, sin alternativa)
Desarrollo en Android: Cualquier SO (Windows/Mac/Linux)
Espacio libre: 20-30GB para herramientas de desarrollo
Memoria: Mínimo 8GB RAM, recomendado 16GB

Presupuesto necesario:

Apple Developer: $99/año (para iOS App Store)
Google Play: pago único de $25
Cursor Pro: $20/mes (opcional, acelera el desarrollo)

Lo que instalaremos:

Node.js y npm
Xcode (solo Mac, para iOS)
Android Studio (para Android)
Varias herramientas CLI

¿Por qué pasar tu app de Bolt.new a móvil?

Alcance multiplataforma: Despliega tu app generada por IA en las tiendas de apps móviles
Acceso a funciones nativas: Usa la cámara, el GPS, el sistema de archivos y otras funciones nativas
Mejor rendimiento: El contenedor nativo rinde mejor que las web views
Capacidades offline: Trabaja offline con soluciones de almacenamiento nativo
Notificaciones push: Interactúa con usuarios mediante notificaciones push nativas

¿Por qué Capacitor en lugar de Expo?

Si estás evaluando opciones de desarrollo móvil, Capacitor ofrece ventajas significativas sobre Expo, especialmente para desarrollo web-first:

Un codebase, tres plataformas: Tu web actual en React, Next.js o Vue.js se convierte en app para iOS, Android Y web sin necesidad de conversión
Sin necesidad de reconstruir: Usa tu proyecto de Bolt.new tal cual; no hace falta reescribirlo para otro framework como exige Expo
Enfoque real Web-First: A diferencia de Expo, que es mobile-first y pesado en web, Capacitor trata a la web como un ciudadano de primera clase
Desarrollo fluido: Sigue usando tus herramientas y flujos de trabajo web habituales
Libertad de framework: Funciona con cualquier framework web (React, Vue, Svelte, Next.js, etc.), sin quedar atado a React Native como con Expo

La diferencia clave:

Con Capacitor: Crea tu web → Añade soporte móvil (mismo codebase)
Con Expo: Crea para móvil → Intenta que funcione en web (enfoque distinto, a menudo tosco)

Como tu proyecto de Bolt.new ya es una web app, Capacitor te permite llevarla a móvil sin cambiar ni una línea de code. Expo te obligaría a reconstruir todo tu proyecto para su framework.

Paso 1: Configura tu entorno de desarrollo

Descarga Cursor: tu editor Code con IA

Para trabajar de forma eficiente con tu proyecto de Bolt.new, usaremos Cursor, un editor code inteligente que simplifica el desarrollo:

Ve a cursor.sh y descarga el instalador para tu SO
Sigue el proceso de instalación
Abre Cursor cuando esté listo

Iniciar Cursor

Configura Cursor para máxima productividad

Para sacarle el máximo provecho a Cursor, necesitas una configuración inicial:

Considera adquirir Cursor Pro - La versión gratuita funciona, pero Pro ($20/mes) desbloquea:
- Asistencia de IA ilimitada
- Modelos premium (GPT-4, Claude)
- Respuestas instantáneas
- Soporte premium
Acceder a Settings con Command+, (Mac) o Ctrl+, (Windows)

Configuración de Cursor

Activar funciones de IA - Asegúrate de que la asistencia de IA esté activada:

Permitir modelos

Elige tu modelo de IA - Recomendamos Claude o GPT-4:

Seleccionar modelo de Cursor

Habilitar ejecución de comandos - Permite que Cursor ejecute comandos automáticamente:

Permitir ejecución de comandos

Paso 2: Exporta tu proyecto de Bolt.new

Ahora vamos a llevar tu proyecto de Bolt.new a Cursor.

Descarga tu proyecto

Ve a tu proyecto de Bolt.new en el navegador
Busca el Descargar o Exportar botón en la interfaz de Bolt

Descarga el archivo ZIP con tu proyecto
Descomprímelo en una carpeta de tu equipo

Archivos del proyecto de Bolt.new

Abrir en Cursor

Una vez descomprimido, abre el proyecto en Cursor:

Usa File > Open Folder en Cursor
Selecciona la carpeta extraída de tu proyecto Bolt.new
Cursor cargará tu proyecto

Abrir en Cursor

Alternativa: Clonar desde GitHub

Si conectaste Bolt.new a GitHub:

Presiona Shift+Command+P (Mac) o Shift+Ctrl+P (Windows)
Busca “Git: Clone”
Introduce la URL de tu repositorio
Elige dónde guardarlo

Clonar en Cursor

Paso 2: Identifica el framework de tu proyecto

Bolt.new puede generar proyectos con distintos frameworks. Identifiquemos con cuál estás trabajando:

Revisa el package.json

Abrir package.json para ver qué framework usa tu proyecto:

Inspección del package.json de Bolt.new

Tipos comunes de proyectos en Bolt.new:

React + Vite: Configuración más común
Vue + Vite: Aplicaciones Vue.js
Svelte: Aplicaciones Svelte
Next.js: Apps de React full-stack
Vanilla JS: Apps de JavaScript puro

Paso 3: Instalar herramientas de desarrollo

Opción A: Deja que Cursor AI lo haga todo

Presiona Command+K (Mac) o Ctrl+K (Windows) en Cursor

Escribe este prompt:

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

Cursor AI hará lo siguiente automáticamente:

Instala Node.js y npm si es necesario
Configura Homebrew en macOS
Instala todas las dependencias del proyecto
Inicia tu servidor de desarrollo

Instala Homebrew

Opción B: Proceso de instalación manual

Si prefieres el control manual o si el enfoque de IA falla:

Primero, abre la terminal de Cursor con Shift+Command+T (Mac) o Shift+Ctrl+T (Windows)

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

Para usuarios de Windows:

Descarga el instalador de Node.js desde nodejs.org
Completa el asistente de instalación
En la terminal de Cursor:

cd your-bolt-project
npm install
npm run dev

App de Bolt.new ejecutándose localmente

Tu app de Bolt.new ya debería estar corriendo (normalmente en http://localhost:5173 para proyectos Vite).

Paso 4: Configurar el build para móvil

Tu configuración variará según el framework de tu proyecto.

Opción A: Configuración automática con Cursor AI

Pide a Cursor AI que gestione la configuración:

Configure my Bolt.new project for mobile deployment with proper build settings

Cursor detectará tu framework y aplicará la configuración correcta.

Opción B: Configuración manual por framework

Para proyectos 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 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 Next.js

Añade a tu 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: Build de tu proyecto

Es hora de crear el build de producción de tu app de Bolt.new.

Opción A: Haz el build con Cursor AI

Solo pídeselo a Cursor:

Build my Bolt.new project for production deployment

Cursor ejecutará el comando de build adecuado según tu framework.

Opción B: Haz el build manualmente

Para proyectos basados en Vite (React/Vue/Svelte):

npm run build

Build de Vite en Bolt.new exitoso

Para aplicaciones Next.js:

npm run static

Confirmar éxito del build

Asegúrate de que tu build generó el output correcto:

Proyectos Vite: Busca un dist directorio
Proyectos de Next.js: Comprueba si hay un out directorio

output de build de Bolt.new

Paso 6: Añade Capacitor a tu proyecto de Bolt.new

Transformemos tu aplicación web en apps móviles nativas.

Opción A: Configuración rápida con Cursor AI

Presiona Command+K (Mac) o Ctrl+K (Windows) y solicita:

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

Instala las herramientas de CLI de Capacitor:

npm install -D @capacitor/cli

Inicializa tu proyecto Capacitor:

npx cap init

Inicialización de Capacitor en Bolt

Se te solicitará:

Nombre de la app: El nombre de tu proyecto Bolt.new
ID del Bundle: Formato: com.yourcompany.yourapp

Continúa con la configuración manual - instala los paquetes esenciales:

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

Añade soporte para plataformas móviles:

npx cap add ios
npx cap add android

Se añadieron Capacitor plataformas a Bolt

¿Qué acaba de pasar?

Así es como se ve la estructura de tu proyecto Bolt.new:

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

Notas importantes:

Tu code web se queda en src/ - edítalo ahí
ios/ y android/ se generan - no los edites
Tras los cambios, ejecuta siempre npx cap sync
Cada plataforma tiene su propio proceso de build

Paso 7: Configurar Capacitor

Es hora de configurar Capacitor para tu framework específico.

Opción A: Configuración automática con Cursor

Pide 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 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: Build y Sync

Prepara tu app para el despliegue móvil.

Opción A: Con 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 orden:

npm run build
npx cap sync

Sincronización de Capacitor con Bolt completada

Paso 9: Compila binarios listos para las tiendas con Capgo Builder (Recomendado)

No necesitas un Mac ni un pipeline local completo de Xcode/Android Studio para publicar en App Store y Google Play. Capgo Builder compila, firma y puede enviar builds de iOS y Android desde la nube — la vía más rápida para apps vibe-coded exportadas desde Bolt.new.

¿Por qué Capgo Builder?

No necesitas Mac para iOS — build desde Windows, Linux o tu entorno de programación con IA
Un único workflow de CLI — fácil de scriptear y delegar en Cursor, Claude Code o Codex
Compatible con Live Updates — lanza fixes de JS/UI OTA; reconstruye el binario nativo solo si cambian plugins o permisos

Configura Capgo Builder

Tras realizar tu build de producción y sincronizar Capacitor localmente:

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

Guarda las credenciales de firma una vez (certificados de Apple, provisioning profiles, Android keystore). Ver Gestión de credenciales y Build de iOS desde Windows.

Solicitar un build 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 Builder transmite los logs de build en tu terminal. Con App Store Connect configurado, los builds de iOS pueden ir directo a TestFlight.

Sube tu web bundle para las 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 probar con un emulador antes de los cloud builds, abre los proyectos nativos localmente:

Accede a los entornos de desarrollo nativo de tu app.

Desarrollo para iOS

Opción A: Mediante Cursor AI

Open my iOS project in Xcode

Opción B: Comando de terminal

npx cap open ios

Xcode abriendo el proyecto Bolt

Desarrollo en Android

Opción A: Mediante Cursor AI

Open my Android project in Android Studio

Opción B: Comando de terminal

npx cap open android

Android Studio abriendo el proyecto Bolt

Paso 11: Build y ejecución local (Opcional)

Ejecutando en iOS

Configuración de Xcode (Primera vez)

Elige tu objetivo:
- Al lado del botón Play, haz clic en el selector de dispositivo
- Para pruebas: Elige cualquier simulador de iPhone
- Para un dispositivo real: Conecta tu iPhone por USB
Configura el signing de Code:
- Haz clic en el nombre de tu proyecto en la barra lateral
- Ve a la pestaña “Signing & Capabilities”
- Activa “Automatically manage signing”
- Inicia sesión con tu Apple ID
- Nota: Los dispositivos reales requieren Apple Developer Program ($99/año)
Compila tu app:
- Haz clic en el botón ▶️ Play
- Primer build: 5-10 minutos (¡ten paciencia!)
- Sigue la barra de progreso en la parte superior

Solución de problemas en iOS:

“No se encontró ninguna cuenta”: Añade tu Apple ID en Xcode > Settings > Accounts
“Error al compilar”: Limpia la carpeta de build (Shift+Command+K) e inténtalo de nuevo
Problemas con el simulador: Reinicia el simulador desde Device > Restart

App de Bolt ejecutándose en iOS

Ejecutándose en Android

Configuración de Android Studio (primera vez)

SDK Setup (automático):
- Android Studio detectará los componentes que falten
- Haz clic en “Install missing SDK” cuando se te solicite
- Esto descarga unos 2-3 GB de archivos
Crear dispositivo virtual:
- Abre el AVD Manager (icono de teléfono en la barra)
- Haz clic en “+ Create Virtual Device”
- Selecciona “Pixel 6” (una buena opción por defecto)
- Descarga la imagen del sistema cuando se te solicite
- Finish setup with default options
Ejecuta tu app:
- Selecciona tu emulador en el desplegable
- Haz clic en el botón verde ▶️ Run
- Primer build: 10-15 minutos
- El emulador se inicia automáticamente

Solución de problemas en Android:

“Error en la sincronización de Gradle”: Prueba con File > Invalidate Caches
Emulador lento: Activa la aceleración por hardware en AVD settings
Errores de build: Actualiza Gradle con las correcciones sugeridas

App de Bolt ejecutándose en Android

Checklist de verificación

Tras un build exitoso, verifica:

✅ La app inicia sin cerrarse ✅ El contenido de Bolt.new se ve bien ✅ Botones e interacciones funcionan ✅ La consola no muestra errores en rojo

¿Sigues teniendo problemas? Los mensajes de error suelen decirte exactamente qué falla; ¡léelos con atención!

Paso 12: Activa Live Reload (Desarrollo)

Acelera tu workflow de desarrollo con hot reloading.

Opción A: Configuración automática con Cursor

Preguntar a Cursor:

Enable live reload for my Capacitor app development

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

Live reload habilitado en Bolt

Paso 13: Añadir funciones nativas

Mejora tu app de Bolt.new con capacidades nativas.

Opción A: Integración con IA

Petición para Cursor:

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

Cursor instalará los plugins y creará la integración code.

Opción B: Instalación manual de plugins

Instala plugins nativos populares:

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

Crea un archivo de utilidades para proyectos 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;
};

Uso en tus 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;

Sincronizar cambios

Con Cursor AI:

Sync my native feature changes to all platforms

Comando manual:

npx cap sync

Funciones nativas añadidas a Bolt

Paso 14: Optimizar para producción

Iconos de la app y splash screens

Opción A: Configuración con Cursor AI

Prompt:

Create app icons and splash screens for my mobile app

Opción B: Creación manual de assets

Obtén la herramienta de assets:

npm install -D @capacitor/assets

Prepara tus gráficos:
- Crear assets/icon.png (1024x1024px)
- Crear assets/splash.png (2732x2732px)
Genera todos los tamaños automáticamente:

npx capacitor-assets generate

Assets de la app Bolt generados

Optimizar el build

Para proyectos Vite, optimiza tu 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
        },
      },
    },
  },
})

Build final

Opción A: Haz el build con Cursor AI

Create the final production build and prepare for app store deployment

Opción B: Proceso de build manual

npm run build
npx cap sync
npx cap copy

Solución de problemas comunes

Problemas específicos del framework

Proyectos React/Vite

Ensure base: './' esté configurado en Vite
Comprueba que todos los imports usen rutas relativas
Verifica que la dist carpeta se genere correctamente

Proyectos de Vue

Asegúrate de que Vue Router use el modo hash en móvil
Comprueba que los assets estén bien referenciados
Verifica que el lazy loading de componentes funcione en contexto móvil

Proyectos de Next.js

Asegúrate de que el static export esté bien configurado
Comprueba que los dynamic imports funcionen en contexto estático
Verifica que no se usen las rutas API (o que se gestionen bien)

Errores de build

Si encuentras errores de build:

Borra node_modules y reinstala:

rm -rf node_modules package-lock.json
npm install

Revisa las dependencias del proyecto Bolt.new para la compatibilidad móvil
Asegúrate de que todas las rutas relativas sean correctas para el despliegue móvil

Assets faltantes

Para problemas de carga de assets:

Verifica que todos los assets estén en la carpeta public
Usa rutas relativas para imágenes y archivos
Comprueba que el proceso de build copie todos los assets necesarios

Conclusión

¡Felicidades! Has transformado con éxito tu proyecto de Bolt.new en aplicaciones móviles nativas. Tu web app generada con IA ahora puede:

Ejecutarse de forma nativa en dispositivos iOS y Android
Accede a funciones del dispositivo como cámara, GPS y almacenamiento
Distribuye tus apps en las app stores
Ofrece una experiencia móvil optimizada

Próximos pasos

Capgo Builder: Usa builds nativos en la nube para releases de TestFlight y Play Store
Live Updates: Implementa Capgo para actualizaciones instantáneas OTA
Analíticas: Add mobile analytics to track user behavior
Rendimiento: Monitorea y optimiza el rendimiento móvil de tu app
Pruebas: Prueba tu app en distintos dispositivos y tamaños de pantalla

¡Tu creación de Bolt.new ya está lista para el ecosistema móvil!

Recursos

Descubre cómo Capgo puede ayudarte a entregar actualizaciones instantáneas a tu app móvil, crea una cuenta gratis hoy.

Continúa con: Convierte tu proyecto de Bolt.new en apps móviles nativas con Capacitor

Si estás usando Convierte tu proyecto de Bolt.new en apps móviles nativas con Capacitor para planificar el trabajo con plugins nativos, conéctalo con Directorio de plugins de Capgo para el flujo de trabajo del producto en Capgo Plugin Directory, Plugins de Capacitor por Capgo para el detalle de implementación en los Plugins de Capacitor por Capgo, Añadir o actualizar plugins para el detalle de implementación en Agregar o actualizar plugins, Alternativas a plugins de Ionic Enterprise para el flujo de trabajo en Alternativas a plugins de Ionic Enterprise, y Native Builds de Capgo para el flujo de trabajo del producto en Capgo Native Builds.