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 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 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 ejemplo de manera local con next dev o ng start. Para continuar, crea un nuevo repositorio de GitHub y envía allí el código de muestra recién inicializado.

Paso 1: Crea un backend de Hosting de apps

Un backend de App Hosting es la colección de recursos administrados que App Hosting crea para compilar y ejecutar tu app web. Puedes crear y enumerar backends de App Hosting 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 y proporciona tu ID del proyecto como argumento (como vista previa, solo se admite la región us-central1):

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

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

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

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

  • Configura la rama activa

    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 atributos o de desarrollo.

  • Aceptar o rechazar lanzamientos automáticos

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

Paso 2: Visualiza la app implementada

Cuando creas un backend, Firebase te proporciona un subdominio sin costo donde 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, revisa 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 el envío de un cambio

Una vez que se crea el backend y tienes una URL publicada, puedes 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. Para realizar una prueba de la 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 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