Implementación y despliegue de una aplicación Angular en Firebase Hosting
Cuando se desarrolla una aplicación web, hay dos consideraciones a tener en cuenta, que tecnología usaremos para desarrollarla y donde vamos a desplegarla para hacerla accesible en Internet.
El objetivo de este post es mostrar un caso práctico que da respuesta a las consideraciones antes mencionadas.
En primer lugar crearemos una aplicación web básica con Angular sin profundizar en los detalles, dado que no es el objetivo de este post. Una vez tengamos nuestra aplicación implementada y probada en nuestro entorno local, procederemos a desplegarla en Firebase Hosting para que cualquier usuario pueda acceder a ella desde cualquier browser o dispositivo móvil con una simple URL.
En caso que nunca hayas desarrollado una web con Angular, en la web oficial encontrarás una documentación para iniciarse que realmente vale la pena.
https://angular.io/guide/quickstart
Por si no estás familiarizado, Firebase es una plataforma de Google que ofrece un stack de servicios en Cloud para cubrir todas las necesidades de aplicaciones web y mobile. Entre dichos servicios nos encontramos:
- NoSQL Database
- Object Storage
- Messaging Service
- Serverless Function
- etc...
Entre toda la gama de servicios que nos ofrece Firebase, en este post nos centraremos en Firebase Hosting que nos permite con un simple comando desplegar nuestra aplicación web y hacerla accesible en Internet.
Firebase ofrece todos estos servicios gratuitamente siempre que no excedamos unas cuotas que nos indican en su web oficial. Podremos disponer de una infraestructura completa en Cloud totalmente gratuita para desarrollar nuestros propios laboratorios.
Para tener más detalle sobre lo que nos ofrece Firebase, podéis acceder a su web oficial.
Ahora sí, vamos a proceder a crear una aplicación Angular, pero para ello primero necesitaremos instalarnos Node.js (si es que no lo tenemos ya instalado). Podéis descargaros Node.js de la siguiente web:
Para asegurarnos que tenemos Node.js instalado en nuestro sistema, abrimos un shell y ejecutamos el siguiente comando que nos devolverá la versión de Node.js que tenemos instalada en nuestro sistema.
>node --version
v8.9.4
>npm --version
5.6.0
Requeriremos tener instalado el cliente Angular CLI para agilizarnos el trabajo de crear nuestra aplicación Angular. Para ello ejecutaremos el siguiente comando.
Ahora simplemente tenemos que generar el esqueleto de nuestra aplicación con un simple comando que ejecutaremos en el directorio donde queramos crearla.
El proceso tarda unos minutos debido a que deben traerse bastantes dependencias y copiarlas en el directorio de nuestra aplicación. Pasado este tiempo se habrá generado un directorio con el nombre indicado (ejemplo) y dentro de este tendremos una aplicación de ejemplo generada sobre la que procederíamos a adaptarla a nuestros requerimientos.
Como mencionamos anteriormente, el objetivo de este post no es mostrar como funciona el desarrollo en Angular, de manera que al tener una aplicación de ejemplo generada cubre todo lo deseable para poder proseguir.
Con el fin de asegurarnos que nuestra aplicación funciona, ejecutaremos el siguiente comando de Angular CLI que nos levantará un servidor local donde se desplegará la aplicación generada y podremos validar que todo se ha construido correctamente.
Tras finalizar, se ha levantado un servidor con nuestra aplicación corriendo en él y escuchando por el puerto 4200. Simplemente abriremos un browser e introduciremos la siguiente URL.
Si todo ha ido bien deberíamos poder visualizar una página como la siguiente.
Llegados a este punto, podemos decir que tenemos nuestra aplicación Angular funcionando en nuestra máquina pero ahora queda un paso final que consiste en desplegarla en algún servidor para hacerla pública en Internet y que otras personas puedan acceder a ella.
Lo primero que necesitaremos es crearnos una cuenta de Firebase y para ello simplemente necesitáis una cuenta de Google y hacer login en la siguiente URL.
Si no teníais la cuenta de Firebase habilitada, se os mostrarán un seguido de páginas con unas instrucciones muy básicas para poder hacerlo y al final deberíais poder visualizar la página de bienvenida.
Pulsaremos sobre "Añadir proyecto" para crear el proyecto de Firebase donde vamos a desplegar nuestra aplicación Angular.
En el campo "Nombre del proyecto" lo informaremos con el nombre de nuestra aplicación (ejemplo) y en "ID del proyecto" inmediatamente observaremos que se genera el nombre con un número autogenerado. Si en Firebase ya existe otro proyecto con el mismo nombre que le hemos indicado, automáticamente se generará un número autogenerado a continuación para poder diferenciarlo del otro y si no existe otro proyecto con el mismo nombre el ID del proyecto será igual que el nombre de proyecto que hayamos indicado.
También deberemos indicar el "País/Región" y para crear nuestro proyecto finalizaremos pulsando el botón "Crear proyecto" del final del diálogo.
Una vez creado veremos un Dashboard como el siguiente.
Nuestro proyecto de Firebase se encuentra funcional y volvemos de nuevo a nuestro shell donde dentro del directorio de nuestra aplicación Angular ejecutaremos lo siguiente.
# Generamos el distribuible de nuestra aplicación Angular
>ng build
# Nos colocaremos dentro del directorio de la aplicación que acabamos de generar.
>npm install -g firebase-tools
>firebase init
Este último comando iniciará un formulario interactivo donde deberemos dar respuesta a varias preguntas como el proyecto de Firebase sobre el que queremos desplegar (ejemplo-xxxxx), que funcionalidades queremos habilitar (Firebase Hosting)... A continuación se muestra una captura de pantalla con las respuestas señaladas con flechas rojas.
Hay dos preguntas del formulario que deberemos tener cuidado en no responderlas con los valores por defecto.
La primera es "What do you want to use as your public directory?" que nos pregunta cual es nuestro directorio donde tenemos la web pública a desplegar. El comando "ng build" nos ha generado la web a publicar en un directorio llamado "dist", por lo que este será el valor que deberemos informar tal como podemos ver en la captura de pantalla.
La última pregunta "File dist/index.html" already exists. Overwrite" nos pregunta si queremos sobreescribir el fichero index.html de nuestra aplicación por otro autogenerado de Firebase. Obviamente, deberemos contestar que "no" para evitarnos sorpresas desagradables.
Y ahora si que ya estamos finalizando, tenemos nuestra aplicación implementada y configurada para poder ser desplegada sobre Firebase, únicamente nos faltará ejecutar el siguiente comando para poder desplegar nuestra aplicación y que sea accesible en Internet.
>firebase deploy
=== Deploying to 'ejemplo-8e587'...
i deploying hosting
i hosting: preparing dist directory for upload...
+ hosting: 12 files uploaded successfully
+ Deploy complete!
Project Console: https://console.firebase.google.com/project/ejemplo-8e587/overview
Hosting URL: https://ejemplo-8e587.firebaseapp.com
Si abrimos nuestro browser e introducimos la URL indicada tras ejecutar el comando de "firebase deploy" seguida de "/index.html" podremos ver la aplicación Angular que hemos generado y desplegado.
https://[ID de proyecto].firebaseapp.com/index.html
Se observa que la URL para acceder a nuestra aplicación contiene el "ID de proyecto" que se ha generado en pasos previos (ejemplo-8e587).
También tras realizar el deploy se nos indica una URL para poder consultar nuestra aplicación en el Dashboard de Firebase.
Hemos finalizado con nuestro post, felicidades, acabas de crear y desplegar tu aplicación Angular de forma gratuita, pero como obviamente esto es solamente el inicio y hay muchas mas cosas a considerar, a continuación puedes encontrar el enlace a la documentación de Firebase Hosting para ir asentando conocimientos.
No hay comentarios
Publicar un comentario