Comienza a usar App Hosting

Con una app existente de Next.js o Angular (Next.js versiones 13 o posteriores, o Angular 17.2 o versiones posteriores) 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.

Antes de comenzar

Antes de que puedas configurar Firebase App Hosting, deberás crear un proyecto de Firebase (si aún no tienes uno) y actualizar al plan Blaze.

Sigue estos pasos para crear un proyecto:

  1. En la consola de Firebase, haz clic en Agregar proyecto.

    • Para agregar recursos de Firebase a un proyecto existente de Google Cloud, ingresa el nombre del proyecto o selecciónalo en el menú desplegable.

    • Para crear un proyecto nuevo, ingresa el nombre que quieras. También puedes editar el ID del proyecto que aparece debajo del nombre.

  2. Si se te solicita, revisa y acepta las Condiciones de Firebase.

  3. Haz clic en Continuar.

  4. Opcional: Configura Google Analytics para tu proyecto para tener una experiencia óptima con cualquiera de los siguientes productos de Firebase:

    Selecciona un nombre de usuario existente Cuenta de Google Analytics o para crear una cuenta nueva.

    Si creas una cuenta nueva, selecciona la ubicación de los informes de Analytics. Luego, acepta la configuración de uso compartido de datos y las condiciones de Google Analytics para tu proyecto.

  5. Haz clic en Crear proyecto (o Agregar Firebase si usas un proyecto de Google Cloud existente).

Firebase aprovisiona los recursos para tu proyecto de forma automática. Cuando finalice, verás la página de descripción general del proyecto en Firebase console.

Paso 0 (opcional): Crea un repositorio de GitHub y una app web

Si aún no tienes una app web que resida en un repositorio de GitHub o si prefieres probar el flujo con una app de ejemplo, primero inicializa una de nuestras muestras, ya sea para Next.js o Angular:

npm init @apphosting

Puedes ejecutar la app de ejemplo de forma local con next dev o ng start. Para continuar, crea un repositorio de GitHub nuevo y envíale el código de muestra inicializado recientemente.

Paso 1: Crea un backend de App Hosting

Un backend de App Hosting es la colección de recursos administrados que App Hosting crea para compilar y ejecutar tu app web. Cualquier propietario del proyecto puede crear el primer backend de App Hosting para un proyecto con la consola de Firebase o la CLI de Firebase. Después de esta configuración inicial, los administradores de App Hosting también pueden crear y administrar backends adicionales. Para obtener más detalles, consulta Funciones de IAM de Firebase App Hosting.

Firebase console: En el menú Build, selecciona App Hosting y, luego, Comenzar.

CLI: (Versión 13.15.4 o posterior) Para crear un backend, ejecuta el siguiente comando desde la raíz del directorio del proyecto local y proporciona tu projectID y región preferida como argumentos:

firebase apphosting:backends:create --project PROJECT_ID --location us-central1

En la consola o la CLI, sigue las indicaciones para asignar un nombre a tu backend, configurar una conexión de GitHub y establecer estos parámetros de configuración de implementación básicos:

  • Establece el directorio raíz de tu app (el valor predeterminado es /).

    Por lo general, es donde se encuentra el archivo package.json.

  • Configura la rama publicada

    Esta es la rama de tu repositorio de GitHub que se implementa en tu URL publicada. A menudo, es la rama en la que se combinan las ramas de funciones o de desarrollo.

  • Acepta o rechaza los lanzamientos automáticos

    Los lanzamientos automáticos están habilitados de forma predeterminada. Cuando se complete la creación del backend, puedes elegir que tu app se implemente en App Hosting de inmediato.

Paso 2: Consulta 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.

Para ver la URL de tu app web, consulta Firebase console o ejecuta el siguiente comando de CLI:

firebase apphosting:backends:get --project PROJECT_ID {BACKEND_ID} --location us-central1

Paso 3: Envía un cambio para activar un lanzamiento

Una vez que crees tu 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 GitHub, envía un cambio a la rama publicada de la app web.
  2. Abre la pestaña App Hosting en la consola de Firebase y selecciona Ver panel para tu backend. La lista de tablas muestra la confirmación específica asociada con el lanzamiento que activó tu cambio.

Próximos pasos