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 de IA (como Antigravity, Claude Code, Codex y Cursor). Puedes personalizar la instrucción y realizar iteraciones 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

Si ya tienes una aplicación de Next.js o Angular en un repositorio de GitHub, puedes omitir este paso y continuar con el Paso 2: Crea un backend de App Hosting. No necesitas bifurcar ni instalar el repositorio de apphosting-adapters para implementar tu propia app.

Si no tienes una aplicación existente y quieres implementar una app de ejemplo, visita https://github.com/firebase/apphosting-adapters y selecciona Fork. Además de las herramientas del adaptador de framework, este repositorio incluye las plantillas de inicio oficiales de Next.js y Angular en el directorio /starters.

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 indicaciones 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 creaste con la bifurcación del repositorio apphosting-adapters o elige el repositorio de tu aplicación existente.

  • Establece el directorio raíz de tu app:

    • Si implementas tu propia aplicación, especifica el directorio raíz de tu app (el valor predeterminado es /). Por lo general, este directorio es donde se encuentra tu archivo package.json.

    • Si usas el repositorio de demostración apphosting-adapters, establece el directorio raíz de tu app en una de las siguientes rutas de acceso:

    • /starters/nextjs/basic

    • /starters/angular/basic

  • 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 tu 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 nuevo cambio en producción. Cuando se complete el lanzamiento, podrás ver el cambio en la página principal de la app.

Próximos pasos