Comandos npm:
npm install --save-dev webpack-node-externals
Este comando instalará la última versión de “webpack-node-externals” y lo agregará como una dependencia de desarrollo en su proyecto
npm run build-server
Fundamentos de SSR
¿Por qué necesito aprender sobre SSR?
El problema de las Single Page Applications
Poniendo a prueba las Single Page Applications
¿Qué es el Server Side Render?
Ventajas y desventajas del Server Side Render
Crea tu primer app con SSR
Tu nuevo proyecto: Helix Eye
Configurando Webpack para compilar TypeScript
Tu primer servidor con Express.js y TypeScript
Creando un template con HTML
Renderizando React desde el servidor
Hidratando la aplicación y separando el bundle del cliente
Initial Props y Consultas a la API desde el servidor
Consumiendo las Initial Props desde el cliente
Manejo de estilos desde el servidor
Bonus
Hot Module Replacement
Platzi Engine vs. Next.js
¿Quieres un Curso Avanzado de Server Side Render?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
El proceso de configurar Webpack para que funcione con TypeScript es esencial para proyectos que necesitan integrar estas tecnologías, particularmente cuando se desarrolla un servidor en Node.js. Si bien aún no se ha instalado Express ni configurado tipos específicos, esta clase ofrece un enfoque paso a paso para crear un bundler con Webpack que convierte el código TypeScript a JavaScript entendible por Node.js. ¡Acompáñame mientras caminamos por este interesante proceso!
Desde el principio, es crucial conocer que todo lo que implementaremos está en la rama WebpackConfigServer
. Si deseas explorar más, puedes usar git checkout
y especificar esta rama para acceder a todos los cambios. Antes de ejecutar el servidor de desarrollo, revisa el archivo package.json
para ver los scripts disponibles:
Para comenzar, ejecuta yarn start
, lo que primero realizará un build de Webpack y luego correrá la aplicación. Asegúrate de tener un archivo .env
adecuado copiando y pegando env.example
, ya que este define en qué puerto tu servidor se expondrá en producción.
Al configurar Webpack, es importante ajustar algunas configuraciones del entorno. Elimina cualquier servidor de desarrollo innecesario y renombra la configuración de Webpack para el cliente a webpack-config.client.js
. Para el servidor, crea un nuevo archivo index.typescript
dentro de src/server
con un simple console.log('Hola, mundo, desde el server')
.
Aquí hay un fragmento con los cambios principales de Webpack:
const nodeExternals = require('webpack-node-externals');
module.exports = {
target: 'node',
entry: './src/server/index.ts',
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist'),
},
externals: [nodeExternals()],
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
};
src/server/index.typescript
.index.js
en la carpeta dist
.Con los ajustes de Webpack en su lugar, es hora de modificar los scripts en el package.json
. Borra los scripts existentes relacionados con la antigua configuración del client-side render
y añade:
nodemon
para monitorear y ejecutar el servidor en modo desarrollo, reejecutando automáticamente cuando se detecten cambios.Ejemplo de script para build:dev
:
"scripts": {
"build:server": "webpack --config webpack-config-server.js",
"build:dev": "NODE_ENV=development npm run build:server && node dist/index.js",
"dev": "nodemon --watch './src/**/*.ts' -e ts --exec 'npm run build:dev'"
}
Utiliza yarn dev
para iniciar este proceso y verás el mensaje "Hola mundo" cuando hagas cambios en el archivo index.typescript
.
Agregar nodemon
como dependencia de desarrollo es crucial, ya que este vigila los cambios en archivos .ts
y vuelve a construir y ejecutar el servidor. Esto optimiza el flujo de trabajo al evitar la recompilación manual cada vez que se modifica algo en el código fuente.
Con todo configurado, tienes un entorno adecuado para trabajar con TypeScript y Node. Este entorno no solo permite la transpilación adecuada de TypeScript a JavaScript, sino que también establece una infraestructura sólida para la ejecución y monitoreo del servidor. A medida que avanzamos, exploraremos cómo añadir componentes de servidor adicionales y adentrarnos en el server-side rendering con React.
Sigue adelante, aprender a configurar herramientas robustas es un paso fundamental para cualquier desarrollador, y cada pequeño ajuste que hagas ahora hará que tu entorno de desarrollo sea más eficiente y agradable. ¡Buena suerte y sigue aprendiendo!
Aportes 10
Preguntas 1
Comandos npm:
npm install --save-dev webpack-node-externals
Este comando instalará la última versión de “webpack-node-externals” y lo agregará como una dependencia de desarrollo en su proyecto
npm run build-server
Si entran en panico como yo, resulta que la nueva rama tien todo escrito tal cual como queda al final de la clase y uno solo debe mirar.
Estonces es mejor tomar nota y repetir el mantra …confia en el proceso!!!
Este comando instalará la última versión de “webpack-node-externals” y lo agregará como una dependencia de desarrollo en su proyecto
npm install -g win-node-env
package.json:
"scripts": {
"build-server": "webpack --config webpack.config.server.js",
"build-dev": "NODE_ENV=development npm runbuild-server && node --inspect dist/index.js",
"dev": "nodemon --ext ts --exec \"npm run build-dev\" --inspect dist/index.js"
},
Mi terminal mostraba problemas al momento de ejecutar npm run dev. Lo arregle de la siguiente manera en mi package.json:
"scripts": {
"build-server": "webpack --config webpack.config.server.js",
"build-dev": "NODE_ENV=development npm run build-server && node --inspect dist/index.js",
"dev": "nodemon --ext ts --exec \"npm run build-dev\" --inspect dist/index.js"
},
Webpack node modules externals
Cuando se empaqueta con Webpack para el backend, generalmente no desea empaquetar sus dependencias de node_modules. Esta biblioteca crea una función externa que ignora node_modules cuando se empaqueta en Webpack.
la verdad q inicio de mierda de curso complicando con configuraciones y lpmqlp…
Ahora si quede super perdido, el profesor tiene otro package.json y todos los comentarios de los alumnos muestran un package.json igual al que tengo yo, pero start no sale por ningun lado!!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?