Configurando webpack para producción
Clase 14 de 22 • Curso de Server Side Render con Express
Contenido del curso
Jaume Parrot Altisent
student•
hace 6 años
Emanuel Catriquil
student•
hace 6 años
Jaume Parrot Altisent
student•
hace 6 años
Jaume Parrot Altisent
Emanuel Catriquil
Jaume Parrot Altisent
Anibal Moises Garcia Moy
Cesar Andres Ardila Buitrago
Victor Baruch Pazaran Jaimes
Julia Suárez
Matthias Ignacio Clein Espinoza
Erick Avila Rojas
Fredy Sarmiento
Rulo Code
Luis Lira
Alfredo Mauricio Aguirre Catucuago
Andres Caro
mauricio garcia
José María Cuevas Ramírez
John Botero
Carlos Alfonso Garcia Rivera
Laura Camila Pregonero
Juan Esteban Galvis
César Palma
Irungaray Agustin
Beto Martinez
Luis Carlos Kristen Ospitia
Elvis Saavedra
Nelson Cadenas
Ezequiel
mauricio garcia
Jose Daniel Molina
Luis Lira
Jose Daniel Molina
Eduardo Garcia Garcia
MARTIN RAMIREZ RAMIREZ
Hola, no soy capax de cargar las imagenes de fuera de nuestro proyecto,
ni tampoc el stado de redux:
Antes de iba. El probado de hacer un copu&paste, del código del profesor, y nada. Si alguien me pudiera aydar, se lo agraceria un monton. Graciac
Hola! Aparentemente es un problema con las dependencias. Me paso lo mismo y reemplace el package.json que había hecho por el que te podes descargar en la seccion de archivos y enlaces. Le das a npm i, después npm run build y después node src/server, si todo anda bien en el puerto 3001 deberías ver la app con imágenes y sin errores
Correcto, el problema es la version del hemet, ahorra utilizo la misma version del curso, y me funciona
yo utilicé esta configuración del contentSecurityPolicy
else { app.use(express.static(`${__dirname}/public`)); app.use(helmet()); app.use( helmet.contentSecurityPolicy({ directives: { 'default-src': ["'self'"], 'script-src': ["'self'", "'sha256-lKtLIbt/r08geDBLpzup7D3pTCavi4hfYSO45z98900='"], 'img-src': ["'self'", 'http://dummyimage.com'], 'style-src-elem': ["'self'", 'https://fonts.googleapis.com'], 'font-src': ['https://fonts.gstatic.com'], 'media-src': ['*'], }, }), ); app.use(helmet.permittedCrossDomainPolicies()); app.disable('x-powered-by'); }```
Muchas gracias Anibal, este funciona con la ultima version de helmet.
muchas gracias, igual me funciono, aunque tuve que cambiar la clave sha por la que me aparecia en el error
No es mejor mantener un webpack.config.js y un webpack.config.dev.js en vez de llenar el webpack de condicionales?
Antes de empezar este curso terminé el nuevo curso de Webpack, así que también creo que era mejor opción generar dos archivos de webpack.config.
Es todo un tema el usar Helmet ya que para el momento en que estoy tomando el curso la versión es 4.2.0 y cambiaron cosas que no funcionan con la manera en que se dicta en la clase. . Después de revisar documentación existen configuraciones extras que hay que hacer para que el middleware no agregue el header por default y bloquee la implementación que se está manejando hasta ahora. Dejo una copia de lo que hice. .
PD. Intenté poner el código inline para que se pudiera copiar pero las políticas de Platzi borran mi comentario porque dice que tiene enlaces a sitios no seguros…
. PD2. El comentario de arriba se supondría sería un h1, pero creo no funciona el markdown al igual que los saltos de línea.
me gusta lo que voy aprendiendo, pero hay mucho por aprender a veces siento que estoy perdido y vuelvo a retomar. la cuestión esta en la voluntad y la disciplina de cada uno, vamos con toda
Para no tener que estar cambiando el archivo .env podemos ponermos en modo production desde el script
"build": "ENV=production webpack-cli --config webpack.config.js",
En algunos casos habrá a personas que nos les funcionará el script de esta manera, pero pueden hacerlo usando esta librería de npm https://www.npmjs.com/package/cross-env
Para la fecha que estoy tomando el curso, aun hay problemas con la configuración, pero el problema mas grande es el CACHE del navegador. Adicional a eso incluí una línea de código extra y todo fluye bien después de borrar el cache. Código que va luego de usar helmet:
app.use( helmet({ contentSecurityPolicy: false, }), );
Solucione el problema del webpack cambiandolo de verción ya que la veción actual no deja realizar el cambio
npm i webpack-cli@3.3.10
tambien cambie el build por sugerencia de un compañero
"build": "ENV=production webpack-cli --config webpack.config.js",```
Hola a todos. Al aplicar SSR y deshabilitar javascript debería seguir funcionando todo tal cual?
No, ya que la aplicación depende completamente de JavaScript para funcionar.
La idea de SSR es renderizar el html de la página mientras termina la carga del js, no es funcional hasta que termine.
se ve bastante simple el proceso de enviar a produccion, mi pregunta es, ¿al servidor solo tendre que subir lo que esta en la carpeta public?
Configuracion Webpack
Me esta cargando el JS pero no el CSS 🙁 dejo pantallazo por si alguno sabe como solucionarlo:
// This disables the contentSecurityPolicy middleware but keeps the rest. app.use( helmet({ contentSecurityPolicy: false, }) );
Para que el aviso de Node al iniciar el servidor sea aún mas específico puede ser así:
app.listen(port, (err) => { if (err) console.log(err) else console.log(`Servidor corriendo en modo ${env} en http://localhost:${port}`) })
Se me cargaron dos Apps en el mismo body jajajaja
tengo un problema y es que en development me va como una nave, pero me hace el build bien y cuando lo lanzo con Node, no me va, en el source de la pagina tampoco aparece que haya cargado nada, solo un (index)
<!DOCTYPE html> <html> <head> <title>Platzi Video</title> </head> <body> <div id="app"></div> </body> </html>```
A alguien más le falla si intenta cargar la página de un video? al navegar me funciona, si recargo la página me sale erro
TypeError [ERR_INVALID_CALLBACK]: Callback must be a function. Received { '$$typeof': Symbol(react.element), type: [Function: Redirect] { propTypes: { push: [Function], from: [Function], to: [Function: bound checkType] } }, key: null, ref: null, props: { to: '/404' }, _owner: null, _store: {} }
Excelente clase!!!! Tengo una inquietud, al momento de hacer la prueba deshabilitando Javascript del navegador y verificar si está funcionando el SSR, la aplicación se me despliega correctamente (obviamente para que la app me tome este cambio actualizo la app desde el navegador con F5). El detalle está cuando presiono los botones de la app, por ejemplo, el botón de play o el botón de agregar el video a mis favoritos. En el primer caso no me reproduce el video, solo una página que dice no encontrado y en blanco sin estilos. En el segundo caso, no me agrega el video a la lista de favoritos. Pregunto, esto es un comportamiento normal de la aplicación cuando se está haciendo el testeo del SSR (app sin un uso de javascript), porque a simple vista solamente me está desplegando la página principal de la app, pero están fallando todas las funcionalidades de la misma. Igualmente pasa con los formularios de login y register, al presionar los botones de enviar ambos formularios hacen refresh y listo, no hace el simulacro de inicio de sesión, solo se recargan en blanco.
La reproducción de video, login y register no están implementadas en el proyecto, así que es normal que pase eso. Lo de agregar favoritos si debería funcionar. Chequea si hiciste clone de la rama correcta que es la de feature/router-redux
tengo el msmo problema, pudiste saber la razon?
Estoy trabajando a la par del curso con otro proyecto para aplicarle SSR... Hice el HotModuleReplacement con exito, y también estoy renderizando la app desde el server. El problema es el siguiente, mi app no maneja Redux sino que funciona con una API. Al momento de deshabilitar el javascript para probar el SSR se queda en el loader y no me muestra nada más. Yo lo atribuyo a que hay una llamada API y de ahí depende que se muestren items... Dejo imagenes para que se den una idea. Muchas gracias por cualquier ayuda :D
Esta es la app normal, cada imagen se obtiene de la API.
Y esta es la app cuando deshabilito javascript
Para eso lo que podrías hacer es que todo el llamado de la API lo hagas desde el server también, para esto puedes usar axios, y con la información que la API te regrese es con lo que crearás el template que se enviará al cliente desde el servidor.
Entonces, al parecer estoy en lo correcto? es por la llamada a la API...
Tomaré en cuenta tu consejo, muchas gracias :D
Alguien sabes como configurar los CORS en el Server?? Quiero mandar a llamar una pagina dentro de un iframe y me marca errores de CORS, ¿existe alguna configuración dentro del Server que me recomienden para evitar este bloqueo?
no encuentro como validar que nuestra aplicacion mande error de lado del servidor al momento de llamar a window?