Como desenvolver seu projeto localmente

Visão geral

Desenvolvimento local significa configurar e executar seu projeto em seu próprio computador, em vez de na nuvem ou em um servidor remoto. Ao desenvolver localmente, você pode trabalhar em seu código sem uma conexão com a Internet e experimentar sem afetar o aplicativo ativo.

As etapas necessárias para configurar um ambiente de desenvolvimento local são diferentes para cada projeto, dependendo de suas linguagens de programação, estruturas, ferramentas e dependências. Neste guia, você aprenderá as principais habilidades necessárias para configurar qualquer projeto trabalhando com um aplicativo do lado do cliente de exemplo criado em HTML, CSS e JavaScript. Em seguida, você pode aplicar essas mesmas habilidades a outros projetos no futuro.

Como instalar ferramentas de desenvolvimento essenciais

Antes de começar, você precisará instalar algumas ferramentas essenciais amplamente usadas para o desenvolvimento local.

Clonagem e abertura do repositório no VS Code

Primeiro, faça uma cópia do repositório em seu computador clonando-o.

Comece clonando o repositório new2code/client-side-web-application. Esse link abre uma caixa de diálogo em VS Code para clonar o repositório.
Escolha um local para salvar o repositório no computador e, em seguida, clique em Selecionar como Destino de Repositório.
Quando for solicitado, abra o repositório.

Instalando os requisitos do projeto

Abra Copilot Chat e peça para identificar o que você precisa instalar com o prompt a seguir.
Text
```
What do I need to install to develop this project locally? 
```
```
What do I need to install to develop this project locally? 
```
Para este exemplo, o Copilot dirá que este projeto precisa do Node.js. O Node.js permite executar código JavaScript em seu computador e fornece ferramentas para desenvolvimento na Web.
Pergunte a Copilot como instalar os requisitos do projeto e siga as etapas para instalá-los em seu computador.

Para este exemplo, poderíamos perguntar "Como faço para instalar Node.js?" O Copilot dará instruções para acessar https://nodejs.org/ e baixar o instalador.

Como instalar dependências de projeto

Agora que você tem o software necessário instalado, precisa entender como usá-lo para este projeto específico.

Primeiro, verifique o arquivo README. A maioria dos projetos inclui um arquivo README no diretório raiz que explica como configurar e executar o projeto. Para este projeto, tanto o arquivo README quanto perguntar ao Copilot informará que a próxima etapa é instalar as dependências do projeto usando o npm, o gerenciador de pacotes do Node.js.

Abra a paleta de comandos pressionando Ctrl+Shift+P (Windows/Linux) ou Cmd+Shift+P (Mac).
Digite Terminal: Create New Terminal e pressione Enter.
Na guia Terminal, cole o seguinte comando.
Bash
```
npm install
```
```
npm install
```

Como esse projeto usa Node.js, usamos npm install para ler o arquivo package.json e baixar todas as dependências de que o projeto precisa para funcionar corretamente. Outros tipos de projetos usarão comandos diferentes. Por exemplo, projetos Python podem usar pip install -r requirements.txt, e projetos Ruby podem usar bundle install.

Se o README não incluir informações sobre a instalação de dependências, você poderá:

Procurar arquivos de configuração: projetos diferentes usam arquivos diferentes para listar suas dependências, por exemplo, projetos do Node.js usam package.json, projetos do Python usam requirements.txt e projetos do Ruby usam Gemfile.
Perguntar a Copilot: tente um prompt como: "Agora que eu tenho o Node.js instalado, qual é a próxima etapa para configurar este projeto?"

Como executar e desenvolver seu projeto

Agora que seu ambiente de desenvolvimento está configurado, você pode iniciar o servidor de desenvolvimento e usá-lo para visualizar as alterações no código.

Descubra como iniciar o projeto verificando o arquivo README na pasta do projeto.

Para este exemplo, a seção "Etapas para execução local" do README explica que você pode iniciar o servidor de desenvolvimento com o comando npm start. Execute o comando a seguir no seu terminal.
Bash
```
npm start
```
```
npm start
```
Para identificar onde o servidor local está disponível, examine a saída do terminal. Você verá que o servidor local está disponível em http://localhost:8080. Navegue até esse endereço no navegador.
Faça uma pequena alteração no código, como editar algum texto no arquivo HTML ou alterar uma cor no arquivo CSS. Salve suas alterações.
Verifique a documentação do projeto ou a saída do terminal para entender como ver suas alterações. Alguns projetos são atualizados automaticamente depois que você salva as alterações, enquanto outros exigem a atualização da janela do navegador.

Para este projeto, atualize a janela do navegador para ver suas alterações.

Se o README não contiver as informações necessárias, verifique os arquivos de configuração para obter comandos disponíveis. Você também pode perguntar ao Copilot Chat com o prompt a seguir.

Text

How do I start this project locally?

How do I start this project locally?

O que vem a seguir?

Agora que você configurou com êxito seu primeiro ambiente de desenvolvimento local, é hora de aplicar essas habilidades a diferentes tipos de projetos.

Pratique com um projeto diferente: tente configurar outro projeto com requisitos diferentes. Por exemplo, o aplicativo Web Python do @new2code usa Python e Flask, em vez de Node.js.

Use o que você aprendeu neste tutorial para:

Clonar o repositório usando o VS Code
Perguntar ao Copilot quais ferramentas e dependências você precisa instalar
Ler o arquivo README para entender como executar o projeto
Obter o aplicativo em execução no navegador

Essa prática ajudará você a reconhecer padrões em diferentes tecnologias e aumentar a confiança em sua capacidade de configurar qualquer projeto localmente.

Como desenvolver seu projeto localmente

Neste artigo