Comienza a usar App Hosting

Con una app existente de Next.js o Angular (Next.js versiones 13.5.x+ o Angular 18.2.x+) 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 publicada. Si no tienes una app, usa una de nuestras apps de ejemplo para seguir los pasos que se describen en esta guía.

En esta guía, se describe cómo configurar App Hosting en la consola de Firebase para que se implemente automáticamente cada vez que se realice 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 publicada que se volverá a implementar cada vez que confirmes un cambio nuevo en la rama main de tu repositorio de GitHub.

Si bien esta guía se centra en el flujo recomendado de Firebase console, existen otras formas de implementar, incluido el uso de Firebase CLI 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 Bifurcar.

Paso 2: Crea un backend de App Hosting

  1. En la consola Firebase, navega a Hosting y sin servidor > 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.

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 región más cercana a tus usuarios).
  • Conéctate a GitHub. Elige el repositorio que acabas de crear bifurcando el repositorio firebase-framework-tools.
  • Establece el directorio raíz de tu app en uno de los siguientes:
  • Establece la rama publicada como main.
  • Habilita los lanzamientos automáticos (están habilitados de forma predeterminada).
  • Asigna un nombre a tu backend.
  • Crea 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 para tu backend, selecciona el vínculo a tu backend publicado para ver tu nuevo sitio web:

Una captura de pantalla de la fila de información de backend con el vínculo de la app en vivo destacado.

Paso 4: Activa un lanzamiento enviando un cambio

Una vez que se crea tu backend y tienes una URL publicada, puedes activar el lanzamiento de una versión nueva de tu app web cada vez que envías cambios a la rama publicada de tu repositorio de GitHub. Para realizar una prueba de tu App Hosting configuración:

  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, haz lo siguiente:

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

  2. En la Firebase console, supervisa App Hosting mientras se lanza tu nuevo cambio a producción. Cuando se complete el lanzamiento, podrás ver el cambio en la página principal de la app.

Próximos pasos