A√ļn no tienes acceso a esta clase

Crea una cuenta y contin√ļa viendo este curso

Despliegue con Firebase Hosting

21/21
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 27

Preguntas 4

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

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/

Es del todo gratuito Firebase?

Les comparto mi proyecto.
https://platzi-libreria.firebaseapp.com/

Lo creé en stackblitz y desde allí hice el deploy a firebase. Si quieren hacerlo desde ahí deben crear un proyecto en firebase, tal como hace el profe hasta el minuto 1:29.
Luego en stackblitz, en el editor de código, van a la barra lateral al ícono de firebase.
Se loguean con su cuenta de google, leugo vinculan al proyecto que crearon en firebase y les aparecerá este botón para hacer el deploy:

Espero les sea √ļtil.

Disfruté mucho del curso. Gracias profe Nicolás por las explicaciones tan claras.

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

Se ve el correo que trataron de ocultar!

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

https://yarnstore-17d48.web.app/
Ahí humildemente

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

Este es mi url donde genere el el deploy

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

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/

Aquí está le mío
https://yarn-store-1e64f.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.