Início rápido para codespaces

Experimente Codespaces em 5 minutos.

Codespaces is available for organizations using GitHub Team or GitHub Enterprise Cloud. Para obter mais informações, consulte os "produtos do GitHub".

Introdução

Neste guia, você irá criar um codespace a partir de um repositório modelo e explorar algumas das funcionalidades essenciais disponíveis para você dentro do codespace.

Neste início rápido, você aprenderá a criar um codespace, conectar-se a uma porta encaminhada para ver seu aplicativo em execução, usar o controle de versões em um codespace e personalizar a sua configuração com extensões.

Para obter mais informações sobre exatamente como Codespaces funciona, consulte o guia "Aprofundamento em Codespaces."

Criando seu codespace

  1. Acesse o rrepositório do modelo e selecione Usar este modelo.

  2. Nomeie seu repositório, selecione sua configuração de privacidade preferida e clique em Criar repositório a partir desse modelo.

  3. Acesse a página principal do repositório recém-criado. No nome do repositório, use o menu suspenso Código de e na aba Codespaces de código, clique em Novo codespace.

    Botão de codespace novo

Executando o aplicativo

Uma vez criado o seu codespace, seu repositório será automaticamente clonado. Agora você pode executar o aplicativo e iniciá-lo em um navegador.

  1. Como esse exemplo usa um projeto Node.js, inicie o aplicativo digitando npm run dev no terminal. Este comando executa o script dev no arquivo package.json e inicia o aplicativo web definido no repositório de exemplo.

    npm run dev no terminal

    Se você estiver acompanhando com um tipo diferente de aplicativo, digite o comando inicial correspondente para esse projeto.

  2. Quando o aplicativo iniciar, o código reconhece a porta na qual o aplicativo está sendo executado e irá exibir uma instrução para encaminhar a porta para que você possa conectar-se a ele.

    Notificação de encaminhamento de porta

  3. Clique em Abrir no navegador para visualizar seu aplicativo em execução em uma nova aba.

Edite o aplicativo e veja as alterações

  1. Volte para o seu codespace e abra o arquivo haikus.json clicando duas vezes no botão no Explorador de Arquivos.

  2. Edite o campo de do primeiro haiku para personalizar o aplicativo com o seu próprio haiku.

  3. Volte à aba do aplicativo em execução no seu navegador e atualize para visualizar as suas alterações.

    Se você fechou a aba, abra o painel de portas e clique no ícone Abrir no navegador para a porta em execução. Painel de Encaminhamento de Portas

Enviando e fazendo push das suas alterações

Agora que você fez algumas alterações, você poderá usar o terminal integrado ou a visão de origem para commit e fazer push das alterações de volta para remoto.

  1. Na barra de atividade, clique na vista Controle de Origem. Visualização do controle origem
  2. Para testar suas alterações, clique + ao lado do arquivo que você alterou, ou ao lado de Alterações se você mudou vários arquivos e quiser testar todos. Barra lateral de controle de origem com botão de staging destacado
  3. Digite uma mensagem do commit que descreve a alteração que você fez. Barra lateral do controle de origem com uma mensagem de commit
  4. Para fazer commit das alterações em fase de preparação, clique na marca de seleção na parte superior da barra lateral de controle de origem. Click the check mark icon
    Você pode fazer push das alterações realizadas. Isso aplica essas alterações ao branch upstream no repositório remoto. Você pode querer fazer isso se ainda não estiver pronto para criar um pull request, ou se você preferir criar um pull request em GitHub.
  5. Na parte superior da barra lateral, clique na elipse (...). Botão Elipsis para visualizar e mais ações
  6. No menu suspenso, clique em Push.

Personalizando com uma extensão

Dentro de um codespace, você tem acesso ao Marketplace do Visual Studio Code. Para este exemplo, você instalará uma extensão que altera o tema, mas você pode instalar qualquer extensão que seja útil para o seu fluxo de trabalho.

  1. Na barra lateral esquerda, clique no ícone Extensões.

  2. Na barra de pesquisa, digite fairyfloss e instale a extensão fairyfloss.

    Adicionar extensão

  3. Selecione o tema fairyfloss selecionando-o na lista.

    Selecionar tema fairyfloss

  4. As alterações feitas na configuração do seu ditor editor no codespace atual, como ligações de tema e teclado, são sincronizadas automaticamente por meio da Sincronização das Configurações para qualquer outro codespace que você abrir e quaisquer instâncias do Visual Studio Code que estiverem conectadas à sua conta do GitHub.

Próximos passos

Você criou com sucesso, personalizou e executou seu primeiro aplicativo em um codespace, mas há muito mais para explorar! Aqui estão alguns recursos úteis para dar seus próximos passos com Codespaces.

  • Aprofundamento: Este início rápido apresentou algumas das funcionalidades de Codespaces. O guia de aprofundamento analisa estas áreas a partir de um ponto de vista técnico.
  • Configurando seu projeto para Codespaces: Estes guias fornecem informações sobre a configuração do seu projeto para usar Codespaces com linguagens específicas
  • Configurar Codespaces para o seu projeto: Este guia fornece informações sobre a criação de uma configuração personalizada para Codespaces para o seu projeto.

Leia mais

Esse documento ajudou você?

Política de Privacidade

Ajude-nos a tornar esses documentos ótimos!

Todos os documentos do GitHub são de código aberto. Você percebeu que algo que está errado ou não está claro? Envie um pull request.

Faça uma contribuição

Ou, aprenda como contribuir.