Scroll Infinito con Angular 6 y Firestore
Scroll Infinito con Angular 6 y Firestore


Poner Angular en producción con Firebase es muy sencillo gracias a firebase-tools, que son una serie de comandos que nos permiten interactuar con firebase desde la CLI.

En mi caso voy a utilizar Angular 5 y el proyecto será generado con Angular CLI, pero cualquier versión >= 2 de Angular debería funcionar.

Dentro de Firebase existe una opción llamada hosting la cual podemos utilizar para hostear nuestras aplicaciones en sus servidores, y además, de una forma muy sencilla, podemos mapear un dominio de nuestra propiedad si no queremos utilizar su dominio (firebaseapp).

Poner Angular en producción con Firebase

Lo primero que debemos hacer obviamente es tener una cuenta en Firebase, una vez la tengamos, debemos instalar con el siguiente comando.

Ahora que tenemos las herramientas de firebase en la CLI, vamos a iniciar sesión con ella utilizando el siguiente comando.

Eso abrirá un tab en tu navegador para que inicies sesión en la consola de firebase, una vez hecho, colócate dentro de tu proyecto de Angular y ejecuta el siguiente código.

Este comando habrá creado un archivo llamado firebase.json sin ningún contenido, vamos a modificarlo por lo siguiente para decirle dónde estará nuestra app para un entorno de producción.

De esta forma le decimos a firebase que cuando subamos nuestro proyecto, el directorio que tiene que utilizar es dist, para generar este directorio simplemente ejecuta el siguiente comando.

Gracias al comando anterior se habrá creado el directorio dist con nuestra app lista para un entorno de producción, ya sólo nos queda hacer el deploy de nuestra app con los servicios de firebase, y eso lo conseguimos con el siguiente comando.

Una vez haya finalizado verás en la terminal un mensaje similar al siguiente.

Si accedes ahora a la url Hosting URL que te ha proporcionado firebase en el navegador verás que tu app ya está funcionando.

Si por algún motivo decides deshabilitar el servicio de hosting y que tu app ya no sea pública, simplemente ejecuta el siguiente comando en la terminal y lo tendrás listo al momento.

Así de sencillo es poner Angular en producción con Firebase utilizando Angular CLI.