Como configurar o Dev Container do Deno no GitHub Codespaces?

Escrito por

18 de julho de 2024

0 minutos de leitura

Se você está procurando guias e tutoriais para começar a desenvolver aplicações web com Deno em uma IDE na nuvem, como o GitHub Codespaces, chegou ao lugar certo.

Neste post, vamos explorar o universo do Deno, do GitHub Codespaces e dos Dev Containers, compartilhando o conhecimento necessário para configurar seu ambiente de desenvolvimento na nuvem de forma eficiente. O conteúdo é voltado para desenvolvedores, especialmente aqueles que trabalham com o ecossistema JavaScript e Node.js.

O que é Deno? Uma breve introdução

Deno é um runtime seguro para JavaScript e TypeScript, desenvolvido com Rust para solucionar algumas das limitações do Node.js. Criado por Ryan Dahl, o criador original do Node.js, ele traz diferenças importantes, como suporte integrado a TypeScript, um gerenciador de pacotes próprio e mais segurança por meio de sandboxing.

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

O código acima é um servidor HTTP simples escrito em Deno. Observe que importamos diretamente a função serve de uma URL. Esse é um dos recursos exclusivos do Deno: ele usa URLs para os módulos, dispensando o arquivo package.json e o diretório node_modules .

O que é o GitHub Codespaces?

O GitHub Codespaces é um ambiente de desenvolvimento que permite programar inteiramente na nuvem. Ele oferece um ambiente de desenvolvimento completo, hospedado na nuvem e pronto em segundos, diretamente no GitHub. Assim, você pode contribuir com projetos, revisar código ou resolver conflitos de merge no navegador, sem precisar configurar nada na sua máquina.

O que são Dev Containers?

Dev Containers, ou contêineres de desenvolvimento, fazem parte da extensão Remote - Containers do Visual Studio Code. Eles permitem definir um ambiente de desenvolvimento como código usando um arquivo devcontainer.json e executar o projeto dentro de um contêiner Docker isolado. Assim, sua equipe pode compartilhar um ambiente consistente e reproduzível, acabando com o problema do "funciona na minha máquina" ;-)

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

Este arquivo devcontainer.json define um Dev Container para um projeto JavaScript simples. Ele especifica que o Dockerfile no mesmo diretório deve ser usado para criar o contêiner, que a porta 3000 deve ser encaminhada e que a extensão ESLint deve ser instalada no contêiner.

Veja outro exemplo de um arquivo devcontainer.json, que pode ser enviado para o repositório do seu projeto.

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

No exemplo acima, o arquivo devcontainer.json instrui o Visual Studio Code ou o GitHub Codespaces a criar um novo contêiner Docker usando o Dockerfile no mesmo diretório. Ele configura o Bash como shell padrão do terminal e instala a extensão eslint. O comando postCreateCommand é executado depois que o contêiner é criado e, nesse caso, roda yarn install para instalar as dependências do projeto.

Problemas que os Dev Containers resolvem para desenvolvedores

Veja alguns dos benefícios dos Dev Containers:

Ambientes de desenvolvimento consistentes — Tradicionalmente, configurar um ambiente de desenvolvimento exigia instalar e configurar softwares manualmente na máquina do desenvolvedor. Isso pode levar ao que costuma ser chamado de problema do "funciona na minha máquina": o código roda sem problemas na máquina de uma pessoa, mas falha na de outra devido às diferenças entre os ambientes de desenvolvimento. Os Dev Containers resolvem esse problema definindo o ambiente como código e garantindo que todas as pessoas que trabalham no projeto usem o mesmo ambiente.
Integração simplificada de novos desenvolvedores — Integrar novas pessoas a um projeto pode levar bastante tempo, pois envolve configurar o ambiente de desenvolvimento e garantir que todas as versões corretas dos softwares necessários estejam instaladas. Com os Dev Containers, esse processo fica muito mais simples. Basta clonar o projeto e abri-lo no Visual Studio Code ou no GitHub Codespaces para que o ambiente de desenvolvimento seja configurado automaticamente com base no arquivo devcontainer.json.
CI/CD mais ágil — Além de ajudar desenvolvedores, os Dev Containers também podem simplificar o processo de integração e entrega contínuas (CI/CD). Como o ambiente de desenvolvimento é definido como código, ele pode servir de base para o ambiente de CI/CD. Assim, o código é testado e implantado em um ambiente idêntico àquele em que foi desenvolvido.

Em resumo, os Dev Containers são uma ferramenta poderosa para garantir ambientes de desenvolvimento consistentes e reproduzíveis. Ao configurar o Deno no GitHub Codespaces, será essencial entender o papel e os benefícios dos Dev Containers.

Como configurar o Deno no GitHub Codespaces

Executar o Deno no GitHub Codespaces é uma maneira flexível e eficiente de escrever, executar e depurar suas aplicações Deno diretamente no navegador.

Pré-requisitos para configurar o Deno

Antes de começar, verifique se você tem:

Uma conta no GitHub.
Acesso ao GitHub Codespaces. Consulte a documentação do GitHub Codespaces para saber como obter acesso.
Conhecimentos básicos sobre Deno e seu ambiente. Se você está começando agora, confira a documentação oficial do Deno.
Um repositório de código Deno hospedado no GitHub

Inicie o GitHub Codespace

Se o repositório de código atual não tiver uma configuração de Dev Container (ou seja, não houver um diretório .devcontainer/ na raiz), ainda será possível iniciar um GitHub Codespace. Ele criará um ambiente de desenvolvimento padrão na nuvem para você.

Na interface web do GitHub, localize o botão Code na página principal do repositório, acesse a guia aninhada Codespaces e escolha a opção para criar um codespace.

Criando um devcontainer.json para desenvolver com Deno

Para configurar um ambiente de desenvolvimento para Deno, crie um arquivo devcontainer.json no diretório .devcontainer do seu repositório.

Infelizmente, o projeto Deno não oferece suporte oficial a Dev Containers, que permitiriam uma configuração pronta para uso no VS Code e no GitHub Codespaces. Em março de 2023, desenvolvedores manifestaram essa preocupação sobre um Dev Container para Deno. Talvez esse suporte chegue algum dia.

Mas não perca as esperanças. Graças à comunidade de desenvolvedores, você não precisa criar do zero a definição do Dev Container: pode encontrar uma lista de recursos mantida pela comunidade para adicionar.

Siga estas etapas para adicionar o Dev Container para Deno mantido pela comunidade:

No GitHub Codespace, pressione CMD+SHIFT+P para abrir a paleta de comandos do VS Code.
Selecione Codespaces: Add a Dev Container Configuration Files… e, se solicitado, escolha Create a new configuration.
Em alguns segundos, será exibida uma lista de configurações de Dev Container predefinidas.
Escolha “Show all definitions”, depois “Node.js & TypeScript” e, em seguida, “bulleyes” como imagem base do Docker.
Por fim, digite “Deno”, escolha a opção “Deno (via GitHub Releases)” e selecione “Keep defaults”.

Crie um contêiner de desenvolvimento Deno no GitHub Codespaces

Depois de confirmar a seleção, a IDE do VS Code abrirá no repositório um arquivo recém-criado em .devcontainer/devcontainer.json, com o seguinte conteúdo:

// 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"
}

Envie o arquivo para o repositório e reinicie o GitHub Codespace para iniciar o novo ambiente de desenvolvimento com o Dev Container do Deno:

Abra novamente a paleta de comandos do VS Code com CMD+SHIFT+P.
Selecione Codespaces: Full Rebuild Container.

Confirme a escolha e a página será recarregada com o novo ambiente configurado:

Tela de configuração do Codespace mostrando uma imagem encontrada, uma falha na compilação do contêiner e uma tentativa de recuperação.

Teste o Dev Container do Deno

Quando o novo ambiente de desenvolvimento com o Dev Container do Deno estiver pronto, abra o painel Terminal e confirme se as versões do Node.js e do Deno estão configuradas corretamente para você começar a programar:

Ambiente de desenvolvimento do Deno Dev Container no GitHub Codespaces

Extensões do VS Code recomendadas para Deno e TypeScript

Se você já usa o VS Code, conhece as várias extensões disponíveis e como elas podem facilitar o desenvolvimento de software. Elas oferecem funcionalidades extras, aprimoram o fluxo de trabalho e podem tornar a programação mais agradável e produtiva.

Lembre-se de que as extensões do VS Code são plugins que ampliam os recursos básicos do editor. Em sua maioria, são desenvolvidas e mantidas pela comunidade, por isso é importante auditá-las e analisá-las com cuidado para evitar malware e problemas de segurança. Faço esse alerta por causa de uma pesquisa de segurança realizada pela Snyk em 2021, que encontrou diversas vulnerabilidades em extensões do VS Code. Instale extensões para IDE com responsabilidade.

Linter de código para desenvolvimento com Deno

O ecossistema Deno é relativamente novo, mas amadureceu rapidamente e já conta com várias extensões do VS Code que aproveitam seus recursos exclusivos. Confira algumas extensões recomendadas para desenvolver com Deno:

Deno (denoland.vscode-deno): esta é a extensão oficial do VS Code para Deno. Ela oferece recursos de IntelliSense, linting, formatação e depuração para projetos Deno. A extensão identifica automaticamente a configuração do projeto com base no arquivo deno.json ou deno.jsonc na raiz do seu espaço de trabalho.
```
   {
       "compilerOptions": {
           "lib": ["deno.ns", "deno.unstable"]
       }
   }
```
Para adicionar a extensão denoland.vscode-deno do VS Code a um Dev Container, a melhor opção é incluir um campo extensions no arquivo devcontainer.json. Em seguida, adicione denoland.vscode-deno ao array extensions nesse arquivo.

Veja como configurar:
```
{
  "name": "Node.js & TypeScript",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",
  "extensions": [
    "denoland.vscode-deno"
  ]
}
```
Com essa configuração, o VS Code instalará automaticamente a extensão denoland.vscode-deno no Dev Container sempre que você abrir o projeto em um contêiner.
Deno Standard Library Snippets (justjavac.vscode-deno): esta extensão oferece snippets úteis para a biblioteca padrão do Deno, facilitando o uso dos módulos oficiais do Deno no seu projeto.

Segurança de código Deno com a Snyk

Com a crescente complexidade das aplicações de software e o uso frequente de bibliotecas npm de código aberto no desenvolvimento com Node.js e Deno, a segurança do código se tornou mais importante do que nunca. Uma única vulnerabilidade no seu código pode ter consequências devastadoras, como vazamentos de dados, prejuízos financeiros e danos à reputação da marca.

Uma base de código segura não serve apenas para prevenir ataques: ela também ajuda a construir a confiança dos usuários. Eles precisam saber que seus dados estão protegidos e que o software que usam foi desenvolvido levando a segurança em conta.

No universo JavaScript, seja com Node.js, Deno ou até mesmo Bun, os desenvolvedores usam inúmeras bibliotecas e pacotes para acelerar o desenvolvimento e tornar suas aplicações mais eficientes. No entanto, cada dependência de terceiros adicionada do registro npm traz riscos potenciais. É aí que a Snyk entra.

Snyk é uma ferramenta de segurança feita para desenvolvedores, que ajuda a encontrar e corrigir vulnerabilidades tanto nas dependências de código aberto quanto no código.

Quer encontrar vulnerabilidades de segurança no seu código Deno e nas dependências indiretas? Instale e ative a extensão da Snyk para VS Code no Dev Container do Deno:

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

Assim, você conta com um linter de segurança integrado ao seu código e com análise em tempo real. A Snyk pode identificar caminhos de código vulneráveis, como o caso de injeção de SQL a seguir em código Node.js:

Para saber mais sobre programação segura e injeções de SQL, recomendo este breve tutorial interativo do Snyk Learn sobre segurança de código para desenvolvedores JavaScript.

Extensões para desenvolvimento com Deno e TypeScript

TypeScript é um superset do JavaScript com tipagem estática que adiciona tipos opcionais, classes e módulos à linguagem. É amplamente usado no desenvolvimento web moderno, e há diversas extensões do VS Code que dão suporte e aprimoram o desenvolvimento com TypeScript:

TypeScript Hero (rbbit.typescript-hero): o TypeScript Hero oferece recursos avançados para TypeScript, como importações automáticas, geração de código e refatoração.
TSLint (ms-vscode.vscode-typescript-tslint-plugin): o TSLint é um linter para TypeScript. Ele aplica regras de estilo de código e ajuda a detectar erros comuns logo no início do desenvolvimento.
Prettier - Code formatter (esbenp.prettier-vscode): o Prettier é um formatador de código opinativo. Com ele, você pode formatar automaticamente seu código TypeScript para manter um estilo consistente.

Para ativar o Prettier para TypeScript, adicione a seguinte configuração ao arquivo .prettierrc:

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

Lembre-se: as extensões escolhidas devem estar alinhadas aos requisitos do seu projeto e ao seu estilo de código. Estas extensões recomendadas são apenas um ponto de partida para explorar as possibilidades do VS Code, do Deno, do Snyk e do TypeScript.