Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Cómo configurar un proyecto de Angular con Firebase

DIEGO GONZÁLEZ
  • Escrito por DIEGO GONZÁLEZ el 06 de Junio de 2019
  • 2 min de lectura | Desarrollo móvil
Cómo configurar un proyecto de Angular con Firebase
El reproductor de video será cargado en breves instantes.

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.

Imagen 0 en Cómo configurar un proyecto de Angular con Firebase
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.

Imagen 1 en Cómo configurar un proyecto de Angular con Firebase
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.

Imagen 2 en Cómo configurar un proyecto de Angular con Firebase

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.

Imagen 3 en Cómo configurar un proyecto de Angular con Firebase

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.

Imagen 4 en Cómo configurar un proyecto de Angular con Firebase

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.

cta-blog-curso-openshift

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

Relacionado

Te dejamos una selección de cursos, carreras y artículos

Programador Android

Programador Android

carrera

Incluye 6 cursos:

  • Curso de Git, GitHub y Jekyll
  • Curso Java Intermedio
  • Curso de Android Online

y 3 cursos más!

Duración: 47 horas y 1 minuto

Ventajas de usar Firebase

Ventajas de usar Firebase

Desarrollo móvil

04 de Junio de 2019

Queremos contarte las ventajas de utilizar Firebase como bakend para tus aplicaciones o plataformas.

Curso de Firebase y Angular

Curso de Firebase y Angular

curso

Con este curso aprenderás:

  • Angular y conceptos prácticos: componentes y templates, navegación...
  • Publicación de aplicación web en servicio de hosting de Firebase.
  • Integración de base de datos en proyecto Angular.

Duración: 2 horas y 58 minutos

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars