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.
Top comments (0)