Routing con Express.js

4/25
Recursos

Aportes 45

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

¿Quieres compartir tu servidor con tu familia pero no lo pueden ver en sus celulares? 😕 😕

Traté de compartir esto como comentario pero era un poco largo xd, aquí dejo un mini turorial en platzi para que despliegues tu servidor en tu red LAN y puedas compartir tus hello worlds con tu familia 😄 😄 😄

Express ocupa el metodo get, para recibir las rutas en el servidor

Se puede responder con un mensaje

res.send('Contenido de respuesta');

O una respuestas en formato JSON

res.json({
    name: 'Producto 1',
    price: 1000
  });

Se recomienda instalar el plugin
JSON Viewer

req y res

req es un objeto que contiene información sobre la solicitud HTTP que provocó el evento. En respuesta areq, usa respara devolver la respuesta HTTP deseada.

Checa la documentación de Express.js relacionada con Routing y así entender qué es. cómo funciona y cómo puedes usarlo para desarrollar tus apps

Amando este curso!! 😃

Yo uso Opera y funcion la misma extension que para Google Chrome

en firefox no es necesario instalar ningun tipo de plugin, se abre automaticamente, adjunto foto:

aunque si les molesta ver ese formato pueden bajarse esta extension: https://addons.mozilla.org/es/firefox/addon/jsonview/ para que se vea de la siguiente manera:

Les comparto esta explicación sobre express que me parecion interesante:

const express = require('express');

var app = express();

app.get('/', (req, res) => {
    res.send('Hello Express')
});

app.listen(process.env.PORT || 3000)

Linea 1: Importas express con require

Linea 2: Inicializamos el app express en la variable app

Linea 3: .get decidira que cuando obtiene esa ruta en especifico ´´./´´ debe dar la respuesta que se especifica en la funcion. Esta toa dos argumentos 1: la URL y 2: a función que le dice a express qué enviar a la persona que hace la solicitud ´´hello express´´.

Linea 4: .listen vinculará la aplicación al puerto de nuestra máquina.

Para los que gustamos un poquito mas del estilo Dark, acá un pequeño aporte sobre JSON Viewer:

  1. Vamos a la configuración de la extension:
  2. En el select Theme tenemos una sección de estilos Dark a escoger:
  3. Por último, a disfrutar de su nuevo dark theme… 🤗🤗🤗

el routing se se refiere a determinar cómo una aplicación responde a una solicitud de cliente a un punto final en particular) y un método de solicitud HTTP específico.

  • La definición de la ruta adopta la siguiente estructura:
app.METHOD(PATH, HANDLER)
  • app es una instancia de express.

  • METHOD es un método de solicitud HTTP, en minúsculas.

  • PATH es una ruta en el servidor.

  • HANDLER es la función ejecutada cuando la ruta coincide.

Así me gustan los videos, al grano sobre el tema y cortos.

Solicitudes REST con Curl

Conocido como “Cliente URL” es una utilería para hacer solicitudes y tranferir información.

.
Ejemplo, tenemos que:

curl localhost:3000

Salida

Hola a mi server de express

Excelente extension! No la conocia, mil gracias!

Se ve genial con esta extensión!!

Link para instalar JSON Viewer

Para quienes usan opera, les recomiendo esta extensión

https://addons.opera.com/es-419/extensions/details/json-lite/

Yo uso firefox developer edition y me formatea el json en automatico.

Con Brave también funciona la extensión:

Así está el index.js, puerto era el 9123 y funciona sin problema, por estandarizarme en el curso lo cambie a 3456, funciona también

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

app.get('/', (req, res)=>{
  res.send("Mi tienda en express");
});

app.get('/otraRuta', (req, res)=>{
  res.send("Mi otra tienda en express");
});

app.get('/:id', (req, res)=>{
  res.send(`Mi tienda en express (ruta es = a endpoint) número ${req.params.id}`);
});

app.get('/json/:id', (req, res)=>{
  res.json({
    id:req.params.id,
    producto: req.params,
    precio:1
  });
});


app.listen(port, ()=>{
  console.log(`Mi tienda en el puerto ${port}`);
});

Pueden usar firefox dev edition para mi es el mejor y no hay que descargar extensiones para visualizar JSON, directamente te los muestra como cuando inspeccionas código y tiene un filtro para JSON

Buenas noches. dejo incluido el mismo ejercicio pero con typescript. https://github.com/bdavidegonzalez/my-store

Una alternativa es https://jsonviewer.stack.hu/

res.json() tambien puede recibir objetos como parametros

app.get('/products', (req, res) =>{
    const data = [
        {
            "id":"1",
            "name":"Guitar",
            "price":"2500"
        },
        {
            "id":"2",
            "name":"Microphone",
            "price":"500"
        }
    ]
    res.json(data)
})

Esto sirve si por ejemplo queremos leer un archivo json que tengamos y que llamemos con require

Una alternativa a la extencion de chrome para visualizar el formato json de una mejor manera es agregar la siguiente linea a su codigo

// config
 app.set('json spaces', 2)

Ahora entiendo lo de las rutas!!

Te amo Firefox, no tuve que descargar nada porque me entiendes.

Se recomienda tener las rutas en un archivo aparte esto para poder tener dividido el código en piezas pequeñas y ser mas fácil su manejo a futuro

En platzi no tienen un curso donde expliquen exactamente que es un JSON. Para quienes tengan está duda le recomiendo este curso de YouTube, está muy sencillo https://youtu.be/lLsYjzpSDyA

Así quedaron:

Este curso esta muy bueno 😃 estoy aprendiendo mucho

Aspectos básicos del routing en Express.js

La definición de ruta tiene la siguiente estructura:
app.METHOD(PATH, HANDLER)
Donde:

  • app es una instancia de express.
  • METHOD es un método HTTP, en minúsculas.
  • PATH es una ruta en el servidor.
  • HANDLER es la función que se ejecuta cuando la ruta coincide.

Go!!!

Muy buena esa extension, ayuda a ver mejor la informacion

En Firefox no hace falta instalar una extension para ver los JSON, tiene un visor integrado bastante bueno.

Perfeca clase, yo intente manda mi response en formmato JSON mandando una llista de objetos, pero no mostraba nada 😦 asi que lo pase a formato send:

JSON (JavaScript Object Notation)

Es el formato de texto sencillo con el que se comunican el cliente y el servidor mediante el protocolo HTTP y el estándar de construcción de APIS: REST no SOAP.

🤗 Espero le sirva el aporte 🤗

// practicando una nueva ruta
app.get('/categories', (req, res) => {
  res.json({
    name: 'On sale',
    type: 'clothes'
  });
});

Aca dejo mi aporte

Yo uso desde hace tiempo la extensión JSON Viewer, es una total maravilla cuando estas trabajando desde el front y quieres ver si la ruta que utilizaste funciona bien y que datos vienen

Agregue la ruta user

Me encanta como vamos en este curso, el profesor explica todo a detalle y se entiende muy bien.