Creación del servidor en Express
Clase 5 de 22 • Curso de Server Side Render con Express
Contenido del curso
Nelson Cadenas
student•
hace 6 años
Javier Armando Vargas Vega
student•
hace 6 años
Irungaray Agustin
student•
hace 6 años
Clase 5 de 22 • Curso de Server Side Render con Express
Contenido del curso
Nelson Cadenas
Javier Armando Vargas Vega
Irungaray Agustin
Sergio Perez
Daniel Hernández
Camilo José Mezú Mina
Erik Elyager
Nicolas Esteban Manograsso
HUGO ANDRES DIAZ BERNAL
Alejandro Daniel Oroncoy Almeyda
Daniel Hernández
Enrique Moreno
Jose Daniel Molina
Camilo José Mezú Mina
José Agüero
Eden Gomez Gress
Carlos Sampol
Eden Gomez Gress
Carlos Alfonso Garcia Rivera
Maria Elizabeth Minero Alvarenga
Luis Carlos Kristen Ospitia
Rodrigo Esgueva Ordóñez
Carlos Enrique Ramírez Flores
Fernando Cordero
Ever Alfredo Sorto Ayala
Nicolas Esteban Manograsso
Cristofher Jumbo Jimenez
++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.
Muy buen resumen. Muchas gracias por el aporte.
Gracias por tus aportes, los guardo porque seguro van a ser de utilidad!
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
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"
npm i @babel/register -D
o
npm install @babel/register --save-dev
las 2 formas son lo mismo
¿Babel Register debería ser dependencia de desarrollo?
Así es, solo de desarrollo.
Paquetes de esta clase npm install @babel/register express dotenv
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?
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!
otra manera de escribirlo...
app.listen(3000, (error) => { error ? console.log(error) : console.log('Server running on 3000 port'); });
y otra más simple seria:
app.listen(3000, (error) => console.error(error || 'Server on port 3000'));
Index.js
¿No deberían instalarse los paquetes del servidor aparte? osea en la carpeta del server y no en la general del proyecto
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
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?
Es por que estas llamando al paquete mal.
Tienes: @babel/preset-presets-env Es: @babel/preset-env
Saludos!
En donde tengo que modificar el llamado de ese modulo?
para usar bebel en el servidor usamos @babel/registrer
Genial!
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]```
Buenas Luis:
Asegúrate de poner en el package.json:
"start:dev": "node src/server/index"
y en consola ejecutar:
npm run start:dev
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
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
¿Qué hace esta estructura ?
require('@babel/register')({1.2k (gzipped: 532) presets: ['@babel/preset-env','@babel/preset-react' ] })
¿Lo que se creó en el Curso de Backend con Node.js no se aplica en este?
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: