Guia de início rápido do GitHub Codespaces

Neste artigo

Experimente o GitHub Codespaces em 5 minutos.

Introdução

Neste guia, você vai criar um codespace por meio de um repositório de modelos e explorar alguns dos recursos essenciais disponíveis no codespace. Você trabalhará na versão do navegador do Visual Studio Code, que inicialmente é o editor padrão do GitHub Codespaces. Depois de experimentar este guia de início rápido, você poderá usar os Codespaces em outros editores e alterar o editor padrão. Os links são fornecidos no final deste guia.

Neste guia de início rápido, você aprenderá a criar um codespace, se conectar a uma porta encaminhada para ver o aplicativo em execução, publicar o codespace em um novo repositório e personalizar a configuração com extensões.

Para obter mais informações sobre como o GitHub Codespaces funciona exatamente, confira o guia complementar "Aprofundamento no GitHub Codespaces".

Criando seu codespace

Navegue até o repositório de modelos github/haikus-for-codespaces.
Acima da lista de arquivos, clique em Usar este modelo e selecione Abrir em um codespace.

Executando o aplicativo

Após a criação do codespace, o repositório de modelos será clonado nele automaticamente. Agora você pode executar o aplicativo e iniciá-lo em um navegador.

Quando o terminal ficar disponível, insira o comando npm run dev. Esse exemplo usa um projeto Node.js e esse comando executa o script rotulado como "dev" no arquivo package.json, que inicia o aplicativo Web definido no repositório de exemplo.

Se você estiver acompanhando com um tipo diferente de aplicativo, digite o comando inicial correspondente para esse projeto.
Quando o aplicativo for iniciado, o codespace reconhecerá a porta na qual o aplicativo está sendo executado e exibirá um prompt para informar você de que ela foi encaminhada.
Clique em Abrir no Navegador para ver seu aplicativo em execução em uma nova guia.

Edite o aplicativo e veja as alterações

Volte ao codespace e abra o arquivo haikus.json clicando duas vezes nele no Gerenciador.
Edite o campo text do primeiro haiku para personalizar o aplicativo com seu haiku.
Volte à aba do aplicativo em execução no seu navegador e atualize para visualizar as suas alterações.

Se você fechou a guia, abra o painel Portas e clique no ícone Abrir no navegador da porta em execução.

Enviando e fazendo push das suas alterações

Agora que você fez algumas alterações, use o terminal integrado ou a exibição de origem para publicar o trabalho em um novo repositório.

Na Barra de Atividades, clique na exibição Controle do Código-Fonte.
Para preparar as alterações, clique em + ao lado do arquivo haikus.json ou ao lado de Alterações se tiver alterado vários arquivos e quiser preparar todos eles.
Para fazer commit das alterações preparadas, digite uma mensagem de commit descrevendo a alteração que você fez e clique em Fazer commit.
Clique em Publicar Branch.
Na lista suspensa "Nome do Repositório", digite um nome para o novo repositório e selecione Publicar no repositório privado do GitHub ou Publicar no repositório público do GitHub .

O proprietário do novo repositório será a conta do GitHub com a qual você criou o codespace.
No pop-up exibido no canto inferior direito do editor, clique em Abrir no GitHub para ver o novo repositório no GitHub.com. No novo repositório, veja o arquivo haikus.json e verifique se a alteração feita no codespace foi enviada com êxito para o repositório.

Personalizando com uma extensão

Ao se conectar com um codespace usando o navegador ou o aplicativo da área de trabalho do Visual Studio Code, você pode acessar o Visual Studio Code Marketplace diretamente no editor. Neste exemplo, você instalará uma extensão do VS Code que altera o tema, mas você pode instalar qualquer extensão que seja útil para seu fluxo de trabalho.

Na barra lateral esquerda, clique no ícone Extensões.
Na barra de pesquisa, digite fairyfloss e clique em Instalar.
Selecione o tema fairyfloss escolhendo-o na lista.

Se você estiver usando um codespace no navegador ou no aplicativo da área de trabalho do Visual Studio Code e tiver a Sincronização de Configurações ativada, todas as alterações feitas na configuração do editor no codespace atual, como alteração do tema ou as associações de teclado, serão sincronizadas automaticamente com todas as instâncias do Visual Studio Code que estiverem conectadas à conta do GitHub e a todos os outros codespaces que você criar.

Próximas etapas

Você criou com sucesso, personalizou e executou seu primeiro aplicativo em um codespace, mas há muito mais para explorar! Veja alguns recursos úteis para aprimorar o uso dos GitHub Codespaces.

"Aprofundamento": esse guia de início rápido apresentou alguns dos recursos do GitHub Codespaces. O guia de aprofundamento analisa estas áreas a partir de um ponto de vista técnico.
"Adicionar uma configuração de contêiner de desenvolvimento ao repositório": esses guias fornecem informações de como configurar o repositório para usar os GitHub Codespaces com linguagens específicas.
"Introdução aos contêineres de desenvolvimento": este guia fornece detalhes de como criar uma configuração personalizada dos Codespaces para seu projeto.