Servir React con Express

Clase 8 de 22 • Curso de Server Side Render con Express

Elvis Saavedra

student•

Me parece que estos temas son mejor explicarlos con mucha teoría y ejemplos prácticos. Parecido al curso de nodejs, sólo copian mucho código sin hacer pruebas...

José Enrique Pérez Aquino

student•

Servir React con Express

Para poder empezar a correr React sobre nuestro servidor de express debemos copiar el html que se encuentra en nuestra carpeta public y pegarlo en nuestra respuesta principal del servidor de Express. Esto se vera de la siguiente forma:

app.get('*', (req, res) => {
  res.send(`<!DOCTYPE html>
  <html>
    <head>
      <title>Platzi Video</title>
    </head>
    <body>
      <div id="app"></div>
    </body>
  </html>`);
});

Luego en nuestra configuracion de Webpack eliminamos las siguientes lineas de codigo:

//El HTML plugin
const HtmlWebPackPlugin = require('html-webpack-plugin');

new HtmlWebPackPlugin({
      template: './public/index.html',
      filename: './index.html',
    }),

Posteriormente alteramos las siguientes líneas:

//Alteramos el nombre del bundle de js por app.js
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'assets/app.js', //Cambio aqui
    publicPath: '/',
  },

//Cambiamos el nombre del bundle del css por app.js
new MiniCssExtractPlugin({
      filename: 'assets/app.css', //Cambio aqui
    }),

Por ultimo, modificamos el HTML que estamos enviando desde el servidor, agregando las líneas que hacen el llamado al bundle del css y del js.

Quedando de la siguiente forma:

app.get('*', (req, res) => {
  res.send(`<!DOCTYPE html>
  <html>
    <head>
      <link rel="stylesheet" href="assets/app.css" type="text/css"/> 
      <title>Platzi Video</title>
    </head>
    <body>
      <div id="app"></div>
    </body>
    <script src="assets/app.js" type="text/javascript"></script>
  </html>`);
});

Ahora sí, podemos montar nuestro servidor nuevamente y comprobar el resultado

Nota: Para saber si realmente estamos haciendo SSR podemos desactivar Javascript desde las configuraciones de desarrollador del navegador.

Laura Camila Pregonero

student•

Asi me va quedando, modificando cada una de las imagenes.

Asi se ve cuando selecciono una pelicula.

Cuando no carga la pelicula parece asi.

y si no es ese el caso va a aparecer asi.

Rulo Code

student•

Wow genial Esto se pone bueno :D

Wilmer Alfredo Flores Melchor

student•

malisima clase

Nestor Ruben Rodriguez Caro

student•

vamos con todo che! les dejo mi github

https://github.com/ruben-xe

Cesar Fonseca

student•

Tuve que usar: "const serverConfig = { serverSideRender: true };"

if (ENV === 'development') {
  console.log(`${ENV} config`);
  const webpackConfig = require('../../webpack.config');
  const webpackDevMiddleware = require('webpack-dev-middleware');
  const webpackHotMiddleware = require('webpack-hot-middleware');
  const compiler = webpack(webpackConfig);
  const serverConfig = { serverSideRender: true };

  app.use(webpackDevMiddleware(compiler, serverConfig));
  app.use(webpackHotMiddleware(compiler));
}

Carlos Angel Muñoz Castañeda

student•

Si no se les refresca automaticamente el navegador les recomiendo borrar node_modules y package.json. Copiar el package.json igual del proyecto y ejecutar npm i para tener las mismas versiones que el profesor. Al menos eso fue lo que me ayudó y aquí les dejo el enlace al commit de esta clase: https://github.com/platzi/PlatziVideo/tree/1a68285cdb55b9a2a79c534f69cee139269b20fa

Mariela de Jesus Rivas Hernandez

student•

lo hice, pero en mi caso no me funcionó :( no se que estará mal en mi codigo

Elvis Ojeda Melo

student•

Mi navegador no se refresca automaticamente, y mi compilacion sale compiled successfully, y no tengo errores en consola. alguna idea? y si lo estoy corriendo con nodemon.

Bruno Amadori

student•

Recheckea haber hecho bien toda la parte de webpack-hot-server ... es exactamente esa la dependencia que se encarga de realizar eso. Si no la tienes bien instalada y configurada, no te va a andar

Enrique Moreno

student•

Me pasaba lo mismo entonces detuve nodemon y lo volví a ejecutar y todo bien.

Cristian Daniel Jesus Rios

student•

No entiendo, cuando hace los filename: 'assets/app.js', como entiende JS para buscar esos estilos y scripts en esa direccion, si en verdad estan dentro de frontend/styles/etc...etc....

José Marquínez

student•

La propiedad filename se refiere los outputs, o sea así se llamarán cuando se compilen. No se refieren de la ruta de donde son llamados o abstraídos. Por eso en el html linkeas hacía ellos porque así se llaman cuando son compilados.

DANIEL MEDINA ARMADA Medina

student•

Una consulta? cuando el profesor corrige la etiqueta del html link con rel='stylesheet' href="assets/app.css" y salva, la página web deberia actualzarse sola sin que la refresque? lo pregunto por que no se me refresca sola?

app.get('*', (req, res) => {
  res.send(`
    <!DOCTYPE html>
      <html>
        <head>
          <link rel='stylesheet' href="assets/app.css" type="text/css">
          <title>Platzi Video</title>
        </head>
        <body>
          <div id="app"></div>
          <script src="assets/app.js" type="text/javascript"></script>
        </body>
      </html>
  `);
});

Matthias Ignacio Clein Espinoza

student•

Hola Daniel. Efectivamente debería actualizarse automáticamente pues con "npm run start:dev" se hace uso de nodemon. Si no lo está haciendo, seguramente hay un error en la configuración, por lo que te recomendaría repasar las dos últimas clases que son las enfocadas en eso. Saludos.

José Marquínez

student•

A los nuevos que estamos llegando al curso, les recomiendo que repasen los módulos anteriores de la escuela de JS, ya que aquí ya se dan por sentadas cosas básicas que deberíamos dominar. Por el contrario nos podríamos desmotivar y frustrar por un avance atropellado. Por ejemplo repasen el curso de webpack que es muy necesario para entender las configs y también el de react para los próximos módulos.

Ismael Grimaldo Vega

student•

El orden de los middlewares importa

Recuerden que es importante en qué línea mandan llamar a su middleware. En este caso debe ir antes del app.get()

if (ENV === 'development') {
  console.log('Development config');
  const webpackConfig = require('../../webpack.config');
  const webpackDevMiddleware = require('webpack-dev-middleware')
  const webpackHotMiddleware = require('webpack-hot-middleware');
  const compiler = webpack(webpackConfig);
  const serverConfig = { port: PORT, hot: true };

  app.use(webpackDevMiddleware(compiler, serverConfig));
  app.use(webpackHotMiddleware(compiler));

}

app.get('*', (req, res) => {
  res.send(`
  <!DOCTYPE html>
    <html>
      <head>
        <link rel="stylesheet" href="assets/app.css" type="text/css">
        <title>Platzi Video</title>
      </head>
      <body>
        <div id="app"></div>
        <script src="assets/app.js" type="text/javascript"></script>
      </body>
    </html>
  `);
});

Gilberto Santamaria

student•

Hola, tengo un problema y es que cuando ya he configurado todo, en la consola del navegador me dice : app.js:2 Uncaught SyntaxError: Unexpected token '<' y si examino el error me muestra el html que servimos como error, pensé que había usado las comillas incorrectas pero no es eso.

Miguel de la Rosa

student•

No me queda claro para que sirve @babel/register

Tomás Canosa Moreno

student•

Lo que hace es asociar el transpilador de babel al require de node, es decir, cada vez que requieras un módulo, por ej:

require('./server.js')

server.js puede usar sintaxis moderna ya que babel lo compilara antes de que node lo ejecute.

Robinson De La Cruz

student•

Es correcto lo que dice el compañero. Puedes probar borrando las lineas donde requerimos @babel-register y te enviará un error recalcando que estas usando sintaxis es6.

Juan Burns

student•

Una pregunta, no sería mejor crear otro archivo "webpack.dev.config.js" y un script que ejecute una configuracion de desarrollo, para poder ejecutarlo sin crear la carpeta dist con todos los archivos, y no mezclar la configuracion de desarrollo con la configuracion de produccion???

Marlon Véliz

student•

¡¡Buenísimo!! 🤩🤩🤩

Jose Daniel Molina

student•

Server side rendering 🤩

Ginnio Sarabia

student•

Creo que debo repasar.

Camilo Rivera Quintero

student•

Genial!

//Alteramos el nombre del bundle de js por app.js
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'assets/app.js', //Cambio aqui
    publicPath: '/',
  },

//Cambiamos el nombre del bundle del css por app.js
new MiniCssExtractPlugin({
      filename: 'assets/app.css', //Cambio aqui
    }),

app.get('*', (req, res) => {
  res.send(`<!DOCTYPE html>
  <html>
    <head>
      <link rel="stylesheet" href="assets/app.css" type="text/css"/> 
      <title>Platzi Video</title>
    </head>
    <body>
      <div id="app"></div>
    </body>
    <script src="assets/app.js" type="text/javascript"></script>
  </html>`);
});

if (ENV === 'development') {
  console.log(`${ENV} config`);
  const webpackConfig = require('../../webpack.config');
  const webpackDevMiddleware = require('webpack-dev-middleware');
  const webpackHotMiddleware = require('webpack-hot-middleware');
  const compiler = webpack(webpackConfig);
  const serverConfig = { serverSideRender: true };

  app.use(webpackDevMiddleware(compiler, serverConfig));
  app.use(webpackHotMiddleware(compiler));
}

app.get('*', (req, res) => {
  res.send(`
    <!DOCTYPE html>
      <html>
        <head>
          <link rel='stylesheet' href="assets/app.css" type="text/css">
          <title>Platzi Video</title>
        </head>
        <body>
          <div id="app"></div>
          <script src="assets/app.js" type="text/javascript"></script>
        </body>
      </html>
  `);
});

if (ENV === 'development') {
  console.log('Development config');
  const webpackConfig = require('../../webpack.config');
  const webpackDevMiddleware = require('webpack-dev-middleware')
  const webpackHotMiddleware = require('webpack-hot-middleware');
  const compiler = webpack(webpackConfig);
  const serverConfig = { port: PORT, hot: true };

  app.use(webpackDevMiddleware(compiler, serverConfig));
  app.use(webpackHotMiddleware(compiler));

}

app.get('*', (req, res) => {
  res.send(`
  <!DOCTYPE html>
    <html>
      <head>
        <link rel="stylesheet" href="assets/app.css" type="text/css">
        <title>Platzi Video</title>
      </head>
      <body>
        <div id="app"></div>
        <script src="assets/app.js" type="text/javascript"></script>
      </body>
    </html>
  `);
});

Servir React con Express

Conocimientos necesarios para aplicar SSR

Lo que aprenderás sobre server side render

Presentación del proyecto del curso y sus herramientas

¿Qué es Server Side Rendering?

Preparando entorno para aplicar SSR

Actualizando dependencias en NPM

Creación del servidor en Express

Usando Nodemon y Dotenv

Integración de Webpack con Express

Integración de Express con React

Servir React con Express

Abstrayendo React Router, creando history y haciendo initialState más accesible

Aplicar Server Side Rendering

Definición de la función principal para realizar el renderizado desde el servidor

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 webpack para producción

Optimización del Build

Aplicar hashes al nombre de nuestros builds

Buenas prácticas de Server Side Render

Vendorfiles en Webpack: definiendo cacheGroups

Vendorfiles en Webpack: generando el vendorfile

Configuración de ESLint

Alternativas al SSR con Express

Cómo implementar Next.js

Cómo usar Gatsby.js

Cuando usar cada una de las herramientas presentadas