Cursos Empresas Blog Live Conf Precios

Correr nuestro app en modo de producción

Clase 7 de 31 • Curso de PWA con Angular 2018

Clase anteriorSiguiente clase

Resumen

El service worker solo va a funcionar cuando la aplicación esté en modo de producción, esto es porque el SW revisa los bundles.

Jesús Olivares Olivares Suarez

student•

aparentemente todo va bien pero cuando entro en el mavegador me aparece esto :

Jesús Olivares Olivares Suarez

student•

listo jejejeje
era que habia entrado en dist pero adentro estaba la carpeta pwa y hay era que tenia que hacer en http-server

Mon Avellaneda

student•

Mil gracias, me pasó lo mismo .

Mon

Eduardo Enrrique Villalobos Ocaña

student•

Hola, uso Ubuntu 18.04 y una versión de Angular CLI superior a 6. Hasta ahorita he ejecutado estos comandos:

Nota: siempre que no utilicé sudo para un comando me saltaron errores de permisos, así que lo uso para casi todo ya :)

• ++Para actualizar node++ sudo npm install n -g ( a menos que ya lo tuvieras instalado) sudo n stable (para la última versión estable) fuente: https://stackoverflow.com/questions/10075990/upgrading-node-js-to-latest-version

• ++Para instalar Angular CLI++ sudo npm install -g @angular/cli

•++Para crear la PWA++ sudo ng new pwa A continuación seleccioné yes para la opción del routing y luego en mi caso seleccioné SASS.

• ++Para abrir la app:++ cd pwa -> Primero ir a la carpeta del proyecto creado “pwa” ng serve –open(o npm start según el archivo package.json)

•++Agregamos los service workers++ sudo ng add @angular/pwa en la carpeta del proyecto

• ++Generamos nuestra app de producción++ sudo ng build –prod para generar la carpeta dist dentro del proyecto que sería nuestra app de producción, que contiene solo los archivos necesarios para correr la app. • ++Para visualizar la app en modo de producción++ sudo npm install -g http-server instalamos este paquete de npm . - A continuación cd dist/pwa y luego http-server - En Chrome abrimos la primera url que se muestra en consola, la de localhost (http://127.0.0.1:8000) . Nota: solo haciendo esto pude ver mi service worker activo.

Espero les sirva.

Cinthya Cabanzo

student•

Muchas gracias, me funciono perfecto

carlos emmanuel arcos novelo

student•

me sirvio demasiado, yo también estoy usando angular 8.

Manuel Andrade

student•

Estoy corriendo mi pwa con Angular 8 y no me funciono levantar mi app con http-server. Se resuelve fácil utilizando:

npm install -g angular-http-server

Y ejecuntandolo de la siguiente manera:

angular-http-server

Enrique Rojas Reyes

student•

Un bundle sirve para agrupar todos los ficheros de JavaScript en uno solo. Así el navegador no necesita hacer varias peticiones HTTP

Víctor Rueda

student•

Y el service worker sirve para revisar si hubo cambios en esos archivos, lo cual ayuda en la optimización de la app

Byron Alfaro

student•

Para correr el services worker me sirvio la herramienta que menciona @julianesten la siguiente herramienta de Chrome

https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

Solo pones la carpeta que deseas abrir y listo, en mi caso puse la carpeta pwa que esta adentro de la carpeta dist

Cristhian Camilo Delgado Pazos

student•

|Muchas gracias me sirvió mucho

Jonnathan Ramiro Juma Jara

student•

no había usado el http-server, cual seria la diferencia con ng sreve

Manuel Ojeda

student•

Http-server es un paquete que instalamos desde NPM, su función principal es emular un servidor para testear nuestras apps.

Ng-serve es la manera que en Angular realiza una compilación de desarrollo.

En resumen la diferencia es que ng-serve ya viene como comando de Angular, mientras que http-server lo podemos utilizar en cualquier proyecto de JavaScript

Jhon Harvy Acosta

student•

Hola alguien me podria ayudar en la terminal el comando sudo no la reconoce como un comando externo o interno en windows 10 y le e tratado de hacer mil cosas y apenas colocó su o sudo me sale el error en la terminal.

Julio César Domínguez Giraldo

student•

sudo no es un comando válido en la consola de Windows. Sirve para elevar el comando que ejecutas a nivel de super usuario y lo encuentras por ejemplo en linux.
Si tienes instaladas las aplicaciones que requieres en el entorno Windows ejecuta los comandos sin incluir el sudo y deberían ejecutar sin inconvenientes. Posiblementes quieras iniciar la consola como administrador.

Jhon Harvy Acosta

student•

jucedogi muchas gracias por la respuesta con razon no le encontraba solución al problema.

Víctor Rueda

student•

El build a producción ng build --prod genera la carpeta dist que ya se podría utilizar para ponerla en un hosting.

Para hacerlo de manera local se instala un HTTP server:
npm install -g http-server

Yentro de dist/<nombre-de-tu-proyecto> se levanta el servidor con el comando http-server

Jecsham Castillo

student•

Si no les sale el service-worker en el depurador, recomiendo que utilicen esta extensión de crhome como servidor.

Jose Arias

student•

Excelente me funcionó. No sé porque no me corrió en el visual code.

Carlos Enrique Ramírez Flores

student•

deben de sacar el codigo de la carpeta pwa, en el dist. de lo contrario no funciona

jean pierre gabriel nieto acosta

student•

EStaba super estancado... gracias

Byron EQ

student•

Me sirvió... Gracias

Juan Guillermo Perez Cardozo

student•

se que no es lo ideal, pero puedo hacer que no sirva desde cache, pues si sirve desde cache dependo de que el usuario este limpiando su navegador.

Francisco Martin

student•

He conseguido llegar hasta aqui, mas o menos controlado, porque soy mmuuuuy novato, pero he conseguido correr el http-server, pero no consigo abrir esa pagina de angular que se muestra.. no tengo nada en 172.0.0.1:8080 y el server dice que esta corriendo bien, y veo las ips mostracas en la linea de codigo y todo... alguien puede ayudarme ????

Edwin Alberto Guerrero Acosta

student•

Tuvé el mismo problema, logré darle solución instalando el http-server de angular usando npm:

1) npm install -g angular-http-server
2) cd /path/to/site
3) angular-http-server
4) abrir en el navegado **localhost:8080**

Más información aquí

Julio J Yépez

student•

Uno de los requisitos de las PWA para que los ServiceWorkers funcionen correctamente en producción, es que la aplicación debe ser ejecutada a través de una url segura … es decir de tipo HTTPS … https://dominio.com/pwa … por lo que en el servidor web debe preverse la instalación de un certificado digital … (pero seguramente esto se verá más adelante en el curso)

Jorge Luis Paiva Huamán

student•

Para fines del curso, el "http-server" se puede reemplazar por "ng serve" ?

Erik Elyager

student•

Yo me apegaría a hacerlo con ng serve para evitarme cualquier problema.

Jorge Luis Paiva Huamán

student•

Alguna documentación de ese caché que se menciona en el minuto 5.18? Quien lo gestiona? el navegador, el dispositivo, el server ? Desde la app se puede gestionar para que no guarde ahí?

Erik Elyager

student•

¿Quién lo gestiona? El navegador, del lado del cliente.

Aquí puedes ver más sobre el tema.

Jorge Luis Paiva Huamán

student•

./dist en servidor web Alguien puede confirmar si lograron desplegar y que funcione el directorio generado en Apache, Nginx, IIS ?

Jorge Luis Paiva Huamán

student•

ANGULAR 6 y 10. Tengo un cli 10 me gustaría instalar la 8 de angular. Cómo podría lograrlo? Pienso que entraría en conflicto o se puede tener varias versiones en mi misma maquina?

Erik Elyager

student•

Instala angular de forma local en tu proyecto no de forma global (-g) y siempre que corras un comando hazlo a través de npm.

Michael Stiduar Quiñones Jaimes

student•

alguna solución para este error ? Esta página no funciona 127.0.0.1:8080 ha enviado una respuesta no válida. ERR_INVALID_REDIRECT en Cli = [Sun Jul 14 2019 11:45:27 GMT-0500 (GMT-05:00)] "GET /" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36"

Diego Forero

Team Platzi•

El servidor al parecer esta enviando una respuesta, probaste desde el navegador para ver que responde el servidor?

Patricia Gálvez

student•

Hola tengo el mismo problema. Lograron solventarlo? Por favor si me ayudan les agradecería un montón.

Manuel Ferrer García

student•

Si no os funciona desde la consola, probar a crear un subdominio y publicar la carpeta dist ahí.

A mi me ha funcionado.

Alex Eugenio Gavidia Donayre

student•

cómo insertan imagen en el comentario?

Fernanda Aragon

student•

Debes seguir este estilo de marcado para subir una imagen:

![Titulo de la imagen](url de la imagen)

También puedes arrastrar la imagen hasta el comentario que vas a poner.

Alex Eugenio Gavidia Donayre

student•

Gracias hermano.