Configuración de API Rest con TypeScript y JSON para Platzi Store

Clase 6 de 22 • Curso de Webpack con Express.js, React.js y TypeScript

Resumen

¿Cómo exponemos la data inicial con TypeScript?

La exposición de recursos desde un servidor es un paso crítico al desarrollar aplicaciones web con TypeScript. Aquí hablaremos sobre cómo configurar y exponer estos recursos como JSON para ser utilizados en nuestro proyecto.

¿Qué necesitamos para configurar la data inicial?

Primero, debes tener preparado el initial state que se utilizará en el proyecto. Este estado contiene datos esenciales como proyectos, recursos y elementos necesarios para trabajar en la aplicación. Puedes encontrar este archivo en el GIS provisto y simplemente copiar los elementos necesarios a tu proyecto.

¿Cómo integramos el estado inicial en el proyecto?

Después de haber copiado el initial state, es fundamental añadirlo a tu aplicación TypeScript. Aquí te mostramos cómo hacerlo:

Incluir el initial state: Cierra todos los elementos previos y ubica el archivo index.ts. Aquí, añade el initial state que has copiado previamente. Esto acelerará el desarrollo ya que no profundizaremos en la creación de CRUDs y conexiones a bases de datos.
Crear una ruta para la API: Utiliza app.get para configurar la ruta donde expondrás la información. El ejemplo que vamos a considerar sería API v1, que es donde se expondrá el JSON.

app.get('/API-v1', (req: Request, res: Response) => {
  res.json(initialState);
});

¿Cómo probamos la API localmente?

Una vez configurada, es vital asegurarnos de que el servidor está sirviendo nuestros datos correctamente. Esto se puede verificar de la siguiente manera:

Ejecutar el servidor: Utiliza npm run dev para iniciar el proyecto usando Webpack y asegurarte de que se sirva en el puerto 3000.
Revisar la salida en el navegador: Accede a la ruta configurada (/API-v1). Si todo está configurado correctamente, deberías ver la respuesta del servidor con los datos en formato JSON.

¿Cómo verificamos que los datos no son strings?

Para confirmar que los datos son, efectivamente, JSON y no strings, puedes usar las herramientas de desarrollador del navegador:

Abrir el inspector: Ve a Network y realiza una nueva petición.
Ver el Preview: Verás que la respuesta se resuelve en un código 200 y muestra el objeto JSON correctamente, permitiéndote interactuar con cada elemento.

Consejos adicionales

Si realizas cambios en tu código, al no usar herramientas como Nodemon o Watch, necesitarás reiniciar el servidor manualmente.

Estos pasos son esenciales para cualquier desarrollador que busca exponer datos en una aplicación de backend con TypeScript. Te animamos a seguir explorando y aprendiendo sobre temas más avanzados, como aprender a crear un CRUD y conectarse a bases de datos con el curso de Express disponible en Platzi. Cada paso que das te acerca más al dominio total del backend. ¡Sigue adelante!

Rulo Code

student•

¡Para tener una vista más amigable de los JSON en el navegador!

JSON Viewer for Chrome !

Lucas Ospina Aristizábal

student•

Apuntes

Ingresar al siguiente link

https://gist.github.com/gndx/b7ecca73a219712708d858b77dea1f86

Copiar el recurso del initial state y pegarlo en el index.ts
Vamos a exponer esta data y retornaremos la data en formato JSON:

app.get('/api/v1', (req: Request, res: Response) => {
    res.json(initialState)
})

Lanzamos el comando npm run dev y verificamos que este retornando la data en

 localhost:3000/api/v1

Jose Giovanni Vargas Rueda

student•

si quieren que el servidor se reinicialize cada vez que hay un cambio, to use el plugin de nodemon-webpack-plugin de esta forma mi webpackage.config.js quedo

...
const NodemonPlugin = require('nodemon-webpack-plugin');

...
module.exports = {
    name: 'express-serve',
    entry: './src/index.ts',
    target: 'node',
    mode: NODE_ENV,
    externals: [nodeExternals()],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
    ...
    plugins: [
        new NodemonPlugin({
            script: './dist/main.js',
            
        })
    ]
}

y el package.json

"start:dev": "webpack --watch --mode development",

Juan David González Rodríguez

student•

Cada peticion http https://localhost:3000/api/v1 es conocido como un endpoints Los endpoints son las URLs de un API o de un backend que responden a una petición. :D

app.get('/api/v1', (req: Request, res: Response) => {
    res.json(initialState);
});

Rulo Code

student•

También existe una extensión para VsCode llamada Thunder Client en la que podemos hacer peticiones sin salir del editor.

David Antonio Garcia Saaib

student•

Tengo una duda, si en lugar de apuntar a las rutas de la api apuntáramos a las rutas de plantillas de html, ¿estaríamos haciendo SSR con express y webpack?

Cristian Blandón

student•

No soy experto pero, en mi opinión, te diría que el Server Side Rendering es hacer toda la "lógica" de React por ejemplo (lo digo así para no complicarlo), en el servidor, para responderle al cliente con HTML listo para ser renderizado, y después hidratarlo con JavaScript... Diferente a cuando se hace Client Side Rendering, en el que el servidor envía un bundle de JavaScript y el Cliente es el que se encarga de todo.

Si en Express haces rutas que respondan con un template HTML, pues tu mismo estás creando el HTML y el servidor simplemente lo enviará... No hay ningún proceso de transformación o renderizado que tu servidor deba hacer, por lo que, en mi opinión, eso no sería Server Side Rendering.

Aún así, sí es posible hacer SSR con Webpack, Express y React por ejemplo... haciendo que el servidor haga justamente el proceso de transformación de JavaScript en HTML y que luego le inyecte la interactividad; para eso te recomiendo el Curso de Server Side Render con Express.