Comienza a usar App Hosting

Con una app existente de Next.js o Angular (versiones de Next.js 13.5.x o posteriores, o Angular 18.2.x o 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 una confirmación en 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 actualizarlo 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 un nombre. 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, lo que te permitirá tener una experiencia óptima con los siguientes productos de Firebase: Firebase A/B Testing, Cloud Messaging, Crashlytics, In-App Messaging y Remote Config (incluida la personalización).

    Selecciona una cuenta de Google Analytics existente o crea una 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 agregarás Firebase a un proyecto de Google Cloud existente).

Firebase aprovisiona los recursos para tu proyecto de Firebase 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 en un repositorio de GitHub o si prefieres probar el flujo con una app de muestra, comienza por inicializar 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ía el código de muestra recién inicializado a él.

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.

Firebase console: En el menú Compilación, 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 como argumento:

firebase apphosting:backends:create --project PROJECT_ID

Tanto para la consola como para la CLI, sigue las indicaciones para elegir una región, 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.

  • Establece la rama en vivo

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

  • Aceptar o rechazar 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.

  • Asigna un nombre a tu backend.

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}

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

Una vez que se cree tu backend y tengas una URL activa, podrás activar el lanzamiento de una nueva versión de tu app web cada vez que envíes cambios a la rama activa 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 activa de la app web.
  2. Abre la pestaña App Hosting en la consola de Firebase y selecciona Ver panel para tu backend. En la lista de tablas, se muestra la confirmación específica asociada con el lanzamiento activado por tu cambio.

Próximos pasos