Servir React con Express

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

Abdiel Alvarez Rojas

student•

A los que no les salgan las imágenes dummies, es porque deben levantar otro localhost que proporciona esa información, (si no me equivoco se llama fake api), en otra pestaña de la terminal deben levantar estos comandos:

npx json-server initialState.json

y ya después deberán volver a correr en otra pestaña de la terminal:

npm run start:dev

David Salomon Baena Rubio

student•

jejeje lo logre!

zefe torres

student•

Como hago para que mi navegador haga reload automático cada vez que haga un cambió en mi código? Actualmente si hago un cambio y guardo se reinicia el server express, pero el navegador no se recarga automáticamente.

Adrian Camilo Caminos

student•

Hola tengo una pregunta baje el repo de github de platzivideo y en la rama de server-side-render borre los package.lock y yarn.locl instale las dependencias por yarn o npm y me genera el siguiente error el proyecto esta intacto

Error: Invariant failed: You should not use <Link> outside a <Router>

Daniel Esteves

student•

¡Hola! Muestranos tu código por favor, al parecer estás declarando un <Link> fuera del componente <Router></Router>

Armando de jesus santiz lopez

student•

excelente curso, tengo una duda, porque separar la aplicacion en 2 aechivos vendor y app ? ¿no entiendo mucho la ventaja de hacer esto? gracias

Carlos Sampol

Team Platzi•

La ventaja principal de esto es para no cargar un solo archivo muy pesado. Aparte, si haces cambios en el app pero no en las dependencias no tienes que reconstrir todo de nuevo solo el app.js en este caso.

Arantxa Giovanna Rosas Del Valle

student•

Me marca el siguiente error en consola:

react-dom.development.js:27564 Uncaught Error: Target container is not a DOM element.
    at Object.render (react-dom.development.js:27564)
    at Module.eval (index.js:177)
    at eval (index.js:199)
    at Module../src/frontend/index.js (app.js:1229)
    at __webpack_require__ (app.js:786)
    at checkDeferredModules (app.js:46)
    at Array.webpackJsonpCallback [as push] (app.js:33)
    at vendor.js:1```

Cómo puedo revisar que está mal???

Juan Castro

teacher•

¡Hola! Está difícil ayudarte sin ver tu código. ¿Tienes publicado el repo en GitHub o en alguna parte donde podamos verlo y estudiar todos sus secretos escondidos? :pray::bug:

Mientras te lo piensas puedes ir viendo las respuestas a otra persona que tuvo el mismo problema: https://stackoverflow.com/questions/50833694/react-uncaught-error-target-container-is-not-a-dom-element. :wink:

rusbel bermúdez rivera

student•

Una nota importante para quienes quieren entender la lógica y apenas empezamos con javascript

En el minuto 5:00, el contenido de los tags link y script, estan relacionados con los sources del proyecto dale dale “run start:dev” inspect, y mira los sources, estara la carpeta assets con los archivos app.css, app.js y vendor.js, creados “automagicamente”, el contenido de ellos es el que abstraemos e insertamos usando la configuración de webpack, esto lo aprendí por un typo que tenía, un tropiezo es aprendizaje.

Servir React con Express

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