Comienza a usar App Hosting

Con una app de Next.js o Angular existente (versiones 13.5.x o posteriores de Next.js o 18.2.x o posteriores de Angular) en un repositorio de GitHub, comenzar a usar App Hosting puede ser tan sencillo como crear un backend de App Hosting y, luego, iniciar un lanzamiento con un envío a tu rama activa. Si no tienes una app, usa una de nuestras apps de ejemplo para seguir los pasos que se describen en esta guía.

Para obtener asistencia de IA, copia la siguiente instrucción en tu agente de programación con IA (como Antigravity, Claude Code, Codex y Cursor). Puedes personalizar la instrucción y, luego, iterar con tu agente. Visita Habilidades de Firebase para agentes para obtener información detallada sobre la instalación. 

Help me use Firebase in my app.
1. Make sure that **Firebase agent skills** are installed and updated. For Claude Code, Codex, or Cursor agents, help me install the Firebase plugin. For other agents, run `npx skills add firebase/agent-skills`.  Always try to use **Firebase agent skills** for Firebase-related tasks.
2. Help me use Firebase to host my web app. Set up my app to use Firebase, and then deploy my app.

En esta guía, se describe cómo configurar App Hosting en Firebase console para implementar automáticamente cada vez que se realiza una confirmación nueva en un repositorio de GitHub. Al final de este flujo, tendrás una app de ejemplo de Next.js o Angular activa que se volverá a implementar cada vez que confirmes un cambio nuevo en la rama main de tu repositorio de GitHub.

Aunque esta guía se enfoca en el flujo recomendado de la consola de Firebase, existen otras formas de implementar, como usar la CLI de Firebase para implementar código local sin una conexión de GitHub.

Paso 1: Bifurca el repositorio de demostración

Visita https://github.com/firebase/apphosting-adapters y selecciona Fork.

Paso 2: Crea un backend de App Hosting

  1. En la consola de Firebase, navega a Hosting y Serverless > App Hosting.

  2. Haz clic en Comenzar.

  3. Si se te solicita, actualiza al plan de precios Blaze de pago por uso para usar App Hosting.

Una captura de pantalla de la configuración del backend de App Hosting.

Sigue las instrucciones para completar estos pasos:

  • Elige una región principal (por lo general, la más cercana a tus usuarios).
  • Conectarse a GitHub Elige el repositorio que acabas de crear bifurcando el repositorio apphosting-adapters.
  • Establece el directorio raíz de tu app en una de las siguientes opciones:
  • Establece la rama activa como main.
  • Habilitar los lanzamientos automáticos (los lanzamientos automáticos están habilitados de forma predeterminada)
  • Asigna un nombre a tu backend.
  • Selecciona tu entorno de ejecución. De forma predeterminada, se preselecciona la versión más reciente recomendada de Node.js.
    • Configura las actualizaciones automáticas de imágenes base (ABIU). La ABIU está habilitada de forma predeterminada y aplica automáticamente parches de seguridad a tu entorno subyacente. Puedes inhabilitar la ABIU seleccionando "No especificado" para tu entorno de ejecución.
  • Crear una app web nueva de Firebase

Selecciona Finalizar e implementar.

Paso 3: Visualiza la app implementada

Cuando creas un backend, Firebase te proporciona un subdominio sin costo en el que los usuarios finales pueden visitar tu app web. Su formato es backend-id--project-id.us-central1.hosted.app.

En la fila Información del backend del panel de tu backend, selecciona el vínculo a tu backend activo para ver tu sitio web nuevo:

Una captura de pantalla de la fila de información del backend con el vínculo de la app publicada destacado

Paso 4: Activa un lanzamiento enviando un cambio

Una vez que se cree el backend y tengas una URL publicada, podrás activar el lanzamiento de una versión nueva de tu app web cada vez que envíes cambios a la rama publicada de tu repositorio de GitHub. Para realizar una prueba de tu configuración de App Hosting, sigue estos pasos:

  1. En la bifurcación del repositorio de GitHub de demostración, navega a la fuente de la página principal de la app de demostración, realiza cualquier edición reconocible que desees y, luego, envía el cambio a la rama principal. Para encontrar tu página principal, sigue estos pasos:

    • Next.js: /starters/nextjs/basic/src/app/page.tsx
    • Angular: /starters/angular/basic/src/app/pages/home/home.component.html

  2. En la consola de Firebase, supervisa App Hosting a medida que se implementa el cambio nuevo en producción. Cuando se complete el lanzamiento, podrás ver el cambio en la página principal de la app.

Próximos pasos