Servir React con Express
Clase 8 de 22 • Curso de Server Side Render con Express
Contenido del curso
Elvis Saavedra
student•
hace 6 años
Clase 8 de 22 • Curso de Server Side Render con Express
Contenido del curso
Elvis Saavedra
José Enrique Pérez Aquino
Laura Camila Pregonero
Rulo Code
Wilmer Alfredo Flores Melchor
Nestor Ruben Rodriguez Caro
Cesar Fonseca
Carlos Angel Muñoz Castañeda
Mariela de Jesus Rivas Hernandez
Elvis Ojeda Melo
Bruno Amadori
Enrique Moreno
Cristian Daniel Jesus Rios
José Marquínez
DANIEL MEDINA ARMADA Medina
Matthias Ignacio Clein Espinoza
José Marquínez
Ismael Grimaldo Vega
Gilberto Santamaria
Miguel de la Rosa
Tomás Canosa Moreno
Robinson De La Cruz
Juan Burns
Marlon Véliz
Jose Daniel Molina
Ginnio Sarabia
Camilo Rivera Quintero
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.
Wow genial Esto se pone bueno :D
malisima clase
vamos con todo che! les dejo mi github
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)); }
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
lo hice, pero en mi caso no me funcionó :( no se que estará mal en mi codigo
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.
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
Me pasaba lo mismo entonces detuve nodemon y lo volví a ejecutar y todo bien.
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....
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.
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> `); });
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.
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
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.
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.
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???
¡¡Buenísimo!! 🤩🤩🤩
Server side rendering 🤩
Creo que debo repasar.
Genial!