Cómo configurar un proyecto de Angular con Firebase

Comprueba qué rápido y sencillo resulta integrar un proyecto ya creado de Angular con Firebase.

Integrar un proyecto ya creado de Angular con Firebase

Para ello abrimos Visual Studio y en el mismo abrimos el proyecto que ya tengamos creado de Angular, y con el CLI (Command line interface) de Firebase, dentro de la carpeta del proyecto, escribimos el comando:

firebase init

Esto nos va a llevar por un wizard en el que vamos a seguir una serie de preguntas para ir seleccionando lo que queremos para nuestra integración de Firebase con Angular.

La primera pregunta es si estamos listos para proceder, así que elegimos la opción correspondiente y seguimos.

A continuación podemos elegir los recursos de Firebase que queremos integrar en nuestra aplicación. Vamos a seleccionar, por ejemplo, la base de datos y el hosting. Las otras opciones, que se verán en el curso de Firebase, nos permiten elegir también Storage, que sirve para subir ficheros a la nube, y Functions, que permite desplegar funciones en la nube.

De momento, como es para proyecto Angular vamos a configurar los recursos de base de datos y de alojamiento. De esta forma nos permitirá alojar nuestra aplicación web en el backend de Firebase, lo cual nos dará una URL pública para acceder a dicha aplicación, y la base de datos de Firebase en la nube, que nos permitirá enviar y leer datos de la misma a nuestro frontend.

Seguimos adelante el proceso y lo siguiente que nos solicita el sistema es el fichero de reglas de base de datos. Vamos a elegir el que aparece por defecto, por lo que vamos a continuar.

En esta ocasión nos pregunta si lo queremos sobrescribir, porque ya existe, y elegimos no sobrescribirlo.

A continuación nos pregunta sobre el directorio público, que es dónde se compilará el código de nuestra aplicación antes de subirlo con Firebase hosting, antes de subirlo al alojamiento.

Normalmente, en la mayoría de proyectos se puede utilizar el directorio por defecto (public), pero en Angular hay que elegir la carpeta dist, que es donde genera el código compilado.

La siguiente pregunta es si queremos configurar una aplicación una sola página (single-page app), que vamos a indicar que no, aunque realmente lo usamos así. Después elegimos no sobrescribir tampoco la página por defecto para el error 404, y tampoco vamos a sobrescribir el archivo index.html que tiene generado por defecto de Angular.

Y eso es todo, ya tendríamos nuestra aplicación de Angular con Firebase inicializado con nuestro proyecto, por lo que solo haría falta ejecutar el comando firebase init en el CLI, coger los datos concretos de nuestro proyecto y traerlos al código concreto.

Aprende a usar los servicios de Firebase como el hosting web, autenticación de usuarios, base de datos, almacenamiento en la nube y cloud functions con un proyecto real de Angular.

Recuerda que puedes comenzar este curso con tu suscripción de OpenWebinars. Si todavía no estás suscrito, aprovecha para hacerlo ahora.