Configurando Firebase Hosting y subiendo nuestro proyecto a producción

Clase 27 de 31 • Curso de PWA con Angular 2018

Clase anteriorSiguiente clase

Resumen

Irving Sarmiento

student•

Terminado el curso, le agregue más de lo que viene en el curso y las notas solo se muestran de quien las crea.

PWA Notes

Carlos Uriel de Jesus Sánchez González

student•

en la version 6 de angular el dist te crea una carpeta adentro una carpeta con el nombre de la aplicacion

Julio J Yépez

student•

Al ejecutar el

firebase init

Hay que estar pendiente del directorio base de la PWA … no siempre es dist/ … dependiendo de la versi[on de angular podr[ia ser dist/pwa … o el nombre que le hayan dado … además hay que asegurarse de no decirle que reescriba el index.html … no overwrite … nope.
Hay que leer bien.

Julio J Yépez

student•

Acá dejo mi link de la app “deployada” siguiendo los pasos de arriba …

Julio J Yépez

student•

Por cierto … una vez que ya se ha hecho el deploy … se puede acceder a la url desde el móvil y ya empieza a verse el comportamiento de la app como una Aplicación Web Progresiva!

Lo que veo también es que el login … muestra un comportamiento errático … al ser SignInWithPopup … pregunta que con que aplicación debe abrir el enlace y allí hace saltos raros …

Imagino que deberá usarse luego un popup propio y hacer el sign in con nuestros propios métodos y vistas …

Diego Burlando

student•

Tengo este error: The assets asset path must start with the project source root.

Diego Forero

Team Platzi•

Al parecer la ruta de los assets esta mal definida, debe iniciar desde el la raíz del proyecto.

Juan Camilo Angel Fandiño

student•

Es porque en angular.json, cuando agregamos el firebase-messaging-sw.js, el profesor lo agregó como si fuera en la raíz, pero debe estar en src/firebase-messaging-sw.js

Carlos Enrique Ramírez Flores

student•

cuando ejecuto el comando firebase login me da el siguiente error. alguien tiene alguna idea de porque?

$ firebase login
module.js:549
    throw err;
    ^

Error: Cannot find module 'is'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Users\carlos\AppData\Roaming\npm\node_modules\firebase-tools\lib\firestore\encodeFirestoreValue.js:4:10)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)

Diego Alejandro Cardona Giraldo

student•

Y ahora como se hace para que podamos tener la app para subirla a google play y así?

Gabriel Solorzano

student•

<ERROR> Si al ejecutar este comando te sale:

 Error: No project active. Run with --project <projectId> or define an alias by running firebase use --add

Debes correr: $ firebase use --add platzinotas-bf10a (este ID de proyecto se obtiene de la consola Firebase/Hosting)

Te dirá: "Now using project platzinotas-bf10a"

Vuelve a intentar comando deploy

Luis Fernando Niño Gonzalez

student•

Me sale el siguiente error al hacer el firebase init

D:\proyectos\flores (master -> origin)
λ firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  D:\proyectos\flores

Before we get started, keep in mind:

  * You are initializing in an existing Firebase project directory

? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. Hosting: Configure and deploy Firebase Hosting sites

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

i  Using project flores365 (flores365)

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes

Error: Server Error. unable to verify the first certificate

Alguna idea?

Alvaro Gonzalez

student•

Que tipos de app podemos hostear en firebase …?

Ludwring Liccien

student•

Cualquier aplicación de archivos staticos
Es decir HTML5, CSS3 y Javascripts (Angular, Vuejs, React, entre otros framewors puedes usar)

Alex Fabian Moreno Acero

student•

yo también tengo el mismo problema y ya hice varios firebase deploy pero ninguno a funcionado

Julio J Yépez

student•

¿Puedes compartirnos una captura del error?
A veces el error es simplemente que debes ejecutar los comandos como un usuario sencillo $ … que no sea root # …

Julio J Yépez

student•

… o vice versa …

Ludwring Liccien

student•

Importante Recuerda establecer en el manifest.json la clave “star_url” con la url del proyecto de firebase. Con esto se cargara correctamente el manifest.json

Ludwring Liccien

student•

la url es https:// segido del valor de la clave “authDomain” de tu configuracion de enviroment de firebase

Ludwring Liccien

student•

@gsotelo Es no es normal. Seguramente no has realizado el deploy a firebase con el comando firebase deploy pero antes debes realiza toda la configuración de firebase instalando npm install -g firebase-tools

Configurando Firebase Hosting y subiendo nuestro proyecto a producción

Introducción

¡Vamos a renovar este curso!

Qué son las PWAs?

PWA vs SPA

Setup del Proyecto en Mac, Windows y Linux

Presentando el Editor de Código

Generando nuestro primer PWA

Service Worker

Correr nuestro app en modo de producción

Qué es el service worker de Angular?

Gestión de versiones del Service Worker

Configuración del Service Worker y Caching Policy

Propiciando el Click to Install banner

Estilo

Comprendiendo el concepto de responsividad

Introducción a Angular Material

Instalación de Angular Material

Configuración de Angular Material en el proyecto

Datos Dinámicos

Introducción a Acceso a Datos

Implementando Firebase

Creando un servicio de conexión a Firebase

Creando vista de lista y detalle

Guardando notas en Firebase

Obteniendo notas de Firebase

Editando notas

Implementando Caching

Push Notifications

Implementando Login

Configurando Push Notifications

Cómo instalar curl en Mac, Windows y/o Linux

Configurando Firebase Hosting y subiendo nuestro proyecto a producción

Implementando Push Notifications

Cloud Functions

NativeScript: Características Nativas en un Web App con Angular

¿Dónde Aprender Más?