Comienza a usar App Hosting

Con una app existente de Next.js o Angular (versiones 13 o posteriores de Next.js, o Angular 17.2 o versiones posteriores) en un repositorio de GitHub, comenzar a usar el hosting de apps puede ser tan sencillo como crear un backend de hosting de apps 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 descritos 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 Firebase console, 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 una cuenta de Google Analytics existente o crea una nueva.

    Si decides crear 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 el 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 en un repositorio de GitHub o si prefieres probar el flujo con una app de ejemplo, comienza por inicializar uno de nuestros ejemplos, para Next.js o Angular:

npm init @apphosting

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

Paso 1: Crea un backend de App Hosting

Un backend de hosting de apps es la colección de recursos administrados que App Hosting crea para compilar y ejecutar tu app web. Puedes crear y mostrar backends de Hosting de apps con Firebase console o Firebase CLI.

Firebase console: En el menú Compilación, selecciona Hosting de apps y, luego, Comenzar.

CLI: (versión 3.9 o posterior) Para crear un backend, ejecuta el siguiente comando desde la raíz del directorio del proyecto local:

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

Tanto en la consola como en la CLI, sigue las indicaciones para asignar un nombre a tu backend, configurar una conexión de GitHub y establecer la siguiente configuración de implementación básica:

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

    Por lo general, esta es la ubicación del archivo package.json.

  • Configura la rama en vivo.

    Esta es la rama del 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 las ramas de desarrollo.

  • Aceptar o rechazar los lanzamientos automáticos

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

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

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

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

Paso 3: Activa un lanzamiento mediante la inserción de un cambio

Una vez que se haya creado 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 activa de tu repositorio de GitHub. Sigue estos pasos para realizar una prueba de la configuración del hosting de apps:

  1. En GitHub, envía un cambio a la rama activa de la app web.
  2. Abre la pestaña Hosting de apps en Firebase console y selecciona Ver panel para tu backend. En la lista de tablas, se muestra la confirmación específica asociada con el lanzamiento que activó el cambio.

Próximos pasos