Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

2D
10H
49M
16S

Creaci贸n del servidor en Express

5/22
Recursos

Aportes 15

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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:
    鈥渟cripts鈥: { 鈥渟tart:dev鈥 : 鈥渘ode 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 馃挌