Cómo crear una aplicación “Hola mundo” con Koa

Introducción

Koa es un nuevo framework web creado por el equipo detrás de Express . Su objetivo es ser una versión moderna y más minimalista de Express.

Algunas de sus características son su compatibilidad y dependencia de nuevas funciones de JavaScript, como generadores y async/await . Koa tampoco incluye ningún middleware, aunque se puede ampliar utilizando complementos personalizados y existentes.

En este artículo, aprenderá más sobre el marco Koa y creará una aplicación para familiarizarse con su funcionalidad y filosofía.

Prerrequisitos

Si deseas seguir este artículo, necesitarás:

• Node.js instalado localmente, lo cual puedes hacer siguiendo Cómo instalar Node.js y crear un entorno de desarrollo local .
• También es necesario tener conocimientos prácticos de JavaScript y la sintaxis ES6.

Nota: Este tutorial se ha revisado de Koa 1.0 a Koa 2.0. Consulta la documentación de migración para actualizar tus implementaciones de la versión 1.0.

Este tutorial fue verificado con Node v15.14.0, npmv7.10.0, koav2.13.1, @koa/routerv10.0.0 y koa-ejsv4.3.0.

Paso 1: Configuración del proyecto

Para comenzar, crea un nuevo directorio para tu proyecto. Puedes hacerlo copiando y ejecutando el siguiente comando en tu terminal:

mkdir koa-example

Nota: Puedes darle a tu proyecto cualquier nombre, pero en este artículo lo usaremos koa-examplecomo nombre y directorio del proyecto.

En este punto, ya ha creado el directorio del proyecto koa-example. Navegue hasta el directorio del proyecto recién creado.

cd koa-example

Luego, inicialice su proyecto Node desde dentro del directorio.

npm init -y

Después de ejecutar el npm initcomando, tendrá un package.jsonarchivo con la configuración predeterminada.

A continuación, ejecute este comando para instalar Koa:

npm install koa@2.13.1

Su aplicación ahora está lista para usar Koa.

Paso 2: Creación de un servidor Koa

Primero, crea el index.jsarchivo. Luego, usando el editor de código que prefieras, abre el index.jsarchivo y agrega las siguientes líneas de código:

índice.js

'use strict';const Koa = require('koa');const app = new Koa();app.use(ctx = {  ctx.body = 'Hello World';});app.listen(1234);

En el código anterior, creaste una aplicación Koa que se ejecuta en el puerto 1234. Puedes ejecutar la aplicación con el comando:

node index.js

Y visita la aplicación en http://localhost:1234.

Paso 3: agregar enrutamiento y representación de vistas

Como se mencionó anteriormente, Koa.js no viene con ningún middleware incluido y, a diferencia de su predecesor, Express, no maneja el enrutamiento de forma predeterminada.

Para implementar rutas en su aplicación Koa, deberá instalar una biblioteca de middleware para enrutamiento en Koa, Koa Router .

Abra su ventana de terminal y ejecute el siguiente comando:

npm install @koa/router@10.0.0

Nota: Anteriormente koa-routerera el paquete recomendado, pero @koa/routerahora es el paquete oficialmente soportado.

Para utilizar el enrutador en su aplicación, modifique su index.jsarchivo:

índice.js

'use strict';const Koa = require('koa');const Router = require('@koa/router');const app = new Koa();const router = new Router();router.get('koa-example', '/', (ctx) = {  ctx.body = 'Hello World';});app  .use(router.routes())  .use(router.allowedMethods());app.listen(1234);

Este código define una ruta en la URL base de su aplicación ( http://localhost:1234) y registra esta ruta en su aplicación Koa.

Para obtener más información sobre la definición de ruta en aplicaciones Koa.js, visita la documentación de la biblioteca Koa Router .

Como se estableció anteriormente, Koa se presenta como un marco minimalista, por lo tanto, para implementar la representación de vistas con un motor de plantillas, deberá instalar una biblioteca de middleware. Hay varias bibliotecas para elegir, pero en este artículo, utilizará Koa ejs .

Abra su ventana de terminal y ejecute el siguiente comando:

npm install koa-ejs@4.3.0

A continuación, modifique su index.jsarchivo para registrar su plantilla con el fragmento siguiente:

índice.js

'use strict';const Koa = require('koa');const Router = require('@koa/router');const render = require('koa-ejs');const path = require('path');const app = new Koa();const router = new Router();render(app, {  root: path.join(__dirname, 'views'),  layout: 'index',  viewExt: 'html',  cache: false,  debug: true});router.get('koa-example', '/', (ctx) = {  ctx.body = 'Hello World';});app  .use(router.routes())  .use(router.allowedMethods());app.listen(1234);

Al registrar su plantilla, definió el directorio raíz de sus archivos de vista, la extensión de los archivos de vista y el archivo de vista base (que extienden otras vistas).

Ahora que ha registrado su middleware de plantilla, modifique su definición de ruta para generar un archivo de plantilla:

índice.js

// ...router.get('koa-example', '/', (ctx) = {  let koalaFacts = [];  koalaFacts.push({    meta_name: 'Color',    meta_value: 'Black and white'  });  koalaFacts.push({    meta_name: 'Native Country',    meta_value: 'Australia'  });  koalaFacts.push({    meta_name: 'Animal Classification',    meta_value: 'Mammal'  });  koalaFacts.push({    meta_name: 'Life Span',    meta_value: '13 - 18 years'  });  koalaFacts.push({    meta_name: 'Are they bears?',    meta_value: 'No'  });  return ctx.render('index', {    attributes: koalaFacts  });})// ...

Su ruta base representa el index.htmlarchivo que se encuentra en el viewsdirectorio.

Ahora, crea este directorio y archivo. Ábrelo index.htmly agrega las siguientes líneas de código:

vistas/index.html

h2Koala - a directory Koala of attributes/h2ul  % attributes.forEach( function(attribute) { %    li      %= attribute.meta_name % - %= attribute.meta_value %    /li  % }) %/ul

Ahora, al ejecutar la aplicación y observarla en un navegador web, se mostrará lo siguiente:

OutputKoala - a directory Koala of attributesColor - Black and whiteNative Country - AustraliaAnimal Classification - MammalLife Span - 13 - 18 yearsAre they bears? - No

Para obtener más opciones sobre el uso del koa-ejsmiddleware de plantilla, visita la documentación de la biblioteca .

Paso 4: Manejo de errores y respuestas

Koa maneja los errores definiendo un middleware de error al principio del archivo de punto de entrada. El middleware de error debe definirse al principio porque solo se detectarán los errores del middleware definido después del middleware de error.

Usando su index.jsarchivo como ejemplo, haga los siguientes cambios en el código:

índice.js

'use strict';const Koa = require('koa');const Router = require('@koa/router');const render = require('koa-ejs');const path = require('path');const app = new Koa();const router = new Router();app.use(async (ctx, next) = {  try {    await next()  } catch(err) {    console.log(err.status)    ctx.status = err.status || 500;    ctx.body = err.message;  }});// ...

Este bloque de código detectará cualquier error que se produzca durante la ejecución de su aplicación.

Puedes probar esto arrojando un error en el cuerpo de la función de la ruta que definiste:

índice.js

// ...router.get('error', '/error', (ctx) = {  ctx.throw(500, 'internal server error');});app  .use(router.routes())  .use(router.allowedMethods());app.listen(1234);

Ahora, al ejecutar la aplicación y observarla /erroren un navegador web se mostrará lo siguiente:

Outputinternal server error

El objeto de respuesta de Koa suele estar integrado en su objeto de contexto. Mediante la definición de ruta, mostremos un ejemplo de configuración de respuestas:

índice.js

// ...router.get('status', '/status', (ctx) = {  ctx.status = 200;  ctx.body   = 'ok';})app  .use(router.routes())  .use(router.allowedMethods());app.listen(1234);

Ahora, al ejecutar la aplicación y observarla /statusen un navegador web se mostrará lo siguiente:

Outputok

Su aplicación ahora maneja errores y respuestas.

Conclusión

En este artículo, se presentó brevemente Koa y se explicó cómo implementar algunas funcionalidades comunes en un proyecto Koa. Koa es un marco minimalista y flexible que se puede ampliar con más funcionalidades de las que se muestran en este artículo. Debido a su similitud futurista con Express, algunos incluso lo han descrito como Express 5.0 en espíritu.