Quickstart for Codespaces

Introdução

In this guide, you'll create a codespace from a template repository and explore some of the essential features available to you within the codespace.

From this quickstart, you will learn how to create a codespace, connect to a forwarded port to view your running application, use version control in a codespace, and personalize your setup with extensions.

For more information on exactly how Codespaces works, see the companion guide "Deep dive into Codespaces."

Criando seu codespace

1. Navigate to the template repository and select Use this template.

2. Name your repository, select your preferred privacy setting, and click Create repository from this template.

3. Navigate to the main page of the newly created repository. Under the repository name, use the Code drop-down menu, and in the Codespaces tab, click New codespace.

   

Running the application

Once your codespace is created, your repository will be automatically cloned into it. Now you can run the application and launch it in a browser.

1. Since this example uses a Node.js project, start the application by entering npm run dev in the terminal. Este comando executa o script dev no arquivo package.json e inicia o aplicativo web definido no repositório de exemplo.

   

   If you're following along with a different application type, enter the corresponding start command for that project.

2. When your application starts, the codespace recognizes the port the application is running on and displays a prompt to forward that port so you can connect to it.

   

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

Edit the application and view changes

1. Switch back to your codespace and open the haikus.json file by double-clicking it in the File Explorer.

2. Edit the text field of the first haiku to personalize the application with your own haiku.

3. Go back to the running application tab in your browser and refresh to see your changes.

   If you've closed the tab, open the Ports panel and click the Open in browser icon for the running port.

Committing and pushing your changes

Now that you've made a few changes, you can use the integrated terminal or the source view to commit and push the changes back to the remote.

1. Na barra de atividade, clique na vista Controle de 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.
3. Digite uma mensagem do commit que descreve a alteração que você fez.
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.
   You can push the changes you've made. 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 (...).
6. No menu suspenso, clique em Push.

Personalizing with an extension

Dentro de um codespace, você tem acesso ao Marketplace do Visual Studio Code. For this example, you'll install an extension that alters the theme, but you can install any extension that is useful for your workflow.

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

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

   

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

   

4. Changes you make to your editor setup in the current codespace, such as theme and keyboard bindings, are synced automatically via Settings Sync to any other codespaces you open and any instances of Visual Studio Code that are signed into your GitHub account.

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.

• Deep dive: This quickstart presented some of the features of Codespaces. The deep dive looks at these areas from a technical standpoint.
• Setting up your project for Codespaces: These guides provide information on setting up your project to use Codespaces with specific languages
• Configuring Codespaces for your project: This guide provides details on creating a custom configuration for Codespaces for your project.

Leia mais

• Enabling Codespaces for your organization
• Managing billing for Codespaces in your organization