Tutorial 4: Desplegar una app de Angular CLI a Firebase

En este tutorial vamos a aprender cómo desplegar nuestra app a Firebase.

💡 KikstartTip
El primer paso solo se realiza una vez por cada app, no es
necesario repetirlo.

Requisitos

• Haber realizado el tutorial 3, donde creamos las rutas.
• Tener un proyecto firebase

Paso # 1

Vamos a agregar @angular/fire

1: Busca en la terminal tu proyecto y ejecuta el siguiente comando:

ng add @angular/fire

💡 KikstartTip

Si es la primera vez que instalas @angular/fire en tu computador te hará preguntas como esta:
Allow Firebase to collect CLI usage and error reporting information? (Y/n).

2: Durante el proceso de instalación sobre el proyecto elige el que quieres desplegar.

Installing packages for tooling via npm.
Installed packages for tooling via npm.
UPDATE package.json (1516 bytes)
✔ Packages installed successfully.
✔ Preparing the list of your Firebase projects
? Please select a project: (Use arrow keys or type to search)
❯ site2 (site2-8ce5b)

Paso # 2

Configura el enviroment con las llaves de tus proyectos en firebase.

1: En la consola de firebase busca tu proyecto.

2: En descripción general haz clic en configuración del proyecto.

3: Busca el siguiente título:

4: Busca la ruta src/enviroments/enviroment.ts y coloca esta secuencia de comandos con sus respectivas llaves:

export const environment = {
  production: false,
  firebase: {
    apiKey: '',
    authDomain: '',
    databaseURL: '',
    projectId: '',
    storageBucket: '',
    messagingSenderId: '',
    appId: '',
    measurementId: '',
  },
};

💡Tip

Si quieres tener un proyecto en producción y otro en desarrollo realiza todos este paso en el archivo enviroment.prod.ts.

Paso # 3

En este paso vamos a desplegar la app. No tenemos que hacer el ng build porque este comando lo hace por nosotros.

1: Busca en la terminal tu proyecto y ejecuta el siguiente comando:

ng deploy

2: Si todo sale bien te genera el Hosting URL: https://site2-8ce5b.web.app. Haz clic en el link y disfruta tu nuevo sitio !!! =)

Resumen

En este tutorial agregamos @angular/fire, desplegamos la app y tenemos listo un resultado
que podemos ver en el navegador.

El repositorio con este paso lo puedes encontrar aquí.

Muchas gracias!

Te esperamos en la siguiente serie de Kikstart UI =)
Cualquier pregunta sobre esta serie siéntete libre de comentar.