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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more