Alojar el sitio web de Flutter en Firebase de forma gratuita

Flutter es un kit de desarrollo de software de desarrollo de interfaz de usuario. Flutter es un proyecto de código abierto mantenido por Google. Permite a los desarrolladores de software crear hermosas aplicaciones compiladas de forma nativa para IOS, Android, Web y Desktop con una única base de código. Aunque desarrollar aplicaciones flutter es muy divertido e interesante, también es importante mostrar el producto al usuario final. Y una de las mejores maneras de hacerlo es alojando la aplicación web flutter en el alojamiento firebase.

Firebase también es un producto de gafas disponible para desarrolladores como backend y servicio. Se utiliza principalmente para desarrollar y mantener el backend de las aplicaciones de software. Firebase proporciona varios servicios, como una base de datos en tiempo real y un kit de aprendizaje automático, entre otros, para ayudar a los desarrolladores a centrarse en la funcionalidad de la aplicación en lugar de esforzarse por implementarla. Entonces, aquí vamos a usar Firebase Hosting para alojar nuestra aplicación flutter. Y lo más importante es que no hay cargos por comenzar a trabajar con firebase.

requisitos previos:

• Proyecto Flutter que se va a alojar. Aquí vamos a presentar una aplicación de historia interactiva.
• Una cuenta de Gmail.
• Node JS instalado en la computadora. Nos permitirá instalar firebase CLI (interfaz de línea de comandos).

Ahora siga los pasos a continuación para alojar una aplicación web flutter en Firebase de forma gratuita:

Paso 1: crea un nuevo proyecto en firebase

El primer paso es crear un proyecto en firebase. Visite firebase.google.com y regístrese si aún no lo ha hecho y vaya a la consola. Aquí, crearemos un nuevo proyecto y le daremos cualquier nombre de nuestra elección.

Paso 2: Creación de la aplicación web flutter

En este paso crearemos la aplicación web del proyecto flutter que ya hemos preparado. Creé una aplicación de historia interactiva que cambia la historia según la entrada del usuario. Para crear la aplicación web del proyecto flutter usaremos el siguiente comando ‘ flutter build web ‘. Esto creará una aplicación web flutter liviana y fluida y la carpeta de compilación dentro del directorio web. Incluso puede verificar si hay algún problema con la compilación o no usando este comando:

flutter run -d chrome --release

Paso 3: Registro de la aplicación

En este paso, crearemos una instancia web en el proyecto firebase que hemos creado, registraremos nuestra aplicación web y generaremos un nombre (URL) para la aplicación web flutter.

Paso 4: agregar Firebase SKD

Ahora agregaremos el kit de desarrollo del sistema firebase en nuestra aplicación flutter. Ayuda a firebase a identificar la aplicación web, rastrear su versión, realizar un seguimiento de su uso. Se realiza agregando dos o tres scripts en el cuerpo de la página index.html. 

Paso 5: Instalación de Firebase CLI

En este paso, instalaremos una interfaz de línea de comandos de firebase que nos permitirá interactuar con firebase y usar sus funcionalidades. Se hace ejecutando el siguiente comando en la terminal:

npm install -g firebase-tools

Paso 6: Implementación de la aplicación

Este es el paso final, implementaremos nuestra aplicación web Flutter en el alojamiento de Firebase. Primero, necesitamos ejecutar el comando ‘firebase login ‘ para confirmar que estamos conectados con firebase. Luego inicializaremos el proceso ejecutando el comando ‘ firebase inti ‘. Y ahora necesitamos seleccionar algunas opciones que puedes ver en el video a continuación. Y después de que se hayan realizado todos los pasos de inicialización, usaremos el comando ‘ firebase deployment ‘ o el que se proporcionó en el sitio web de firebase. Este comando enviará todos los archivos al servidor de alojamiento y nos devolverá una URL a la aplicación web que hemos alojado con éxito. Y en este caso, fue https://gfg-flutter-story.web.app/, puedes revisar esto si quieres.

Vídeo completo con todos los pasos.