Creación del servidor en Express

Resumen de la Clase

1. 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.

2. Movemos todos los archivos de nuestra app en react ubicada actualmente en la carpeta src, hacia src/frontend.

3. Creamos en la carpeta src/server 2 archivos, index.js y server.js.

4. Instalamos la siguiente dependencia: npm install @babel/register

5. En el archivo src/server/index.js, agregamos la siguiente configuración:
   require(’@babel/register’)({
   presets: [’@babel/preset-env’, ‘@babel/preset-react’],
   })
   require(’./server’)

6. Instalamos más dependencias: npm install express dotenv.

7. Express sirve para poder instalar nuestro servidor local y dotenv se utiliza para manejar nuestras variables de entorno.

8. Agregamos todo el código necesario para correr el servidor de express en el archivo src/server/server.js.

9. Creamos un nuevo script en el archivo package.json, para poder ejecutar nuestro servidor:
   “scripts”: { “start:dev” : “node src/server/index” }

10. Ejecutamos nuestro servidor desde la consola con:
    npm run start:dev.

11. 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.

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"
  

npm i @babel/register -D 

o

npm install @babel/register --save-dev

las 2 formas son lo mismo

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?

otra manera de escribirlo…

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

Index.js

server.js

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?

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]```

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

¿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 💚