DEV Community 👩‍💻👨‍💻

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

Posted on • Updated on

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.

Top comments (0)

All DEV content is created by the community!

Hey, if you're landing here for the first time, you should know that this website is a global community of folks who blog about their experiences to help folks like you out.

Sign up now if you're curious. It's free!