Creación del servidor en Express

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

Nelson Cadenas

student•

++Resumen de la Clase++

Creamos 2 carpetas dentro de la carpeta src, src/server: fuentes con toda la lógica relacionada con el servidor src/frontend: fuentes con toda la lógica relacionada con la app.
Movemos todos los archivos de nuestra app en react ubicada actualmente en la carpeta src, hacia src/frontend.
Creamos en la carpeta src/server 2 archivos, index.js y server.js.
Instalamos la siguiente dependencia: npm install @babel/register
En el archivo src/server/index.js, agregamos la siguiente configuración: require('@babel/register')({ presets: ['@babel/preset-env', '@babel/preset-react'], }) require('./server')
Instalamos más dependencias: npm install express dotenv.
Express sirve para poder instalar nuestro servidor local y dotenv se utiliza para manejar nuestras variables de entorno.
Agregamos todo el código necesario para correr el servidor de express en el archivo src/server/server.js.
Creamos un nuevo script en el archivo package.json, para poder ejecutar nuestro servidor: "scripts": { "start:dev" : "node src/server/index" }
Ejecutamos nuestro servidor desde la consola con: npm run start:dev.
Desde el navegador de Google Chrome, ingremos a la dirección 127.0.0.1:3000 o localhost:3000 para verificar que esta funcionando nuestro servidor de express.

Javier Armando Vargas Vega

student•

Muy buen resumen. Muchas gracias por el aporte.

Irungaray Agustin

student•

Gracias por tus aportes, los guardo porque seguro van a ser de utilidad!

Sergio Perez

student•

Comparto mis apuntes, se agradece feedback 👍:

Primero tenemos dividir el frontend y el server se hace creando una carpeta para cada uno en src y colocamos los respectivos archivos en su respectiva carpeta
en la carpeta de server creamos dos archivos que sera el index.js que sera donde vamos a tener el entry point para que la aplicacion pueda funcionar y el server.js donde tendremos el servidor con express
instalamos una nueva dependencia para usar babel en el servidor
- npm install @babel/register lo que hace es un buind a nuestro entorno para usar los presets de babel en el servidor
en index.js del server lo primero que hacemos es requerir el paquete de @babel/register y lo que va a hacer es llamar una configuracion que vamos a indicarse la indicamos dentro de un objeto con la configuracion que necesitamos
```
require('@babel/register')({
	presets:[
		'@babel/preset-env',
		'@babel/preset-react'
	]
})
```
luego llamamos nuestro archivo server que es donde tendremos toda la logica que estaremos haciendo
luego instalamos express y dotenv
en el archivo del servidor, osea server.js importamos express desde express y definimos una aplicacion llamando a express
llamamos a la aplicacion que acabamos de definir y utilizamos el metodo get('') que sera el tipo de ruta que vamos a estar llamando, en el get le indicamos que tipo de ruta estamos llamando le pasamos '*' que quiere decir que vamos a recibir todas las rutas, como segundo parametro le pasamos una funcion anonima que recibira un request y un response, dentro de esta funcion enviaremos una respuesta al usuario que en este caso sera un JSON que llamara a un hello y retornara express
```
import express from 'express' //importamos express

const app = express();

app.get('*', (req, res) => {
	res.send({ hello: 'express' });
});
```
Por ultimo tenemos indicarle en que puerto va a correr nuestro servidor utilizando la funcion listen que recibe como parametros el puerto y un manejo de error
```
app.listen(3000, (err) => {
	if (err) console.error();
	else console.log('Server running on port: 3000');
})
```
Luego creamos un nuevo script para ejecutar nuestro servidor que era de la siguiente forma
```
"start:dev": "node src/server/index"
```

Daniel Hernández

student•

npm i @babel/register -D

npm install @babel/register --save-dev

las 2 formas son lo mismo

Camilo José Mezú Mina

student•

¿Babel Register debería ser dependencia de desarrollo?

Erik Elyager

student•

Así es, solo de desarrollo.

Nicolas Esteban Manograsso

student•

Paquetes de esta clase npm install @babel/register express dotenv

HUGO ANDRES DIAZ BERNAL

student•

Cuando cambiamos la ubicación de los archivos en la carpeta frontend, nuestro npm run start no podrá encontrar nuestra raíz, eso nos afecta, hay que cambiar las rutas para arreglarlo o no es necesario?

Alejandro Daniel Oroncoy Almeyda

student•

Si nos afecta, pero se puede arreglar cambiando la raíz de nuestro proyecto, en webpack.config.js, cambiando el entry por

entry: './src/frontend/index.js'

Luego vuelve a la terminal y corre el comando npm run start, y no debería de haber problema!

Daniel Hernández

student•

otra manera de escribirlo...

app.listen(3000, (error) =&gt; {
  error ? console.log(error) : console.log('Server running on 3000 port');
});

Enrique Moreno

student•

y otra más simple seria:

app.listen(3000, (error) => console.error(error || 'Server on port 3000'));

Jose Daniel Molina

student•

Index.js

server.js

Camilo José Mezú Mina

student•

¿No deberían instalarse los paquetes del servidor aparte? osea en la carpeta del server y no en la general del proyecto

José Agüero

student•

Quiero hacer una consulta respecto a Express como api, he montado con Nuxt.js el módulo (npm i rss) para generar xml para podcast, el caso que cuando lo subo a Heroku para hacer pruebas (Podbase validator) todo perfecto menos el tiempo en generar el xml que es de 4 segundos aproximadamente y eso es muchísimo. , ¿cómo podría solucionarlo?, gracias

Eden Gomez Gress

student•

Buen dia companeros, cuando trato de ejecutar el comando " npm run start:dev" me sale este error

Error: Cannot find module '@babel/preset-presets-env' from '/Users/eden/Desktop/platzi/server-side-express/PlatziVideo2/PlatziVideo2'

Alguien sabe a que se debe?

Carlos Sampol

Team Platzi•

Es por que estas llamando al paquete mal.

Tienes: @babel/preset-presets-env Es: @babel/preset-env

Saludos!

Eden Gomez Gress

student•

En donde tengo que modificar el llamado de ese modulo?

Carlos Alfonso Garcia Rivera

student•

para usar bebel en el servidor usamos @babel/registrer

Maria Elizabeth Minero Alvarenga

student•

Genial!

Luis Carlos Kristen Ospitia

student•

buen día, alguien que me ayude, tengo el siguiente error.

ERROR in Entry module not found: Error: Can't resolve 'dev' in '/mnt/c/Users/luisk/OneDrive/Documents/PLATZI/SERVER_SIDE_RENDER_EXPRESS/PlatziVideo-feature-router-redux'

ERROR in multi (webpack)-dev-server/client?http://localhost:8080 dev
Module not found: Error: Can't resolve 'dev' in '/mnt/c/Users/luisk/OneDrive/Documents/PLATZI/SERVER_SIDE_RENDER_EXPRESS/PlatziVideo-feature-router-redux'    
 @ multi (webpack)-dev-server/client?http://localhost:8080 dev main[1]```

Rodrigo Esgueva Ordóñez

student•

Buenas Luis:

Asegúrate de poner en el package.json:

 "start:dev": "node src/server/index"

y en consola ejecutar:

npm run start:dev

Carlos Enrique Ramírez Flores

student•

Creación del servidor en Express

Agregamos 2 nuevos paths dentro de src.

fronted y server

en fronted vamos a mover todos los paths que estan detro de src, a exepción del nuevo path server

En en path server vamo a crear 2 archivos js server.js y index.js

instalamos el paquete babel register

@babel/register

npm i @babel/register

instalar express y dotenv

express

dotenv

npm i express dotenv

Fernando Cordero

student•

const express = require('express');
const app = express()

app.get('*', (req, res) => {
    res.send({ hello: 'Hello', world: 'World'})
})

const server = app.listen(3000, () => {
    console.log(`Server listen on port http://localhost:${server.address().port}`);
})
// Mi código

Ever Alfredo Sorto Ayala

student•

¿Qué hace esta estructura ?

require('@babel/register')({1.2k (gzipped: 532)
    presets: ['@babel/preset-env','@babel/preset-react'
        ]   
})

Nicolas Esteban Manograsso

student•

¿Lo que se creó en el Curso de Backend con Node.js no se aplica en este?

Cristofher Jumbo Jimenez

student•

Lo que hemos hecho ha sido, dividir dentro del src el frontend y el backend (client y server) Installar express y dotenv, pero hemos usado express para crear el servidor. Proximamente usaremos el dotenv y nodemon ... Continuara heheheh :green_heart:

ERROR in Entry module not found: Error: Can't resolve 'dev' in '/mnt/c/Users/luisk/OneDrive/Documents/PLATZI/SERVER_SIDE_RENDER_EXPRESS/PlatziVideo-feature-router-redux'

ERROR in multi (webpack)-dev-server/client?http://localhost:8080 dev
Module not found: Error: Can't resolve 'dev' in '/mnt/c/Users/luisk/OneDrive/Documents/PLATZI/SERVER_SIDE_RENDER_EXPRESS/PlatziVideo-feature-router-redux'    
 @ multi (webpack)-dev-server/client?http://localhost:8080 dev main[1]```

const express = require('express');
const app = express()

app.get('*', (req, res) => {
    res.send({ hello: 'Hello', world: 'World'})
})

const server = app.listen(3000, () => {
    console.log(`Server listen on port http://localhost:${server.address().port}`);
})
// Mi código

Creación del servidor en 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