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:

¿Eres nuevo en Firebase o Cloud?

Sigue estos pasos si no conoces Firebase o Google Cloud.
También puedes seguir estos pasos si quieres crear un proyecto de Firebase completamente nuevo (y su proyecto de Google Cloud subyacente).

  1. Accede a la consola de Firebase.
  2. Haz clic en el botón para crear un proyecto de Firebase nuevo.

  3. En el campo de texto, ingresa un nombre del proyecto.

    Si formas parte de una organización de Google Cloud, puedes seleccionar de forma opcional en qué carpeta crearás tu proyecto.

  4. Si se te solicita, revisa y acepta las Condiciones de Firebase y, luego, haz clic en Continuar.
  5. (Opcional) Habilita la asistencia de IA en la consola de Firebase (llamada "Gemini en Firebase"), que puede ayudarte a comenzar y optimizar tu proceso de desarrollo.

  6. 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.

  7. Haz clic en Crear proyecto.

Firebase crea tu proyecto, aprovisiona algunos recursos iniciales y habilita APIs importantes. Cuando finalice el proceso, verás la página de descripción general del proyecto en la consola de Firebase.

Proyecto de Cloud existente

Sigue estos pasos si quieres comenzar a usar Firebase con un proyecto de Google Cloud existente. Obtén más información para "agregar Firebase" a un proyecto de Google Cloud existente.

  1. Accede a la consola de Firebase con la cuenta que te da acceso al proyecto de Google Cloud existente.
  2. Haz clic en el botón para crear un proyecto de Firebase nuevo.
  3. En la parte inferior de la página, haz clic en Agregar Firebase al proyecto de Google Cloud.
  4. En el campo de texto, comienza a ingresar el nombre del proyecto del proyecto existente y, luego, selecciónalo en la lista que aparece.
  5. Haz clic en Abrir proyecto.
  6. Si se te solicita, revisa y acepta las Condiciones de Firebase y, luego, haz clic en Continuar.
  7. (Opcional) Habilita la asistencia de IA en la consola de Firebase (llamada "Gemini en Firebase"), que puede ayudarte a comenzar y optimizar tu proceso de desarrollo.

  8. 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.

  9. Haz clic en Agregar Firebase:

Firebase agrega Firebase a tu proyecto existente. Cuando finalice el proceso, verás la página de descripción general del proyecto de Firebase en la consola de Firebase.

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