A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Servir React con Express

8/22
Recursos

Aportes 21

Preguntas 6

Ordenar por:

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

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鈥

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.

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.

Wow genial
Esto se pone bueno 馃槃

malisima clase

vamos con todo che!
les dejo mi github

https://github.com/ruben-xe

Tuve que usar: 鈥渃onst 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));
}

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

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.

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.

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

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.

No me queda claro para que sirve @babel/register

Una pregunta, no ser铆a mejor crear otro archivo 鈥渨ebpack.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???

隆隆Buen铆simo!! 馃ぉ馃ぉ馃ぉ

Server side rendering 馃ぉ

Creo que debo repasar.

Genial!

Como dicen por ahi es mejor crearse un nuevo webpack.config para tener los antiguos como referencia.
En esta clase lo que hacemos: compilar la app que esta en frontend en un archivo 鈥渁pp.js鈥 y asi desde el servidor enviamos un html con el script ejecutado.
馃崗

Algo que e notado es que los bundles se cargan 2 veces , 1 cuando es SSR y la otra al momento de hacer el CSR, esto tiene mucho sentido que pase, pero si no ponemos atenci贸n en estos detalles podemos generar un errores.

Batalle un poco en poder hacer que funcionara mi app debido a que en el momento en que estoy tomando el curso Webpack lanz贸 su versi贸n 5. Y con ello dejaron de funcionar las instrucciones, incluso desde la clase pasada.
.
Revisando las documentaciones tanto de webpack como del react-hot-loader realic茅 modificaciones tanto en los config como en el archivo del servidor y el 铆ndex de la app.
.
Les dejo mi GitHub en el branch que lo estoy trabajando por si quieren revisar un poco.
.
Saludos