DEV Community

Cover image for Tutorial 4: Desplegar una app de Angular CLI a Firebase
Derlys for kikstart.dev

Posted on • Edited on

3 2

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

Paso # 1

Vamos a agregar @angular/fire

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

ng add @angular/fire
Enter fullscreen mode Exit fullscreen mode

💡 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)
Enter fullscreen mode Exit fullscreen mode

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.

Alt Text

3: Busca el siguiente título:

Alt Text

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: '',
  },
};
Enter fullscreen mode Exit fullscreen mode

💡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
Enter fullscreen mode Exit fullscreen mode

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.

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay