A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Configurando webpack para producci贸n

14/22
Recursos

Aportes 31

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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

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');
}```

No es mejor mantener un webpack.config.js y un webpack.config.dev.js en vez de llenar el webpack de condicionales?

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.
.

.
De esta manera se agregan varias sentencias que permiten que el proyecto funcione como hasta ahora se a programado en la Escuela de JS. Cabe se帽alar que los hash necesarios para escapar los scripts inline que se maneja en el html y unos que uso en css para la fuente var铆an de acuerdo a su c贸digo. Estos los pueden copiar de los mensajes de error que arroja Chrome o buscar un generador de hash con el algoritmo sha256.
.
Con esto logr茅 que funcionara en Chrome, Firefox y Opera. En Safari a煤n no lo logro porque alguno de los middlewares que usa Helmet choca con la configuraci贸n SSL del navegador. Si alguien tiene soluci贸n a ese problema agradecer铆a nos lo compartiera.
.

<h1>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鈥</h1>

.
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",

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?

Configuracion Webpack

Me esta cargando el JS pero no el CSS 馃檨 dejo pantallazo por si alguno sabe como solucionarlo:

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.

Para los que le arroje error tanto en las imagenes como en el array de myList se requiere de dos soluiones para esto:

  1. Colcoar una version de Helmet 3.x ya que superiores presentan error.
    2, En la funcion renderApp, arriba de la linea de res.send() colocar ```
    res.set(鈥淐ontent-Security-Policy鈥, 鈥渋mg-src 鈥榮elf鈥 https://dummyimage.com鈥);

Hola, para los que no puedan cargar las imagenes y tengan la versi贸n de Helmet 4.6.0, esta es la configuraci贸n para que funcione

app.use(express.static(`${__dirname}/public`));
  app.use(helmet());
  app.use(helmet.permittedCrossDomainPolicies());
  app.use(
    helmet.contentSecurityPolicy({
      useDefaults: false,
      directives: {
        defaultSrc: ["'self'"],
        "img-src": ["'self'", "dummyimage.com"],
        "font-src": ["'self'", "fonts.gstatic.com"],
        "script-src": [
          "'self'",
          "'sha256-fqAyYQw90BvHA2X8Dgsi3fckwxSvBr0kTnVVFxqUOls='",
        ],
        "style-src": ["'self'", "fonts.googleapis.com"],
      },
    })
  );
  app.disable("x-powered-by");

Si se tiene una versi贸n de webpack mayor a la 5 en el proyecto se deber谩 actualizar tambi茅n webpack-cli a la versi贸n mas reciente para evitar errores al ejecutar el npm run build

El error de las im谩genes se debe a un conflicto con Helmet por versiones recientes (a partir de las 4.x), sin embargo si instalan la versi贸n del curso puede que les arroje otro error por el permittedCrossDomainPolicies, pueden instalar:

npm i [email protected]3.23.3 //La 煤ltima versi贸n 3.x

De esta forma tendr谩n las im谩genes sin tener que hacer reajustes en otras partes del codigo, una vez finalizada la instalaci贸n de esta versi贸n no olviden:

npm run build

node src/server

Si alguien tiene problemas con el Content-Security-policiy en el app.use(helmet()); pueden usar este otro para que no les de el problema:
app.use(
helmet({
contentSecurityPolicy: false,
}),
);

El problema que se presento es cuando colocas una imagen de fondo, dice que hay problemas con la ruta.

Excelente clase el uso de variable de entorno ayuda mucho.鈾

amigos una pregunta al deshabilitar el javascript es normal que no cargue los videos a mi lista y que no los elimine ni se vea el video???

Tuve el mismo problema en chrom, revise en mozilla y si funcionaba, as铆 que limpi茅 el cache de chrom y despu茅s todo funcion贸.

No me deja responder al comentario de abajo.Entonces coloco lo que me funcion贸 a m铆. Tuve el mismo problema en chrom, revise en mozilla y si funcionaba, as铆 que limpi茅 el cache de chrom y despu茅s todo funcion贸.

cuando desabilito javaszcript no funcionan algunos assets como las imagenes por ejemplo, ni cuando uso el 鈥渉ydrate鈥 supongo que es por que como fueron importadas con 鈥榬eact鈥 no funcionan si no hasta que se hace el render, pero veo que al profe si le funcionan鈥 mi pregunta es. es jnormal lo que me pasa?

A mi solo me carga el HTML, ni el CSS ni el JS me carga, voy a netwok a ver que tiene los archivos es un html WTF, en la consola tampoco me aparece todo eso que aparece cuando webpack hace el build, solo el server on port 3000 y ya

Veo que muchos tuvieron un error de CSP(Content Security Policy), en los comentarios ya explicaron como resolverlo pero les dejo este enlace por si quieren saber m谩s del tema:

https://developer.mozilla.org/es/docs/Web/HTTP/CSP

Gracias por el aporte!