acambronero
acambronero
@acambronero@blogpocket.es

Este es el blog federado de Antonio Cambronero, fundador, autor y CEO de Blogpocket. Informático, blogger y profesor, con más de 20 años de experiencia en departamentos de soporte técnico informático, análisis de sistemas, productividad, optimización de procesos, atención al cliente y formación, en empresas multinacionales.

119 publicaciones
51 seguidores

Cómo llevar una app generada en Google AI Studio o Gemini a Netlify

En la serie de tres posts sobre cómo crear una app para móviles vimos cómo llevarla a Netlify (para su uso público sin pasar por tiendas), si el desarrollo era en local (en nuestro ordenador) con Expo.

Pero supongamos que hemos generado la app para móviles en Google AI Studio (sección Build).

Lo primero que hay que hacer, básicamente, es descomprimir el archivo que hemos descargado de Google AI Studio.

Punto de partida (muy importante)

Ahora tienes una carpeta con archivos como:

blogpocket-scenes/
├─ package.json
├─ index.tsx
├─ app.tsx
├─ vite.config.ts
└─ …

👉 Esa carpeta ya es el proyecto.
No hay que “instalarla” como una app: lo único que hay que hacer es prepararla para ejecutarla.

Abre la Terminal en la carpeta correcta

Opción A (la más sencilla en macOS)

  1. Abre Finder
  2. Entra en la carpeta del proyecto (por ej. blogpocket-scenes)
  3. Haz clic derecho dentro de la carpeta
  4. Elige: Nuevo Terminal en la carpeta
    (o “Servicios → Nueva terminal en la carpeta”, según versión de macOS)

La terminal se abrirá ya situada ahí.

Verás algo parecido a:

Antonio@MacBook blogpocket-scenes %

Eso significa: estás en la carpeta correcta.

npm install

Cuando descargas el proyecto:

  • no incluye las dependencias
  • la carpeta node_modules no viene en el ZIP

npm install hace esto:

  • lee package.json
  • descarga todo lo necesario
  • crea la carpeta node_modules

Ejecuta:

npm install

La primera vez puede tardar un poco. Cuando termina, verás una nueva carpeta:

node_modules/

👉 En ese momento, el proyecto ya está preparado.

Ejecutar la app en local

Ahora sí, puedes arrancarla:

npm run dev

Qué ocurre:

  • Vite arranca un servidor local
  • La terminal te mostrará algo como: Local: http://localhost:5173
  • Abres esa URL en el navegador
  • La app funciona

🎉 Ya estás ejecutando la app.

Generar la versión para publicar (Netlify)

Cuando quieras publicarla:

npm run build

Esto crea una carpeta nueva:

dist/

👉 Esa carpeta es la que se sube a Netlify (no todo el proyecto).

Resumen

  • Al descargar el proyecto, no hay que “instalarlo” como una app tradicional.
  • Basta con abrir la terminal en la carpeta del proyecto y ejecutar npm install.
  • Ese comando descarga automáticamente todo lo necesario. A partir de ahí, la app se puede ejecutar en local o generar su versión final para la web.

Regla mental

Si un proyecto trae un package.json, se prepara con npm install.

Aplicaciones web creadas en Google AI Studio

Si en lugar de una app para móviles (tiene package.json), creas una aplicación web (HTML, CSS, JS), entonces no es necesario crear la carpeta Dist y puedes desplegar la carpeta descargada y descromprimida directamente en Netlify.

En este vídeo de Joaquín Barberá, se explica muy bien este último caso con una app web para Crear CURSOS INTERACTIVOS a partir de PDF o VÍDEOS usando NOTEBOOKLM y GEMINI

¿Y si usamos Gemini?

En Gemini podemos también crear aplicaciones web, PWAs y app para móviles.

Sin embargo, en este caso no es necesario desplegar el proyecto en Netlify para hacerlo público porque Gemini proporciona un enlace a tal efecto. Por ejemplo, así publiqué la app Navidad Mágica.

Téngase en cuenta que la app Navidad Mágica emplea Nano Banana que es un recurso de Google. Si desplegases la app en Netlify solo funcionaría haciendo uso de la API (pero habría que camuflarla para que no estuviese en abierto).

El uso de Nano Banana no implica consumo de créditos del desarrollador cuando otro usuario hace uso del link proporcionado por Gemini. Solo es preciso que ejecutes el link con una sesión de Google abierta.

¿Y las PWAs?

Las PWAs son aplicaciones web y, por lo tanto, tanto si se desarrollan en local, en Google AI Studio o Gemini (o incluso ChatGPT) no es necesario prepararlas para Netlify. También puedes subir manualmente los archivos a un servidor web (creando bases de datos u otros recurso si es necesario) y hacer pública la carpeta donde resida la aplicación.

Resumen

Esquema resumen.

En resumen, podemos desarrollar una app para móviles en local con Expo o en los entornos propios de Google AI Studio o Gemini. Dependiendo del caso, podremos publicarlas directamente en Netlify o previamente tendremos que preparar una carpeta «Dist».

En el esquema se aprecian los distintos casos.