Ir a la consola

Primeros pasos con Firebase Hosting

Firebase Hosting te brinda una manera rápida, segura y confiable de alojar los elementos estáticos de tu app (HTML, CSS, JavaScript, archivos multimedia, entre otros), además de entregar contenido dinámico y alojar microservicios.

Nuestro hosting de producción está respaldado por una red de distribución de contenidos (CDN) global. Según la configuración predeterminada, Hosting entrega contenido mediante SSL. Además, se puede usar con tu propio dominio personalizado o en los subdominios gratuitos de tu proyecto en web.app y firebaseapp.com.

Antes de comenzar

Antes de que puedas configurar Firebase Hosting, debes crear un proyecto de Firebase.

Paso 1: Instala Firebase CLI

Firebase CLI (interfaz de línea de comandos) requiere Node.js y npm (Node Package Manager).

  1. Instala Node.js mediante una de las siguientes opciones. Con la instalación de Node.js también se instala automáticamente npm.

    • En macOS o Linux, usa nvm (Node Version Manager).
    • En Windows, usa nvm-windows.
  2. Instala Firebase CLI con npm; para ello, ejecuta el siguiente comando:

    npm install -g firebase-tools

    Este comando instala el comandofirebase disponible de manera global. Para actualizar a la versión más reciente de Firebase CLI, vuelve a ejecutar el mismo comando npm install.

  3. Accede a Firebase con tu Cuenta de Google. Para ello, ejecuta el siguiente comando:

    firebase login

    Este comando conecta tu máquina local a Firebase y te otorga acceso a los proyectos de Firebase.

  4. Para probar que la autenticación se configuró de manera correcta (y para enumerar todos los proyectos de Firebase), ejecuta el siguiente comando:

    firebase list

    La lista que se muestra debe ser la misma que los proyectos de Firebase enumerados en Firebase console.

Actualiza a la versión más reciente de CLI

Asegúrate de usar la versión más reciente de Firebase CLI; para ello, vuelve a ejecutar el comando de instalación de CLI:

npm install -g firebase-tools

Paso 2: Inicializa tu proyecto

Para conectar el proyecto local al proyecto de Firebase, ejecuta el siguiente comando desde la raíz del directorio del proyecto local:

firebase init

Durante la inicialización del proyecto, desde los mensajes de Firebase CLI:

  1. Selecciona para configurar Hosting.

    Si deseas configurar otros productos de Firebase para tu proyecto, consulta la documentación para obtener información de configuración. Ten en cuenta que siempre puedes ejecutar firebase init más tarde a fin de configurar más productos de Firebase.

  2. Selecciona un proyecto de Firebase para conectar al directorio del proyecto local.

    El proyecto de Firebase seleccionado es el proyecto de Firebase "predeterminado" para el directorio del proyecto local. Para conectar proyectos adicionales de Firebase al directorio del proyecto local, configura alias de proyectos.

  3. Especifica un directorio para usar como directorio raíz público.

    Este directorio contiene todos los archivos estáticos entregados públicamente, incluido el archivo index.html y otros elementos que desees implementar en Firebase Hosting.

    • La configuración predeterminada para el directorio raíz público se denomina public.

      • Puedes especificar el directorio raíz público ahora o puedes especificarlo más tarde en el archivo de configuración firebase.json.

      • Si seleccionas la configuración predeterminada y aún no tienes un directorio denominado public, Firebase lo crea para ti.

    • Si aún no tienes un archivo index.html válido o un archivo 404.html en el directorio raíz público, Firebase los crea para ti.

  4. Crea una configuración para tu sitio.

    Si seleccionas crear una app de una página, Firebase agrega automáticamente las configuraciones de reescritura para ti.

Al final de la inicialización, Firebase crea y agrega automáticamente dos archivos a la raíz del directorio de la app local:

Paso 3: Realiza implementaciones en tu sitio

Para realizar implementaciones en tu sitio, ejecuta el siguiente comando desde la raíz del directorio del proyecto local:

firebase deploy

Con este comando, se implementa una actualización en los sitios de Hosting predeterminados de tu proyecto de Firebase:

  • projectID.web.app
  • projectID.firebaseapp.com

Obtén más información sobre cómo realizar implementaciones y pruebas locales en tu sitio.

Pasos siguientes

Ya estás listo para compartir tu sitio con el mundo. También puedes obtener información para realizar las acciones que se indican a continuación:

Además, consulta la documentación completa de Firebase CLI.