Angular Firebase #1 - Configurando y desplegando tu aplicación

Voy a iniciar esta serie de artículos sobre Angular y Firebase Developer ya que considero y, personalmente, me gusta, adoro, amo este servicio de Google. Lo amo para arrancar cualquier idea loca que tengamos y queramos sacar adelante, lo amo por la versatilidad, lo amo por la facilidad, lo amo... Me parece increiblemente sencilla la integración del framework con el servicio, tanto, tanto, que me he dispuesto a sacarle unos cuantos artículos. Si quieres explorar, cacharrear, probar, quitar, poner, dar, pulir, disfrutar como un niño y hacer todo lo que quieras hacer casi sin límites, Firebase es tu opción. En muy, muy, muy poco rato tendrás tu aplicación funcionando en la nube y en un ratito mas lo tendrás con un sistema de autenticación y almacenamiento de datos.

Firebase es lo que se llama un BaaS, es decir, un Backend as Service. Esto mas o menos quiere decir que es nuestro compañero de la capa de backend. Es Firebase el que se va a encargar de todo lo relacionado con esta capa y nosotros, con unas solas indicaciones que le demos, va a saber hacerlo todo.

Firebase me gusta por la facilidad con la que se trabajar en el, empezando por el dashboard de usuario que nos provee hasta la integración tan sencilla en una aplicación realizada en Angular por ejemplo. Por lo tanto, voy a listar algunas de las bondades que Firebase tiene y que pueden enamorarte y hacerte decidirte y lanzarte a la piscina:

• Tiene una suscripción gratuíta que te dará de sobra para hacer pruebas y arrancar tus proyectos en sus inicios. Si luego quieres mas, cuando ya seas rico y vivas de tu aplicación porque tengas un millon de usuarios, también te lo dará.
• Fácil e intuitivo el crear tu proyecto desde el dashboard de usuario.
• Fácil e intuitivo trabajar con todos los servicios que nos ofrece.
• Fácil integrar con Angular, además disponemos de una librería específica para nuestro framework con el que trabajaremos mas cómodos.
• Hosting, despliega tus aplicaciones como si fueras novato.
• Autenticación, delegale el proceso de autenticación.
• Base de datos no relacional.

Creamos nuestro proyecto en Firebase
Lo primero es acceder a la plataforma a través de su URL. Podemos ir directamente desde este enlace https://console.firebase.google.com/
Aquí, una vez conectados a la plataforma (requiere una cuenta de Google) vamos a ver la pantalla donde podremos crear nuestros proyectos. Veremos algo similar a lo siguiente:

Pulsaremos sobre el boton Crear un proyecto para arrancar el flujo de creación de proyecto. Cuando pulsemos dicho botón pasaremos a una primera pantalla donde se nos solicita el nombre del proyecto, vamos a nombrarlo como MiProyecto.

Veremos unos checks azules que deberemos chequear para proseguir con el proceso de creación de proyecto. No hay mayor drama en ello y podemos hacerlo con confianza.

En el siguiente paso de la creación podremos escoger si queremos o no queremos activar Google Analytics. En este caso es a gusto del consumidor, pero es uno de los servicios gratuítos y tampoco pasa nada por mantenerlo. Además, si tu aplicación es un servicio que vas a vender, es bueno ya tenerlo activado para poder ver el impacto de tu aplicación. De todos modos y para este artículo vamos a desactivarlo para no complicar demasiado la cosa.

Pulsamos sobre Crear proyecto. Esto tardará un ratito, y en nada podremos ver ya nuestro proyecto y empezar a trabajar con el.

Pues muy bien, pulsamos sobre Continuar y nos llevará al dashboard de nuestro proyecto.
Una vez dentro del proyecto miraremos en el menú de la izquierda y clicaqueremos sobre Compilación y dentro de este menú, clicaqueremos sobre el menú Hosting.

Cuando vamos a Hosting lo que vamos a hacer es a dotar, activar en nuestro proyecto el servicio necesario para poder desplegar nuestra aplicación, es realmente lo único que ahora mismo nos interesa.

Una de las cosas buenas que tiene Firebase es que todo está bastante bien explicado y la ayuda que se brinda al usuario cuando este está creando y activando servicios en su proyecto es, cuanto menos muy de agradecer. Para mi gusto está muy bien construído y poniendo al usuario en el centro y a la aplicación posteriormente.

Todo en Firebase me parece muy bien detallado y explicado

Podemos ver la explicación para instalar el CLI de Firebase y nos da la posibilidad de que nos muestre también como añadir el SDK a nuestra aplicación. Vamos a chequear esta opción para que veamos lo que nos ofrece.

De momento no vamos a hacer nada de lo que nos indica el wizard ya que lo haremos después, cuando tengamos nuestra aplicación Angular montada y lo que haremos será enlazarla directamente con el proyecto de Firebase.

Ponemos el nombre de nuestro proyecto de nuevo, este paso servirá para posterior enlazar con mas servicios.

Punto importante aquí, nos guardamos estos datos ya que nos servirán para poder conectar nuestra aplicación con Firebase, no te confundas y disculpa mi atrevimiento, estos datos serían para mi proyecto, en tu caso deberías obtener otros totalmente diferentes.

const firebaseConfig = {
  apiKey: "AIzaSyCJdP7GXhEileaIayQRF4FZP3z6qMup9Cs",
  authDomain: "miproyecto-44c44.firebaseapp.com",
  projectId: "miproyecto-44c44",
  storageBucket: "miproyecto-44c44.appspot.com",
  messagingSenderId: "919520131653",
  appId: "1:919520131653:web:4160775faa69a84c8f012c"
};

Continuaremos a la siguiente pantalla y finalmente, pulsaremos sobre el botón Ir a Consola, en la Consola veremos por lo tanto nuestro proyecto con el servicios Hosting esperando a que despleguemos algo.

Arrancamos una aplicación Angular
No hay mayor problema en crear nuestro nuevo proyecto de Angular utilizando el CLI de este mismo. Por lo tanto vamos a pasar hacia adelante sin mas que recordar el comando que nos permite tal cosa.
ng new nuestro_proyecto

ng new nuestro_proyecto

Nuestro nuevo proyecto
Instalamos el CLI de Firebase en nuestro área de trabajo
Bien, ahora es cuando debemos recordar toda esa documentación que nos ofreció el wizard de creación de proyecto de Firebase. Esa documentación donde vimos como instalar el firebase-tools, como hacer login, etc. Como es posible que no lo recordemos vamos a ir paso a paso con esto.
Instalemos pues en firebase-tools.

npm install -g firebase-tools

Siguiente paso es entonces hacer login con Google Firebase y conectar con nuestra cuenta, de este modo, nos aparecerán nuestros proyectos y, de este modo enlazaremos el proyecto de Firebase con el proyecto Angular. A partir de ahí, ya podremos empezar a trabajar.

Enlazamos nuestra aplicación Angular con nuestro proyecto de Firebase
Hagamos pues el login y enlacemos la aplicación de Firebase que creamos anteriormente.

firebase login

Al lanzar este comando de Firebase nos llevara a la pasarela de autenticación de Googgle y desde ahí podremos seleccionar nuestra cuenta de esta empresa, de este modos ya estaremos conectados y podremos ver toda la información de nuestro proyecto Firebase.

Se nos preguntará si queremos que se recolecte información de errores, podemos decir que si y que no, pero yo siempre pienso que es bueno mandar cualquier tipo de error para que puedan corregir posibles bugs.

Después de selecionar nuestra cuenta, en este caso [email protected] se nos mostrarán varios diágolos mas donde se nos informa y pide permiso para compartir información de Google con Firebase (como si no pudiesen llegar a tenerla) siendo de ellos mismos el servicio. Nada, aceptamos todo y adelante.

Desplegamos nuestra aplicación

Ahora si!. Vamos a enlazar nuestra aplicación Angular con el proyecto en Firebase, para ello, vamos a ejecutar el siguiente comando en la raíz de nuestro proyecto.

firebase init

Lo primero que nos vamos a encontrar es si queremos iniciar proyecto en el directorio que nos muestra, que no es ni mas ni menos que la raíz donde hemos ejecutado dicho comando. Obviamente damos a que si, (está seleccionado por defecto).

El siguiente paso es activar los servicios con los que vamos a trabajar, de momento solo Hosting. Por lo tanto, nos deslizamos por la lista de servicios y en Hosting damos a espacio, veremos que se chequea con un bonito asterisco y continuamos pulsando nuestra bonita tecla enter.

Bien, hecho esto vamos finalizando ya con el turroncillo de todo esto. Siguiente paso no es ni mas ni menos que el enlace de proyecto Firebase con Angular, si, si, eso con lo que llevo dando la turra todo el articulito y que bueno, al final es el fin de este mismo.
Vamos a ver que se nos brinda la opción de crear proyecto o seleccionar uno existente y algunas cosillas mas que no nos interesa ahora mismo. Bien, pues presionaremos enter en Use an existing project, de este modo podremos ver los proyectos que tenemos dados de alta en consola de Firebase. Ahí es donde veremos el proyecto MiProyecto.

El paso siguiente a este es que nos pedirá el directorio público. No te asustes, no es nada que no sepas que es. Para nuestro caso, el directorio público será la carpeta dist/nuestro_proyecto, es decir, para nuestro caso dist/mi-proyecto-firebase.

Ahora nos va a pedir que le indiquemos si vamos a querer que realice un rewrite a index.html en caso de estar montando una SPA, como Angular es SPA, en este caso llevaremos la contraría al CLI en su valor por defecto y introduciremos una y para indicarle que si queremos que haga el rewrite.

Para este caso, le tendremos que decir NO, de momento.

Pues nada, parece que el CLI ya se ha cansado de preguntarnos cosillas y tal, ya ha terminado de configurar el proyecto. Perfecto, enhorabuena, eres un fenómeno y ya tienes enlazado tu proyecto Firebase con el de Angular.

Podemos ver toda la configuración del proyecto en el fichero firebase.json.

Pues bien, para acabar el artículo vamos a realizar el primer deploy de prueba. Para ello lo que yo suelo hacer es crear en el package.json un script y utilizarlo para que realice dicha labor.
El comando en si sería el que sigue.

"firebase:deploy": "ng b --c=production && firebase deploy --only hosting"

Así que ve metiendolo en tu package.json y ejecutalo, si todo va bien, deberías poder ver en la URL de tu proyecto lo que has desplegado, que sería ni mas ni menos que la compilación de un proyecto Angular por defecto.

Y et voilá, navegamos a la Hosting URL, que en mi caso es https://miproyecto-44c44.web.app/ y ahí está nuestra pequeñina.

Conclusiones
Como vemos, trabajar con Firebase es algo muy muy sencillo e intuitivo. Es un servicio que, en su versión gratuíta nos da de sobra para poder montar aplicaciones productivas y, si va bien, escalarlas. Que solo es para juguetear, cacharrear o lo que sea, pues ya ni te digo.
En el siguiente artículo vamos a instalar la librería de firebase para angular y vamos a integrar y delegarle el proceso de autenticación de usuarios.
Espero que os haya gustado y hayáis aprendido.

Saludos!!!