Cómo Desplegar tu Sitio Flutter Web en Firebase Hosting

Guía completa para desplegar tu aplicación Flutter Web en Firebase Hosting. Desde la configuración hasta el despliegue, aprende a publicar tu app en la nube de Google.

Alberto-Guaman

2024-12-19

8 min

Flutter Firebase Hosting Despliegue

¿Quieres que tu app Flutter Web esté disponible para todo el mundo?
¡Firebase Hosting es una de las formas más rápidas y sencillas de lograrlo!

¿Por qué usar Firebase Hosting para Flutter Web?

Gratis para proyectos pequeños y personales
SSL automático (https)
Despliegue rápido y sencillo
Integración con otros servicios de Firebase

Requisitos previos

Tener Flutter instalado (guía oficial)
Tener una cuenta de Google
Tener Node.js y npm instalados (descargar aquí)

Paso 1: Crea y construye tu proyecto Flutter Web

Si aún no tienes un proyecto:

flutter create mi_flutter_web
cd mi_flutter_web

Construye la versión web:

flutter build web

Esto generará la carpeta build/web con los archivos listos para desplegar.

Paso 2: Instala las herramientas de Firebase

npm install -g firebase-tools

Inicia sesión en Firebase:

firebase login

Paso 3: Inicializa Firebase Hosting en tu proyecto

firebase init

Selecciona Hosting (puedes usar barra espaciadora para marcar)
Elige el proyecto de Firebase que usarás (o crea uno nuevo en la consola de Firebase)
Define la carpeta pública como build/web
Elige No para configurar como SPA (a menos que uses rutas internas)
Elige No para sobrescribir index.html si te lo pregunta

Paso 4: Despliega tu sitio

firebase deploy

¡Listo! Firebase te dará una URL pública como:

https://tu-proyecto.web.app

Buenas prácticas y consejos

Usa flutter build web --release para producción
Personaliza tu dominio desde la consola de Firebase si lo deseas
Usa HTTPS siempre (Firebase lo activa por defecto)
Si usas rutas internas, configura rewrites en firebase.json

Ejemplo de archivo `firebase.json` para SPA

{
  "hosting": {
    "public": "build/web",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      { "source": "**", "destination": "/index.html" }
    ]
  }
}

Recursos útiles

¿Listo para mostrar tu app Flutter Web al mundo?
¡Con Firebase Hosting, el despliegue es rápido, seguro y gratuito!

Qué dicen nuestros clientes

Nos enorgullecemos de colaborar con empresas visionarias que buscan soluciones tecnológicas innovadoras y personalizadas.

EXCELENTEA base de 9 reseñas

Excelente profesional, rápido y amable en todo el proceso de lo que necesitas crear.

Raúl Muñoz Jara

2024-08-13

Tinguar es una empresa de diseño web de primer nivel que superó todas mis expectativas. La calidad de su trabajo es impecable.

Bryan German Leon Rueda

2024-02-22

Excelente servicio, me ayudo con mi pagina EEUU. Lo recomiendo 100%.

Jorge Luis

2024-04-26

Excelente servicio, me realizo la pagina web y va de maravilla. Recomendable.

Daniel Jaramillo

2024-03-04

Excelente servicio y atención, recomendado llevo años con esta empresa y son muy profesionales.

Adrian Alejandro Villena

2023-06-06

El gerente excelente profesional, realizó nuestra página para el centro pre universitario.. 10 / 10

Carranza Luis

2023-09-02

Increíble trabajo, muy profesional y puntual. Mi sitio web quedó perfecto.

María González

2024-01-15

Excelente atención al cliente y resultados sobresalientes. Altamente recomendado.

Carlos Rodríguez

2024-05-20

Trabajo de calidad superior, entregaron antes de lo esperado. Muy satisfecho.

Ana Martínez

2024-03-18

Profesionales de primera, entendieron perfectamente lo que necesitaba.

Luis Fernández

2024-06-10

Servicio excepcional, comunicación clara y resultados excelentes.

Patricia Silva

2024-04-05

Equipo muy competente, transformaron mi idea en una realidad digital increíble.

Roberto Torres

2024-07-22