Desplegar app en Firebase Hosting: gratis y con tu dominio

Para desplegar una app en Firebase, instalas la herramienta de línea de comandos de Firebase (firebase-tools), inicializas Hosting en tu proyecto, generas el build de tu app y ejecutas firebase deploy. Tu app queda en tuproyecto.web.app con HTTPS y, si quieres, con tu propio dominio. El plan gratuito alcanza para sitios pequeños; abajo van los límites exactos y los pasos.

Firebase es la plataforma de Google para apps: base de datos (Firestore), login, almacenamiento y Hosting, que es la parte que publica tu página.

Firebase Hosting gratis: qué incluye el plan Spark

Según la página de precios de Firebase, a noviembre de 2026:

Plan	Almacenamiento	Transferencia	Precio extra
Spark (sin costo)	10 GB	360 MB/día	No se puede rebasar
Blaze (pago por uso)	10 GB sin costo, luego 0.026 USD/GB	360 MB/día sin costo, luego 0.15 USD/GB	Pagas lo que uses arriba del nivel gratuito

360 MB al día es suficiente para una página de negocio con tráfico moderado y pocas imágenes pesadas. Si tu sitio tiene videos o mucho tráfico, se agota rápido. Si te pasas a Blaze, configura alertas de presupuesto en Google Cloud para evitar sorpresas.

Pasos para desplegar tu app en Firebase

Necesitas Node.js instalado y una cuenta de Google.

1. Crea el proyecto en Firebase

Entra a console.firebase.google.com, da clic en crear proyecto y ponle nombre. Google Analytics es opcional.

2. Instala la CLI e inicia sesión

npm install -g firebase-tools
firebase login

3. Inicializa Hosting en tu proyecto

En la carpeta de tu app:

firebase init hosting

Te pregunta:

• Proyecto: elige el que creaste.
• Public directory: escribe dist si tu app es React/Vite (o build si es Create React App). Si es HTML simple, la carpeta donde esté tu index.html.
• Configure as a single-page app (rewrite all urls to /index.html)?: responde Yes si usas React Router. Evita el 404 al recargar.
• Set up automatic builds and deploys with GitHub?: opcional; crea un flujo de GitHub Actions que despliega al hacer cambios.
• Si pregunta si sobrescribir index.html, responde No.

Esto crea firebase.json y .firebaserc.

4. Genera el build y despliega

npm run build
firebase deploy --only hosting

Al terminar te muestra la URL: https://tuproyecto.web.app.

Para actualizar, repites estos dos comandos. Si tu app usa variables de entorno de Vite, deben estar en tu .env local al momento del build, porque Firebase Hosting no construye la app por ti. Ve variables de entorno en Vite y React.

Firebase Hosting custom domain: conectar tu dominio

1. En la consola de Firebase, ve a Hosting y da clic en Agregar dominio personalizado (Add custom domain).
2. Escribe tu dominio (por ejemplo tunegocio.mx o www.tunegocio.mx).
3. Firebase te muestra registros DNS: normalmente un registro TXT para verificar que el dominio es tuyo y registros A (o CNAME) para apuntarlo.
4. Créalos en el panel de tu registrador o de tu DNS (Cloudflare, Hostinger, Akky…).
5. Espera la verificación. Firebase emite el certificado SSL automáticamente; puede tardar desde minutos hasta unas horas.

Si tu dominio está en Cloudflare con el proxy activado (nube naranja), Firebase puede tardar en verificar o fallar al emitir el certificado; pon los registros en DNS only mientras se verifica. Más en conectar tu dominio a Cloudflare.

Los nombres de menús pueden cambiar con las actualizaciones de la consola.

Hosting vs. App Hosting

Firebase tiene dos productos con nombre parecido:

• Firebase Hosting: archivos estáticos (React/Vite construido, HTML). Funciona en el plan Spark.
• Firebase App Hosting: apps con servidor, como Next.js con renderizado en servidor. La página de precios indica que no aplica en Spark y que requiere cuenta de facturación.

Si tu proyecto es Next.js con funciones de servidor, compara también con Vercel en Firebase Hosting vs Vercel.

Errores comunes al desplegar en Firebase

• Aparece la página de bienvenida de Firebase en lugar de tu app: el public directory está mal o dejaste que sobrescribiera tu index.html.
• 404 al recargar rutas: no configuraste como single-page app. Agrega en firebase.json:

"rewrites": [{ "source": "**", "destination": "/index.html" }]

• Cambios que no se ven: olvidaste correr npm run build antes de firebase deploy, o el navegador tiene caché.
• Pantalla en blanco: variables de entorno vacías en el build.
• Reglas de Firestore abiertas: si tu app usa Firestore, desplegar el hosting no revisa la seguridad de tus datos. Revisa el checklist de seguridad para apps hechas con IA.

Probar antes de publicar y regresar a una versión anterior

Dos funciones de Firebase Hosting que te ahorran sustos y que mucha gente no usa:

Canales de vista previa

En lugar de publicar directo a producción, puedes subir una versión de prueba a una URL temporal:

npm run build
firebase hosting:channel:deploy prueba

Firebase te devuelve una dirección distinta a la principal para que revises los cambios (o se los mandes a tu socio) sin afectar a tus usuarios. Estos canales caducan solos después de un tiempo; consulta la duración y cómo cambiarla en la documentación de canales de vista previa.

Revertir un despliegue

Si publicaste algo roto, no tienes que arreglarlo con prisa. En la consola, dentro de Hosting, está el historial de versiones publicadas; desde ahí puedes restaurar (rollback) una versión anterior que sí funcionaba mientras corriges el problema con calma.

Qué revisar antes de dar por terminado el despliegue

1. Abre tuproyecto.web.app en incógnito y en el celular.
2. Recarga varias rutas internas para confirmar que no salga 404.
3. Revisa la consola del navegador por errores de variables o de conexión a tu base de datos.
4. Confirma que tu dominio cargue con HTTPS, con y sin www.
5. Si usas Firestore o Storage, revisa que las reglas no permitan leer o escribir a cualquiera.

Cuándo pedir ayuda

Desplegar una app estática en Firebase lo puedes hacer tú en media hora con esta guía. Si tu app usa Firestore, login y funciones, o te piden pasar a Blaze y no sabes cuánto vas a pagar, conviene revisarlo antes. En Black Engine lo revisamos por WhatsApp.