No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Despliegue con Firebase Hosting

20/22
Recursos

Puedes realizar tu primer deploy de una aplicación Angular utilizando Firebase.

¿Qué es un deploy?

Un deploy, o despliegue, es el proceso de llevar tu software de un entorno local, a un entorno el cual se pueda acceder a través de internet desde cualquier parte del mundo para estar disponible para su uso.

¿Qué es Firebase?

A lo igual que Angular, Firebase es una plataforma de herramientas para desarrolladores de software desarrollado y mantenido por Google. Puedes utilizarlo para, en unos pocos clics, tener tu primera aplicación en un entorno productivo. Además de otros usos que ofrece el servicio

¿Cómo realizo mi primer deploy?

Para esto, ingresa a la página oficial de Firebase con tu cuenta de @gmail y comienza creando tu primer proyecto:

1.png

Elige un nombre para el mismo:

2.png

Y elige si utilizar o no Google Analytics en tu aplicación:

3.png

TIP: Google Analytics es una herramienta para visualización del tráfico de los usuarios en tu sitio web, comportamiento según audiencia y mucho más. Es una herramienta principalmente utilizada en Marketing Digital.

Luego de algunos segundo, tu proyecto estará listo.

4.png

Firebase ofrece, entre otros servicios:

  • Autenticación
  • Hosting
  • Bases de Datos
  • Storage
  • Mensajería

Para tu primer deploy, usarás los servicios de Hosting que provee un servidor gratuito para tu aplicación. Desde el menú lateral selecciona la opción Hosting.

Firebase solicita que instales algunas dependencias de forma global en nuestro computador. Para eso, desde una terminar utilizarás el comando:

npm install -g firebase-tools

Teniendo el CLI de Firebase instalado, podrás autenticarte para iniciar un proyecto nuevo:

firebase login

Posteriormente, estando situado desde la terminal en la raíz de tu proyecto, inicializa los servicios de Firebase:

firebase init

Selecciona la opción

Hosting

para iniciar la configuración de Firebase en tu proyecto:

5.png

Escoge

Use an existing project

y selecciona el nombre de tu proyecto creado anteriormente desde la web de Firebase:

6.png

Te recomiendo responder a las preguntas que te realizará el CLI de la siguiente manera para finalizar la inicialización del proyecto:

7.png

Se creará en tu proyecto dos archivos, uno llamado .firebaserc y otro firebase.json que contienen la configuración con el servidor de Firebase con tu proyecto. También creará de una carpeta public con un index.html, que no utilizarás, ya que Angular provee su propio index.html al compilar la aplicación. Puedes borrar este directorio.

Angular build y despliegue final

Con el comando:

ng build

Puedes preparar tu aplicación para un entorno productivo. Creará un directorio llamado dist y dentro otro más con el nombre de tu proyecto. Esta es el directorio que Angular provee para la distribución de la aplicación.

Dirígete ahora al archivo firebase.json creado al momento de ejecutar la inicialización de Firebase y edita la propiedad public de la siguiente manera:

{
 "hosting": {
    "public": "dist/<NOMBRE_DE_TU_PROYECTO>",
    ...
 }

De esta manera, Firebase desplegará tu aplicación que ya está compilada dentro de ese directorio.

Ahora si es momento del deploy. Para eso, utiliza el comando:

firebase deploy

Luego de algunos segundos, Firebase te entregará un URL pública en internet desde la cual podrás acceder a tu proyecto desde cualquier parte.

**¡Felicidades, realizaste tu primer despliegue a producción con Firebase!

Aporte creado por: Kevin Fiorentino.

Aportes 84

Preguntas 16

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Buenas!! El curso estuvo genial! Espero que lo hayan disfrutado!

Aqui debajo les comparto mi resumen general del curso!

Les recomiendo que lo copien y lo guarden en un archivo .md, ya luego pueden convertirlo a pdf desde aqui

Curso de fundamentos de Angular. Platzi

Estructura de un proyecto

  • El nucleo de la aplicacion se encuentra # la carpet src*
  • Los componentes se encuentran en el directorio app

Archivos internos

  • .browserslistrc:
    Indica a angular en que versiones tiene que ser compatible tu aplicacion

  • .editorconfig
    Tiene mas que ver con trabajar en equipo.
    Sirve para configurar las reglas de desarrollo del equipo.
    Por ejemplo la indentacion, etc.
    Para que este archivo funcione debes de instalar en VsCode un plugin llamado EditorConfig for VS Code

  • tsconfig.json
    Tiene que ve con la configuracion que tiene Angular con TypeScript

  • angular.json
    Es donde podemos manejar diferentes ambientes.
    Por ejemplo: podemos tener un ambiente de staging y un ambiente de QA (testing).
    En la seccion de budgets podemos configurar cual es el tamaño que deberia tener normalmente nuestra aplicacion

  • karma.conf.js
    Es para correr unit testing

  • package.json
    Las versiones que estamos utilizando

  • .nvmrc
    Sirve para especificar la version de node en la cual corre nuestro proyecto.
    Si no esta creada simplemente podemos crearla

Property Binding

Su uso es para configurar propiedades en un elemento html
<button [disabled]="btnDisabled"> Click me </button>

Event Binding

Con parentesis, encerramos el evento que queremos capturar
<button (click)="onClick()"> Click me </button>

Data Binding

Es una fusion entre escuchar un evento (Event Binding) y escuchar una propiedad (Property Binding)
En angular tenemos algo especial para esto, que es el:

  • [(ngModel)]: ngModel siempre esta pendiente del estado del input. Chequea si ese campo es valido o no y ademas sincroniza el valor

Estructuras de control

  • NgIf
    <div *ngIf="condition; else elseBlock">
        Content to render when condition is true.
    </div>
    <ng-template #elseBlock>
        Content to render when condition is false.
    </ng-template>

  • NgFor
    <li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>
  • NgSwitch
    <container-element [ngSwitch]="switch_expression">
        <!-- the same view can be shown in more than one case -->
        <some-element *ngSwitchCase="match_expression_1">...</some-element>
        <some-element *ngSwitchCase="match_expression_2">...</some-element>
        <some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
        <!--default case when there are no matches -->
        <some-element *ngSwitchDefault>...</some-element>
    </container-element>

Template reference variables

Es una referencia a un elemento de nuestra aplicacion. Podemos acceder a esta referencia tanto desde nuestro typescript como desde el html.
Las referencias pueden ser utilizadas en el TS recien desde el afterViewInit
en el HTML solo podemos acceder a la variable despues de declararla, no antes.
Pasos para utilizar template variables

  1. Agregar el template variable en el html
    <p #text>
        Random text
    </p>
  1. Agregar la referencia al elemento HTML en el TS con @ViewChild
    @ViewChild('text') text!:ElementRef;

  2. Utilizar la refencia al elemento dentro afterViewInit, o en cualquier metodo que se ejecute luego de afterViewInit

  ngAfterViewInit(){
    console.log(this.text)
    this.text.nativeElement.innerHTML += "Hola desde TS"
  }

Estilos dinamicos dependiedo del estado de un elemento

Agregar clases dinamicas

Nos permite activar o desactivar una clase CSS, en un elemento, dependiendo de una condicion.
Su sintaxis es la siguiente:

    <p #text class='simple-text' [class.nameClass]='condition goes here'>
        Random text
    </p>
    <!--por ejemplo-->
    <p #text class='simple-text' [class.active]=' 1 == 1 '>
        Random text
    </p>

<h5>Como verificar que un elemento tiene uno o mas estilos concatenados</h5>

Con verificar que un elemento tiene estilos concatenados, me refiero a esto:

    <p #text class='simple-text active' >
        Random text
    </p>

Esto podemos verificarlo en el CSS de esta forma:

.simple-text {
    background: red;
    color: white;
    opacity: 0; //Hace que sea invisible

    &.active{
        opacity: 1;
    }
}

Esto hace que, cuando nuestro elemento cuente con las clases simple-text y active al mismo tiempo, nuestra opacidad cambie a 1, es decir, que se muestre el elemento

Modificar estilos dinamicamente

Esto nos permite modificar un estilo especifico en el html, dependiendo de una condicion.

    <p #text [style.font-style]="condicion ? 'true-value' : 'false-value'">
        Random text
    </p>

Por ejemplo

    <p #text [style.font-style]="condicion ? 'bold' : 'normal'">
        Random text
    </p>

NgClass & NgStyle

Nos permite agregar varias clases y/o estilos de forma dinamica.

  • NgClass
    <p #text class='simple-text' [ngClass]="{
        'class-name-1': condition1,
        'class-name-2': condition2
    }">
        Random text
    </p>
    <!--por ejemplo-->
    <p #text class='simple-text' [ngClass]="{
        'valid-class': input.lenght > 0,
        'invalid-class': input.lenght == 0
    }">
        Random text
    </p>

  • NgStyle
    <p #text class='simple-text' [ngStyle]="{
        'color': pStyles.color,
        'background': pStyles.background
    }">
        Random text
    </p>

En este ejemplo, pStyles es un objeto declarado en el TS del componente.

Creacion de un formulario desde HTML


<!-- Aqui se declara que es un formulario 'reactivo'.
Esto nos sirve para comprobar que todos los campos esten completados -->
<form #myForm="ngForm">
    <input name="name" type="text">
    <input name="lastname" type="text">
    <input name="password" type="password">

    <button 
        type="submit" 
        [disabled]=myForm.invalid>
        Enviar
    </button>
</form>

Datos interesantes sobre Estilos

  • 40em es una ancho estandar para tablets en adelante. A utilizarlo en las @media queries
  • 62em parece un ancho estandar para desktops. Tambien para las @media queries

Compilar nuestra aplicacion para producccion

ng build

ahora si lo agregue:
https://store-jedi.web.app/

Comandos importantes:
Instalar firebase:

npm install -g firebase-tools

comprobar versión:

firebase -V

Inicializar el proyecto:

firebase login 

y

firebase init 

nos va a preguntar cual servicio de firebase queremos

ng build

y finalmente

firebase deploy

https://forms-2fe46.web.app/
No es el más bonito pero es trabajo honesto 😄

Es del todo gratuito Firebase?

Inicio de mi proyecto.
https://propeta-dee5a.web.app/

Despliegue con Firebase Hosting

Url de mi proyecto: https://gp-store-57582.web.app/auth/sign-in

Llega el momento de hacer deployment a un ambiente productivo, y para esto usaremos firebase hosting.

Configuracion de Firebase

  1. Ir a Firebase: https:www.firebase.google.com/
  2. Una vez en el sitio oficial damos clic en “Ir a la consola”

NOTA: Esta operacion te pedira cuena de google, es decir un correo de gmail, asi que si lo tienes solo lo seleccionas y sino puedes crear un correo, pero es necesario.

  1. Una vez inicie sesion con mi cuenta de gmail, me mostrara un listado con todos los proyectos que yo tengo en firebase asociados a mi cuenta de gmail, si es la primera vez logicamente no saldra ningun proyecto.

  2. Le damos click a la opcion “Agregar proyecto” y automaticamente me abrira unas opciones de creacion divididas en 3 pasos:

    • Paso 1 - Definicion del nombre del proyecto en Firebase, puede ser el mismo de nuestro proyecto de Angular. Luego click en siguiente.

    • Paso 2 - Pantalla para gregar funciones de Google Analytics a nuestro proyecto.Vamos a clickear el toggle control para decirle que no deseamos agregar la opcion
      de Google Analytics. Luego click en siguiente.Monta una serie de servicios basados en cloud para nuestro proyecto

    • Paso 3 - Una vez terminado nos inidica que el proyecto ya esta listo, Luego click en continuar.

  3. En el menu lateral podremos encontrar algunos de los servicios que nos ofrece Firebase, pero
    seleccionaremos en la opcion “Hosting”

  4. Nos abrira una pantalla de configuracion de nuestro hosting con una serie de configuraciones:

    • Paso 1 - Instalar Firebase CLI: Debemos tener firebase-tools instalado en nuestra maquina de
      forma global, Si no lo tenemos, podemos intalarlo en nuestra terminal con el comando

    npm install -g firebase-tools

    NOTA: Los usaurios de MacOS y Linux, deben ejecutar el comando con sudo para que les
    permita instalar la dependencia.

    Y comprobamos su instalacion con:

    firebase -V

    Regresamos al el sitio de firebase y le damos click en “sigueinte” en la configuracion.

    • Paso 2 - Inicializar nuestro proyecto: Nos pide iniciar sesion en Firebase desde nuestra
      terminal con el comando:

    firebase login

    Lo que nos preguntara que si deseamos permitir que Firebase conozca nuestro uso como metricas,
    le decimos que si digitando “y” y enter

    Y nos abrira una url en el navegador donde aparecera nuestra cuenta de gmail, y firebase nos
    preguntara que si deseamos permitir usar la cuenta para administar el host y otros permisos.

    Volemos a nuestra terminal y veremos un mensaje donde nos inidica que todo fue correcto en
    cuanto al login en Firebase

    Nos indica que devemos tambien ejecutar el comando:

    firebase init

    NOTA: Este comando lo debemos ejecutar en el mismo lugar donde esta nuestro proyecto, es decir
    donde ejecutamos ng serve, y para eso debemos usar la consola para navegar hasta nuestro proyecto

    Luego nos preguntara cual servicio queremos agregar, seleccionamos la opcion de “Hosting: Configure
    files for Firebase Hosting and (optionally) set up GitHub Actions deploys” con la barra espaciadora y
    le damos enter.

    Luego nos pregunta que si queremos crear un proyecto o usar uno existente. A lo cual seleccionaremos
    "Use an existing project"

    Luego nos parecera la lista de proyectos que tenemos en nuestra cuenta, a lo cual seleccionaremos, la
    que creamos en los primeros pasos de configuracion

    Nos preguntara cual queremos que sea la carpeta publica que desamos distribuir en el hosting, por defecto
    es la carpeta (public), le damos enter para aceptar que sea public

    Nos pregunta que si desemos re-escribir las urls para el sitio en especifico, a lo que diremos que si
    con “y”

    Y luego nos preguntara que si desemos hacer deployments con GitHub, a lo cual diremos que no ahora
    digitando “n”

    Esto nos creara unos archivos en nuestro proyecto:

    • Directorio public: Un directorio llamado “public” que borraremos porque angular tiene su propio
      directorio de distribucion llamado “dist”

    • .firebaserc : Un archivo de configuracion donde se encuentra el nombre del proyecto que tenemos
      en Firebase.

    • firebase.json : En este archivo es donde configuraremos la ruta de donde se ubicaran nuestros
      archivos de distribucion.

    Para generar nuestra publicacion para produccion usamos el comando:

    ng build

    Este comando nos generara y transpila todo nuestro proyecto, lo minifica, lo ofusca y optimiza nuestro
    proyecto para que funcione a mas alto nivel

    Este comando nos creara en nuestro proyecto llamada “dist” en donde se encuentran los archivos que
    deseamos subir al hosting, en este caso nuestro proyecto

    Ahora en el archivo en el archivo firebase.json en la propiedad “public”, le vamos a asignar la ruta de
    los archivos de nuestro directorio “dist”, asi que la cambiamos por “dist/my-project” y guardamos el
    archivo.

    • Paso 3 - Deploy to Firebase Hosting: Es este paso firebase nos dice que debemos correr el comando:

    firebase deploy

    Este comando sube todos nuestros archivos del dist al hosting pormedio de Firebase CLI

    Al final firebase me termina de subir los archivos y me muestra en la consola una url en donde ya queda
    nuestro proyecto en linea con un dominio en https

Para usuarios de MacOS o Linux, el comando para instalar paquetes de NodeJs a nivel global debe comenzar con sudo:

sudo npm install -g firebase-tools

Listo!! en este caso estuve haciendo otro proyecto, pero este video me ayudo mucho a desplegarlo en Firebase https://peliculasghibli.web.app/index.html

Se ve el correo que trataron de ocultar!

Mi versión de la página de Login/Registro hecha con MUI
Firebase

Llega el momento de hacer deployment, un lanzamiento de nuestra aplicación a un ambiente productivo. Para esto vamos a utilizar Firebase como hosting. Firebase es un suite de servicios para desarrolladores que pertenece a Google. Para usarla debemos:

  • Loguearnos en su página oficial con una cuenta de Google.

  • Comenzar -> Agregar proyecto.

  • Agregar nombre -> Continuar.

  • Nos va preguntar si queremos usar las análiticas de Google. Desactivamos la opción.

  • Nos va preguntar si queremos usar las análiticas de Google. Desactivamos la opción.

  • Se crea el proyecto y vamos a Compilación -> Hosting -> Comenzar.

  • Nos van a aparecer una serie de comandos que debemos ejecutar en nuestra consola:

    1. “npm install -g firebase-tools” para instalar las herramientas de la CLI de Google. Esto se instala globalmente en nuestra computadora.

    2. “firebase login” sirve para loguearnos en firebase con nuestra cuenta de gmail.

    3. “firebase init” para iniciar el proyecto. (en este caso es necesario estar parados dentro de la carpeta de nuestro proyecto).

    4. Seleccionamos la opción Hosting: configure files for firebase hosting and (optionally) set up Github Action deploys se selecciona con la barra espaciadora y luego enter.

    5. Escogemos Use an existing project y seleccionamos el nombre del proyecto creado.

    6. Luego respondemos las preguntas que nos hace la CLI de la siguiente manera, esto creará una carpeta public con un index.html dentro en la raíz de nuestro proyecto y dos archivos de configuración firebase.json y .firebasesrc.

  • Por último preparamos nuestro proyecto para un entorno productivo con el comando ng build esto creará la carpeta dist y dentro otra más con el nombre del proyecto. Ahora colocamos esa ruta dentro del archivo firebase,json editando la propiedad “public” Esto hará que nuestra aplicación se despliegue desde esa carpeta. Solo resta ejecutar el comando firebase deploy. Una vez concluido el proceso nos aparecerá una URL pública en la cual podemos visitar nuestro proyecto ya desplegado en internet.

A mi me salio un error en la autenticación en el comando firebase init. .
Si bien el anterior comando es de inicializar, no me salio nada extraño, solo que la cuenta era [email protected], lo normal. Pero cuando vas a cargar con el comando firebase init los proyectos ya creados, no me cargaron y me salio este mensaje de error en el CMD

Error: Failed to list Firebase projects. See firebase-debug.log for more info.

Investigue solo un poco y resulta que hace falta desloguear en mi caso con el comando

firebase logout

para luego si hacer uso del comando

Firebase login --reauth

este –reauth

entiendo que obliga a iniciar sesion nuevamente asi como se muestra en el Video y asi si deja encontrar el proyecto o crear uno nuevo con el comando firebase init

Les comparto mi proyecto el cual es un pokedex https://pokedex-b2b67.web.app/

Desconocía la existencia de Firebase, que buena herramienta…

Definitivamente, son de un caracter Angular (fundamental) la estructuracion y contenido de los temas del curso. Felicitaciones

<https://mystore-3fdab.web.app/>

Genial una forma diferente a Netlify y Vercel para desplegar nuestros sitios web en Internet.

Lo hice ya hace casi dos años y no lo he actualizado pero está hecho con angular <https://danilocaro.me> Saludos !!!
Nico yo te sigo. Gracias por compartir el conocimiento: <https://ipaddresstracker-81755.web.app>
algo importante, deben estar en la terminal en la ruta de la carpeta, me pasó que lo hice en la que abre de inicio y se instaló allí :(
<https://my-store-f7840.web.app/>
cordial saludos tengo una pregunta si compilo mi codigo de angular y pesa mas de 1mb debo de cambiar el "production": {              "budgets": \[                {                  "type": "initial",                  "maximumWarning": "500kb",                  "maximumError": "1mb"                },                {                  "type": "anyComponentStyle",                  "maximumWarning": "2kb",                  "maximumError": "4kb"                }              ],              "outputHashing": "all"            },

Por si no les sale el firebase.json con la informacion como la muestra el profe(ami me paso tube que escribirlo manual) aca les dejo el contenido del archivo, solo cambiar el public con el nombre del archivo corespondiente

<
{
  "hosting":{
    "public": "/dist/my-store",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites":[
      {
        "source":"**",
        "destination": "index.html"
    }
    ]
  }
}
> 

Hola a todos, cómo están? Me presento: Mi nombre es Carlos Andrés Ramírez. Este es mi primer comentario aquí en Platzi. He tomado este curso y la verdad me encantó muchisimo 😍❤ y quiero compartir con ustedes y con el profe Nicolas Molina la URL del proyecto realizado en este curso de Fundamentos de Angular. Muchas gracias profe Nicolas por enseñarnos este framework que la verdad me gustó mucho y continuaré con los demás cursos de Angular que usted imparte. Saludos para todos y buenas noches desde Risaralda, Colombia.

URL del proyecto con Angular: https://yarnstore-580c4.web.app

a mi no me salean o no me aparecen los archivos .json de firebase y la terminal dice que han sido escritos…
como puedo verlos o que aparescan?

me encanto este curso! super entendible! gracias nico!

Aqui mi proyecto, no es el mismo que el del profe pero lo hice con lo aprendido, aun falta mejorar pero que mas da se los quiero compartir
https://minicrud-2b218.web.app

Les comparto mi primer de muchos proyectos:
https://yarnstore-bc989.web.app/
c:

solo me gustaría un dato a aportar: cuando les salga error cuando intenten hacer login en la consola, quizas les pueda servir a ustedes:

y por otro lado, con mucho gusto les quiero compartir mi despliegue de todo lo que he hecho en este curso.
https://yarnstore-7d06b.web.app/

No es mucho, pero es trabajo honesto
https://fundangular-75d75.web.app

No es mucho pero es trabajo honesto:v

https://form-lario.web.app/

Me pareció genial Firebase Hosting!!!

https://tienda-plz.web.app/

Hola clase, este es el link de mi proyecto:
https://yarnstore-f4399.web.app/

Saludos cordiales

Cuando hago el comando firebase deploy me tira Error: Failed to list functions for curso-basic-angular

Hola aquí mi proyecto de pruebas
https://seintec-dd1ab.web.app/

comparto el hosting https://yarnstore-2d2ad.web.app
me hizo decir que me comprometia a usarlo como trabajo, a alguien mas le pasó?

No conocía Firebase Hosting, que buena opción para publicar nuestros proyectos personales.

Este es mi url donde genere el el deploy

Oigan, acabo de crear un repositorio en donde ire levantando los resumenes que vaya haciendo sobre los diferentes cursos.

Muchas gracias!! No conocía sobre Firebase Hosting.

Buen aporte y dejo mi link por aquí

Si pude hacer deploy a mi proyecto por primera ves con Angular, gracias a Nicolas.

https://yarnstore-f06c2.web.app/

inicando:
npm install -g firebase-tools
yo tube que hacerlo como admin con sudo

luego comprobar :
firebase -V

Incoando el DEPLOYMENT del proyecto para tenerlo disponible en FireBase.