Desplegar una aplicación Angular sobre el servicio de hosting de Firebase

     En esta ocasión vamos a explicar como utilizar el servicio de hosting de Firebase, para subir una aplicación Angular compilada, a este espacio de hosting que nos proporciona Firebase.  Básicamente Firebase nos proporciona una url para nuestra aplicación estática(javascript) dentro de una Red de Publicación de Contenido o CDN. Y además utilizando el protocolo SSL, con lo cual nuestra url irá por https. La Url que se proporciona estará formada por el nombre de nuestro proyecto, actuando de subdominio del dominio firebaseapp.com. Ejem:

                                 https://mi-proyecto.firebaseapp.com


     Una vez que tengamos nuestros proyecto listo y acabado para subir a producción, Firebase nos permitirá apuntar nuestro dominio propio a Firebase hosting, proporcionando además automáticamente el certificado SSL.

    Pongámonos manos a la obra. Primero vamos a ir a la consola de Firebase y crearemos un proyecto de prueba que llamaremos "test-hosting-firebase". Para esto tenemos que estar logeados en google, con algún usuario.

  Una vez creado nos llevará a la página principal del proyecto:

Lo siguiente que vamos a hacer es crear el proyecto en Angular. Para esto y suponiendo que ya tenemos instalado las herramientas de linea de comandos de angular-cli, tenemos que ejecutar :

ng new test-hosting-firebase

Después de 1 o 2 minutos, el proyecto se creará. Nos metemos dentro de la carpeta del proyecto: 

cd test-hosting-firebase                                                         

Arrancamos el servidor de angular-cli, para probar que la aplicación se ejecuta correctamente: 

ng serve

     Si todo ha ido bien, deberás ver algo como esto:

Ahora si abres una pestaña en el navegador y escribes en la url :   http://localhost:4200  deberás ver una pequeña frase en la pantalla que nos dice que la aplicación angular está funcionando.

A continuación vamos a instalar las herramientas de linea de comandos de firebase. Para esto abre otra pestaña u otra ventana de linea de comandos y escribe el comando:

npm install -g firebase-tools

Una vez instalados este paquete npm, ya podemos empezar a utilizar sus comandos. 

Lo primero que necesita firebase es que estemos logeados para poder utilizar estas herramientas. Para esto, ejecutamos el comando: 

firebase login

Si ya estuvieramos logeado con alguno de nuestros usuarios de google, nos saldría algo como esto: 

Si fuera así y quisieramos validarnos con otro usuario distinto, tendríamos que ejecutar el comando:

firebase login --reauth

En cualquier caso, veras que google, nos redirecciona a una página donde tendremos que validarnos con el usuario que elijamos: 

Una vez seleccionado el usuario y habiendonos validado con él, google nos llevará a otra página donde nos pedirá que permitamos el control de firebase sobre nuestra cuenta.

Una vez permitamos, ya podremos ver la lista de proyectos asociados al usuario seleccionado. Para esto ejecutamos el comando:

firebase list

En mi caso aparece esto: 

Estando entonces logeados correctamente con el usuario que nos interesa, ya podemos inicializar y configurar nuestro proyecto angular, sobre firebase. Para esto ejecutamos el comando: 

firebase init

Nos aparecerá algo como esto: 

Elegimos el tipo de proyecto "Hosting: Configure and deploy Firebase Hosting sites"

A continuación nos van a salir la lista de proyectos que tenemos en Firebase. Tienes que elegir el que queramos asociar a nuestro proyecto angular. Lo siguiente que nos va a preguntar, es cual es en nuestra aplicación angular, el directorio de publicación. Por defecto, en una aplicación angular el directorio de publicación es "dist". La pregunta tiene el valor "public" por defecto. Nosotros escribimos dist.

 A continuación nos va a preguntar si queremos crear un fichero index.html. Un proyecto angular ya proporciona este fichero. Por tanto, en esta pregunta simplemente pulsamos enter y ya está.

Y entonces en este punto habremos finalizado el proceso de creación del fichero de configuración para Firebase, que se llama firebase.json

Quedaría desplegar nuestra aplicación en Firebase hosting. Pero antes, vamos a compilar el código de nuestra aplicación angular, y que se creará en la carpeta dist, que es la carpeta que tiene que desplegar Firebase. 

   Entonces para compilar nuestro código ejecutamos: 

ng build --prod

  Si todo va bien verás una pantalla como esta:

A continuación solo nos queda desplegar nuestra aplicación en Firebase hosting, ejecutando el comando:

firebase deploy

Cuando firebase termine de subir el código, verás que nos dice en "Hosting Url", la url donde está publicada nuestra aplicación de prueba. Escribiendo esta url en la ruta del navegador verás lo siguiente:

                           

  Como veis, el proceso es bastante fácil. Podemos tener nuestra aplicación publicada en cuestión de segundos.

   ¡¡ Hasta el próximo artículo !!