Clase 21 de 22 • Curso de Server Side Render con Express 2019
Contenido del curso
Pablo Verduzco
Enrique Alexis Lopez Araujo
rusbel bermúdez rivera
Omar Flores Grimontt
Jorge Humberto Nemogá Pinzón
Jorge Humberto Nemogá Pinzón
Maximo Martinez Soria
Manuel Silva Guevara
Maximo Martinez Soria
David Camacho
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;
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:
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
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> ` }
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', }; } . . .
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() : () => {},
Por qué con SSR funciona la app si deshabilitamos JavaScript? Igualmente tiene que descargarse y ejecutarse o no?
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
Ahh, ahora sí entendí. Muchas gracias!
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;
