¿Cómo configurar un Dev Container de Deno en GitHub Codespaces?

Escrito por

18 de julio de 2024

0 minutos de lectura

Si has estado buscando guías y tutoriales para comenzar a desarrollar aplicaciones web con Deno en un IDE en la nube, como GitHub Codespaces, llegaste al lugar indicado.

En esta publicación exploraremos Deno, GitHub Codespaces y Dev Containers, y te brindaremos los conocimientos necesarios para configurar tu entorno de desarrollo en la nube de forma eficaz y eficiente. Está dirigida a desarrolladores, especialmente a quienes trabajan con el ecosistema de JavaScript y Node.js.

¿Qué es Deno? Una breve introducción

Deno es un entorno de ejecución seguro para JavaScript y TypeScript, creado con Rust y diseñado para abordar algunas de las limitaciones de Node.js. Lo creó Ryan Dahl, el creador original de Node.js, e incluye diferencias importantes, como compatibilidad con TypeScript desde el primer momento, un administrador de paquetes integrado y mayor seguridad mediante el uso de un entorno aislado.

1// Example of a simple Deno script
2import { serve } from "https://deno.land/std@0.76.0/http/server.ts";
3const s = serve({ port: 8000 });
4console.log("http://localhost:8000/");
5for await (const req of s) {
6  req.respond({ body: "Hello World\n" });
7}
8

El código anterior es un servidor HTTP sencillo escrito en Deno. Observa que importamos directamente la función serve desde una URL. Esta es una de las características únicas de Deno: usa URL para los módulos, lo que elimina la necesidad de un archivo package.json y del directorio node_modules .

¿Qué es GitHub Codespaces?

GitHub Codespaces es un entorno de desarrollo que te permite trabajar completamente en la nube. Te ofrece un entorno de desarrollo en la nube con todas las funciones, que se inicia en segundos directamente en GitHub. Así puedes contribuir a proyectos, revisar código o resolver conflictos de fusión directamente desde el navegador, sin tener que configurar nada en tu computadora.

¿Qué son los Dev Containers?

Los Dev Containers, o contenedores de desarrollo, forman parte de la extensión Remote - Containers de Visual Studio Code. Permiten definir un entorno de desarrollo como código mediante un archivo devcontainer.json y ejecutar el proyecto dentro de un contenedor Docker aislado. Así puedes tener un entorno de desarrollo consistente y reproducible que puedes compartir con tu equipo, y evitar el problema de «en mi máquina sí funciona» ;-)

// Example of a devcontainer.json file
{
  "name": "My Project",
  "dockerFile": "Dockerfile",
  "appPort": [3000],
  "extensions": ["dbaeumer.vscode-eslint"]
}

Este archivo devcontainer.json define un Dev Container para un proyecto sencillo de JavaScript. Especifica que se debe usar el Dockerfile del mismo directorio para crear el contenedor, que se debe reenviar el puerto 3000 y que se debe instalar la extensión ESLint en el contenedor.

Este es otro ejemplo de un archivo devcontainer.json que puedes incluir mediante un commit en el repositorio de tu proyecto.

{
    "name": "My Project",
    "dockerFile": "Dockerfile",
    "settings": {
        "terminal.integrated.shell.linux": "/bin/bash"
    },
    "extensions": ["dbaeumer.vscode-eslint"],
    "postCreateCommand": "yarn install"
}

En el ejemplo anterior, el archivo devcontainer.json indica a Visual Studio Code o GitHub Codespaces que cree un nuevo contenedor Docker con el Dockerfile del mismo directorio. Configura Bash como shell predeterminado de la terminal e instala la extensión eslint. El comando postCreateCommand se ejecuta después de crear el contenedor; en este caso, ejecuta yarn install para instalar las dependencias del proyecto.

Problemas que los Dev Containers resuelven para los desarrolladores

Estos son algunos de los beneficios de los Dev Containers:

Entornos de desarrollo consistentes: tradicionalmente, configurar un entorno de desarrollo requería instalar y configurar el software manualmente en la máquina del desarrollador. Esto puede provocar lo que suele llamarse el síndrome de «en mi máquina sí funciona»: el código funciona correctamente en la máquina de un desarrollador, pero falla en otra debido a las diferencias entre sus entornos de desarrollo. Los Dev Containers resuelven este problema al definir el entorno de desarrollo como código y garantizar que todos los desarrolladores que trabajan en el proyecto usen el mismo entorno.
Simplificación de la incorporación de desarrolladores: incorporar nuevos desarrolladores a un proyecto suele llevar tiempo, ya que hay que configurar su entorno de desarrollo y asegurarse de que tengan las versiones correctas de todo el software necesario. Los Dev Containers simplifican considerablemente este proceso. Los nuevos desarrolladores solo tienen que clonar el proyecto, abrirlo en Visual Studio Code o GitHub Codespaces y el entorno de desarrollo se configurará automáticamente según el archivo devcontainer.json.
CI/CD optimizado: además de ayudar a los desarrolladores, los Dev Containers también pueden optimizar el proceso de integración continua y entrega continua (CI/CD). Como el entorno de desarrollo se define como código, puede servir de base para el entorno de CI/CD. Así se garantiza que el código se pruebe y se implemente en un entorno idéntico a aquel en el que se desarrolló.

En conclusión, los Dev Containers son una herramienta eficaz para garantizar entornos de desarrollo consistentes y reproducibles. Al avanzar con la configuración de Deno en GitHub Codespaces, será clave comprender la función y los beneficios de los Dev Containers.

Configurar Deno en GitHub Codespaces

Implementar Deno en GitHub Codespaces ofrece una forma flexible y eficiente de escribir, ejecutar y depurar tus aplicaciones de Deno directamente en el navegador.

Requisitos previos para configurar Deno

Antes de comenzar, asegúrate de tener lo siguiente:

Una cuenta de GitHub.
Acceso a GitHub Codespaces. Consulta la documentación de GitHub Codespaces para obtener más información sobre cómo acceder.
Conocimientos básicos de Deno y su entorno. Si estás comenzando con Deno, consulta la documentación oficial de Deno.
Un repositorio de código de Deno alojado en GitHub

Inicia el GitHub Codespace

Si tu repositorio de código actual no tiene una configuración de Dev Container (puedes comprobarlo si no hay un directorio .devcontainer/ en la raíz), de todos modos puedes iniciar un GitHub Codespace, que creará un entorno de desarrollo predeterminado en la nube.

En la interfaz web de GitHub, busca el botón Code en la página principal del repositorio, ve a la pestaña anidada Codespaces y selecciona la opción para crear un codespace.

Crear un devcontainer.json para el desarrollo con Deno

Para configurar un entorno de desarrollo para Deno, debes crear un archivo devcontainer.json en el directorio .devcontainer de tu repositorio.

Lamentablemente, el proyecto Deno no ofrece soporte oficial para Dev Containers, que habría permitido una configuración lista para usar con VS Code y GitHub Codespaces. En marzo de 2023, los desarrolladores plantearon esta inquietud sobre un Dev Container para Deno, así que quizás lo tengamos en algún momento.

Pero no pierdas las esperanzas: gracias a una comunidad de desarrolladores, no tienes que escribir desde cero el archivo de definición del Dev Container. Puedes encontrar una lista de funciones mantenida por la comunidad para agregar.

Sigue estos pasos para agregar el Dev Container de Deno mantenido por la comunidad:

En el GitHub Codespace, presiona CMD+SHIFT+P para abrir la paleta de comandos de VS Code.
Selecciona Codespaces: Add a Dev Container Configuration Files… y, si se te solicita, elige Create a new configuration.
En unos segundos, aparecerá una lista de configuraciones de Dev Container preconfiguradas.
Selecciona “Show all definitions”, luego “Node.js & TypeScript” y, después, “bulleyes” como imagen base de Docker.
Por último, escribe “Deno”, selecciona la opción “Deno (via GitHub Releases)” y elige “Keep defaults”.

Crea un contenedor de desarrollo de Deno en GitHub Codespaces

Una vez que confirmes esta selección, el IDE de VS Code abrirá un archivo recién creado en el repositorio, en .devcontainer/devcontainer.json, con el siguiente contenido:

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
{
	"name": "Node.js & TypeScript",
	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",
	"features": {
		"ghcr.io/devcontainers-contrib/features/deno:1": {}
	}

	// Features to add to the dev container. More info: https://containers.dev/features.
	// "features": {},

	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// "forwardPorts": [],

	// Use 'postCreateCommand' to run commands after the container is created.
	// "postCreateCommand": "yarn install",

	// Configure tool-specific properties.
	// "customizations": {},

	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
	// "remoteUser": "root"
}

Confirma el archivo en el repositorio y reiniciemos el GitHub Codespace para iniciar el nuevo entorno de desarrollo con Deno Dev Container:

Vuelve a abrir la paleta de comandos de VS Code con CMD+SHIFT+P.
Selecciona Codespaces: Full Rebuild Container.

Confirma la selección y verás que la página se vuelve a cargar con el nuevo entorno configurado:

Pantalla de configuración de Codespace que muestra una imagen encontrada, una compilación fallida del contenedor y un intento de recuperación.

Probar Deno Dev Container

Cuando esté listo el nuevo entorno de desarrollo con Deno Dev Container, puedes abrir el panel Terminal y confirmar que tienes las versiones de Node.js y Deno correctamente configuradas para empezar a programar:

Entorno de desarrollo Deno Dev Container en GitHub Codespaces

Extensiones de VS Code recomendadas para Deno y TypeScript

Si usas VS Code, seguramente ya conoces las numerosas extensiones y sus beneficios para agilizar el desarrollo de software. Estas extensiones agregan funciones, mejoran el flujo de trabajo de desarrollo y pueden hacer que programar sea una experiencia más agradable y productiva.

Recuerda que las extensiones de VS Code son complementos diseñados para ampliar las funciones principales del editor. En su mayoría, las desarrolla y mantiene la comunidad, por lo que es importante auditarlas y revisarlas para evitar introducir malware y problemas de seguridad. Menciono esto específicamente por una investigación de seguridad que Snyk realizó en 2021 y que detectó numerosas vulnerabilidades en extensiones de VS Code. Te recomiendo actuar con responsabilidad al instalar extensiones de IDE.

Linting de código para el desarrollo con Deno

El ecosistema de Deno es relativamente nuevo, pero ha madurado rápidamente y ahora cuenta con una creciente colección de extensiones de VS Code adaptadas a sus capacidades únicas. Estas son algunas extensiones recomendadas para desarrollar con Deno:

Deno (denoland.vscode-deno): es la extensión oficial de VS Code para Deno. Ofrece funciones de IntelliSense, linting, formato y depuración para proyectos de Deno. La extensión detecta automáticamente la configuración del proyecto a partir del archivo deno.json o deno.jsonc en la raíz del espacio de trabajo.
```
   {
       "compilerOptions": {
           "lib": ["deno.ns", "deno.unstable"]
       }
   }
```
Para agregar la extensión de VS Code denoland.vscode-deno a un Dev Container, lo más recomendable es agregar un campo extensions al archivo devcontainer.json. Luego, agrega denoland.vscode-deno al arreglo extensions de ese archivo.

Así puedes configurarlo:
```
{
  "name": "Node.js & TypeScript",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",
  "extensions": [
    "denoland.vscode-deno"
  ]
}
```
Con esta configuración, VS Code instalará automáticamente la extensión denoland.vscode-deno en el Dev Container cada vez que abras el proyecto en un contenedor.
Deno Standard Library Snippets (justjavac.vscode-deno): esta extensión ofrece fragmentos de código útiles para la biblioteca estándar de Deno, lo que facilita el uso de los módulos oficiales de Deno en tu proyecto.

Seguridad del código Deno con Snyk

Con la creciente complejidad de las aplicaciones de software y el uso habitual de bibliotecas npm de código abierto en el desarrollo con Node.js y Deno, la seguridad del código nunca había sido tan importante. Una sola vulnerabilidad en tu código puede tener consecuencias devastadoras, como filtraciones de datos, pérdidas financieras y daños a la reputación de la marca.

Proteger el código no consiste solo en prevenir ataques; también se trata de generar confianza con tus usuarios. Necesitan saber que sus datos están seguros y que el software que usan se creó teniendo en cuenta su seguridad.

En el mundo de JavaScript, ya sea Node.js, Deno o incluso Bun, los desarrolladores usan numerosas bibliotecas y paquetes para acelerar el desarrollo y hacer que sus aplicaciones sean más eficientes. Sin embargo, cada dependencia de terceros que se agrega desde el registro npm introduce un posible riesgo. Ahí es donde entra Snyk.

Snyk es una herramienta de seguridad diseñada para desarrolladores que les ayuda a encontrar y corregir vulnerabilidades en sus dependencias de código abierto y también en su código.

¿Quieres encontrar vulnerabilidades de seguridad en tu código de Deno y sus dependencias anidadas? Instala y habilita la extensión de VS Code de Snyk en el Deno Dev Container:

{
  "name": "...",
  "image": "...",
  "extensions": [
    "snyk-security.snyk-vulnerability-scanner"
  ]
}

Luego, tendrás linting de seguridad integrado y en tiempo real en tu código. Snyk puede identificar rutas de código vulnerables, como la siguiente inyección SQL en código de Node.js:

Si quieres aprender más sobre programación segura y las inyecciones SQL, te recomiendo visitar este breve tutorial interactivo de Snyk Learn sobre seguridad del código para desarrolladores de JavaScript.

Extensiones para el desarrollo con Deno y TypeScript

TypeScript es un superconjunto de JavaScript con tipado estático que agrega tipos opcionales, clases y módulos al lenguaje. Se usa ampliamente en el desarrollo web moderno y hay numerosas extensiones de VS Code que facilitan y mejoran el desarrollo con TypeScript:

TypeScript Hero (rbbit.typescript-hero): TypeScript Hero ofrece funciones avanzadas para TypeScript, como importaciones automáticas, generación de código y refactorización.
TSLint (ms-vscode.vscode-typescript-tslint-plugin): TSLint es un linter para TypeScript. Aplica reglas de estilo de código y ayuda a detectar errores comunes en las primeras etapas del proceso de desarrollo.
Prettier - Code formatter (esbenp.prettier-vscode): Prettier es un formateador de código con opiniones definidas. Puedes usarlo con TypeScript para dar formato automático al código y mantener un estilo uniforme.

Para habilitar Prettier en TypeScript, agrega la siguiente configuración a tu archivo .prettierrc:

   {
       "semi": true,
       "trailingComma": "all",
       "singleQuote": true,
       "printWidth": 80,
       "tabWidth": 2
   }

Recuerda que las extensiones que elijas deben adaptarse a los requisitos de tu proyecto y a tu estilo de programación. Estas extensiones recomendadas son solo un punto de partida para explorar todo lo que puedes hacer con VS Code, Deno, Snyk y TypeScript.