Hashes

Clase 21 de 22 • Curso de Server Side Render con Express 2019

Pablo Verduzco

student•

Aca mi solucion 👨‍💻 .

import getManifest from '../getManifest';
import {} from 'dotenv/config';

const isProd = process.env.NODE_ENV === 'production';

const files = getManifest();

const render = (html, preloadedState) => {
  return `<!DOCTYPE html>
<html>
  <head>
    <title>Cinema</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="${isProd ? files['main.css'] : './assets/app.css'}">
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="app">${html}</div>
    <script>
      // WARNING: See the following for security issues around embedding JSON in HTML:
      // http://redux.js.org/recipes/ServerRendering.html#security-considerations
      window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
    </script>
    <script src="${isProd ? files['main.js'] : './assets/app.js'}"></script>
    <script src="${isProd ? files['vendors.js'] : './assets/vendor.js'}"></script>
  </body>
</html>`;
};
export default render;

Enrique Alexis Lopez Araujo

student•

Si tienen muchos problemas al hacer el build con el comando:

npm run build

Les recomienda modificar la configuracion en nuestro archivo webpack.config.js

Anteriormente estaba asi en la parte del module: eslint-loader

{
	test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        enforce: 'pre',
        use: {
          loader: 'eslint-loader',
        },
},

Y lo que haremos se hace es agregar un objeto llamado options con la opcion emitWarning: true

{
	test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        enforce: 'pre',
        use: {
          loader: 'eslint-loader',
	options: {
		emitWarning: true
	}
        },
},

Si nos va a mostrar los errores pero podemos estar resolviendo y haciendo build de la app, es mala practica hacer esto como aclaracion:

Les dejo el link de la documentacion del loader de eslint:

rusbel bermúdez rivera

student•

A muchos no les gustó el curso, en lo personal aprendi mas sobre webpack, sin tomar el curso y mas sobre buenas practicas y express, el conocimiento no esta envuelto siempre en una cajita envuelta en papel dorado, y veces hay ue ensuciarse las manos (y tomar ibuprofeno, mentar madres y seguir) gracias por el curso

Omar Flores Grimontt

student•

Mi solución al reto :) :

import dotenv from 'dotenv'
import { getManifest } from '../utils'

dotenv.config()

const { NODE_ENV } = process.env
const isProd = NODE_ENV === 'production'

const srcs = {
    mainCss: 'assets/app.css',
    mainJs: 'assets/app.js',
    vendorsJs: 'assets/vendor.js',
}

if (isProd) {
    const files = getManifest()
    srcs.mainCss = files['main.css']
    srcs.mainJs = files['main.js']
    srcs.vendorsJs = files['vendors.js']
}

export const render = (html, preloadedState) => {
    return `
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Platzi Video</title>
            <link rel="stylesheet" href="${srcs.mainCss}" type="text/css"></link>
        </head>
        <body>
            <div id="root">${html}</div>
            <script>
                // WARNING: See the following for security issues around embedding JSON in HTML:
                // http://redux.js.org/recipes/ServerRendering.html#security-considerations
                window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
            </script>
            <script src="${srcs.mainJs}" type="text/javascript"></script>
            <script src="${srcs.vendorsJs}" type="text/javascript"></script>
        </body>
        </html>
    `
}

Jorge Humberto Nemogá Pinzón

student•

Reemplazo las rutas resultantes del manifest.json sin afectar el template de html ya hecho.

const dotenv = require('dotenv');
const getManifest = require('../getManifest.js');

dotenv.config();
let files = {};

if (process.env.NODE_ENV === 'production') {
  files = getManifest();
} else {
  files = {
    'main.css': 'assets/app.css',
    'main.js': 'assets/app.js',
    'vendors.js': 'assets/vendors.js',
  };
}

. . .

Jorge Humberto Nemogá Pinzón

student•

Si les sale un error por la configuración de los plugins de compresión y manifest, yo lo solucione así:

	isProd ? new CompressionPlugin({ test: /\.js$|\.css$/, filename: '[path].gz' }) : () => {},
	isProd ? new ManifestPlugin() : () => {},

Maximo Martinez Soria

student•

Por qué con SSR funciona la app si deshabilitamos JavaScript? Igualmente tiene que descargarse y ejecutarse o no?

Manuel Silva Guevara

student•

Por que con SSR Javascript se ejecuta en el servidor, y al cliente solo le llegan archivos estáticos que no necesitan Javascript para mostrarse. Cuando desactivas Javascript lo estás desactivando en el navegador, pero como te mencioné, SSR no ejecuta Javascript en el navegador si no en el servidor

Maximo Martinez Soria

student•

Ahh, ahora sí entendí. Muchas gracias!

David Camacho

student•

import getManifest from '../getManifest';
import dotenv from 'dotenv';
dotenv.config();

const ENV = process.env.NODE_ENV;
const isProd = ENV === 'production';
const files = getManifest();

const render = (html, preloadedState) => {
  return (`
  <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <link rel="stylesheet" href="${isProd ? files['main.css'] : './assets/app.css' }" type="text/css" />
      </head>
      <body>
      <div id="app">${html}</div>
      <script type="text/javascript">
        window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(
          /</g,
          '\\u003c'
        )}
      </script>
      <script src="${isProd ? files['main.js'] : './assets/app.js'}" type="text/javascript"></script>
      <script src="${isProd ? files['vendors.js'] : './assets/vendor.js'}" type="text/javascript"></script>
    </body>
    </html>
  `);
};

export default render;

Hashes

Primeros pasos

¡Vamos a renovar este curso!

Introducción y presentación del curso

¿Qué es Server Side Rendering?

Babel, Express y React

Creación del proyecto base

Configuración de ESLint con Webpack

Preparación de Webpack, Babel, PostCSS y Assets

Usando Plugins y vendor file en Webpack

Integración de Webpack con Express

Integración de Express con React

Servir React con Express

Agregando variables de sass desde webpack

Aplicando history y creando rutas para el servidor

Haciendo initialState accesible y configurando Redux DevTools

Aplicar Server Side Rendering

Definiendo la función main para renderizado desde el servidor

Aplicando la función main para renderizado desde el servidor y creación del string de HTML

Assets require hook

Hydrate y estado de Redux desde Express

Trabaja con entornos de desarrollo y producción

Configurando nuestro servidor para producción

Configurando el frontend y webpack para producción

Compresión de Assets

Hashes

Cierre del Curso