Configuração do GitHub Codespaces

Página inicial

O GitHub Codespaces é uma ferramenta que providencia um ambiente de desenvolvimento em nuvem acessível por navegadores. Para cada Codespace é disponibilizado uma máquina virtual na nuvem e então são lançados containers, que possuem linguagems, ferramentas, frameworks e etc, definidas em um arquivo .dev-container.json

A vantagem deste sistema é não precisar reconfigurar tudo em cada máquina nova que utilizar, só abrir o Codespace no navegador e começar a trabalhar!

Neste guia rápido, iremos configurar um template de Codespace vazio com as ferramentas necessárias para o curso.

Criando um template vazio

Como forma de replicar o processo de instalação das ferramentas vistas em sala, iremos iniciar com um template vazio. Vá até o GitHub e crie um repositório vazio. Escolha um nome para o repositório, selecione a visibilidade e NÃO MARQUE nenhuma caixa adicional. No repositório vazio, haverá uma opção de "Abrir com Codespaces", selecione esta opção. Você será levado à uma janela contendo a versão de navegador do VSCode.

1. Utilizando o terminal do VSCode, crie uma pasta .devcontainer na raíz do repositório, e crie um arquivo devcontainer.json dentro desta pasta:

   > mkdir .devcontainer
   > cd .devcontainer
   > touch devcontainer.json
   

2. Este arquivo será o principal para a configuração do ambiente. Ele indica qual imagem usar, quais portas serão expostas, e quais comandos serão executados na criação. Iremos escolher uma imagem de container com Python instalado, mas existem outras opções de imagens. O snippet do arquivo é como a seguir:

   {
   "name": "Meu-Projeto",
   "image": "mcr.microsoft.com/devcontainers/python:dev-3.12-bookworm",
   "features": {
       "ghcr.io/devcontainers/features/git-lfs:1": {}
   },
   "forwardPorts": [8000],
   "postCreateCommand": "pip install -r requirements.txt && python manage.py migrate",
   "customizations": {
       "vscode": {
           "extensions": [
               "ms-python.python",
               "bat67.django-html"
               ]
           }
       }
   }
   

3. (Opcional) Se preferir, pode usar uma imagem universal que contenha uma maior quantidade de ferramentas, linguagens, entre outras coisas (como Python, Node.js/npm, etc). Só mudar o atributo image para ter o valor "mcr.microsoft.com/devcontainers/universal:latest". Caso opte por iniciar com a imagem de Python e queira adicionar uma ferramenta ou outra, pode utilizar as Features (não iremos abordar muito aqui).
4. Na raiz do projeto (só usar cd .. no terminal para voltar), crie um arquivo requirements.txt. Ele servirá para listar os pacotes de Python necessários para o projeto. Dentro dele, coloque apenas a versão de Django a ser utilizada:

   Django==5.2.7
   

5. Agora precisamos dizer ao Codespace para reconstruir o Container. O motivo para isto é para que as mudanças indicadas no arquivo json sejam aplicadas. Para fazer o rebuild, abra o Command Pallete do VSCode (Menu > View > Command Pallete), pesquise por "Codespaces: Rebuild Container", selecione e confirme que quer realizar a reconstrução. Assim, o nosso ambiente de desenvolvimento terá as ferramentas necessárias e o Django já será instalado.

   Publicando nosso projeto

   Feito isso, nosso projeto agora terá as ferramentas necessárias, incluindo o Git (visto que iniciamos por meio do nosso repositório). Entretanto, os arquivos do Codespace ainda não estão no repositório no GitHub (estão apenas em um volume hosteado no GitHub). O problema disso é que se fecharmos o Codespace e ele ser deletado (o que acontece após um certo período de inatividade), nosso trabalho e configuração serão deletados. Então, para evitar isso, iremos publicar nossas mudanças.
6. Dentro do terminal do Codespace, digite os seguintes comandos na raiz do projeto:

   > git add .
   > git commit -m "Initial codespace setup"
   > git push -u origin main
   

   1. Vá até seu repositório no GitHub. Agora, suas mudanças estão por lá!

Agora, só seguir com o setup do Django para conseguir trabalhar! O endereço de URL localhost onde colocamos o aplicativo em desenvolvimento do Django é automaticamente exportado pelo Codespaces, então, só clicar no link quando o ver no terminal :) Qualquer mudança que fizer (como criação das páginas, configurações do Django, etc), só adicionar os arquivos mudados com o git add e fazer os commits necessários. Isso irá salvar seu progresso e evitará futuras perdas no seu projeto.

Por fim, quando terminar o uso do Codespace, não se esqueça de parar ele! Isso pode ser feito na página do GitHub Codespaces. Lembre-se que há um limite de uso para o Codespace, então não é uma boa gastar o uso.