{"meta":{"title":"Como desenvolver seu projeto localmente","intro":"Saiba como criar um ambiente de desenvolvimento local trabalhando com um aplicativo do lado do cliente de exemplo criado em HTML, CSS e JavaScript.","product":"Introdução","breadcrumbs":[{"href":"/pt/get-started","title":"Introdução"},{"href":"/pt/get-started/learning-to-code","title":"Aprenda a codificar"},{"href":"/pt/get-started/learning-to-code/developing-your-project-locally","title":"Desenvolvimento local"}],"documentType":"article"},"body":"# Como desenvolver seu projeto localmente\n\nSaiba como criar um ambiente de desenvolvimento local trabalhando com um aplicativo do lado do cliente de exemplo criado em HTML, CSS e JavaScript.\n\n## Visão geral\n\nDesenvolvimento 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.\n\nAs 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.\n\n## Como instalar ferramentas de desenvolvimento essenciais\n\nAntes de começar, você precisará instalar algumas ferramentas essenciais amplamente usadas para o desenvolvimento local.\n\n1.               [Configurar VS Code com GitHub Copilot](https://code.visualstudio.com/docs/copilot/setup-simplified).\n1.               [Instale o Git](https://git-scm.com/downloads).\n\n## Clonagem e abertura do repositório no VS Code\n\nPrimeiro, faça uma cópia do repositório em seu computador clonando-o.\n\n1. [Comece clonando o repositório new2code/client-side-web-application](vscode://vscode.git/clone?url=https://github.com/new2code/client-side-web-application). Esse link abre uma caixa de diálogo em VS Code para clonar o repositório. <!-- markdownlint-disable-line GHD003 -->\n1. Escolha um local para salvar o repositório no computador e, em seguida, clique em **Selecionar como Destino de Repositório**.\n1. Quando for solicitado, abra o repositório.\n\n## Instalando os requisitos do projeto\n\n1.               [Abra Copilot Chat](vscode://GitHub.Copilot-Chat?ref_product=copilot&ref_type=engagement&ref_style=text); em seguida, solicite que ele identifique o que você precisa instalar com o seguinte prompt. <!-- markdownlint-disable-line GHD003 -->\n\n    ```text copy\n    What do I need to install to develop this project locally? \n    ```\n\n    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.\n\n1. Pergunte a Copilot como instalar os requisitos do projeto e siga as etapas para instalá-los em seu computador.\n\n    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.\n\n## Como instalar dependências de projeto\n\nAgora que você tem o software necessário instalado, precisa entender como usá-lo para este projeto específico.\n\n**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.\n\n1. Abra a Paleta de Comandos pressionando <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> (Windows/Linux) ou <kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> (Mac).\n\n1. Digite `Terminal: Create New Terminal` e pressione <kbd>Enter</kbd>.\n\n1. Na guia Terminal, cole o seguinte comando.\n\n   ```bash copy\n   npm install\n   ```\n\nComo 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, Python projetos podem usar `pip install -r requirements.txt` e os projetos Ruby podem usar `bundle install`.\n\nSe o README não incluir informações sobre a instalação de dependências, você poderá:\n\n* **Procure por arquivos de configuração**: Projetos diferentes utilizam arquivos distintos para listar suas dependências—por exemplo, projetos Node.js utilizam `package.json`, projetos Python utilizam `requirements.txt`, e projetos Ruby utilizam `Gemfile`.\n* **Perguntar a Copilot**: tente um prompt como: \"Agora que eu tenho o Node.js instalado, qual é a próxima etapa para configurar este projeto?\"\n\n## Como executar e desenvolver seu projeto\n\nAgora 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.\n\n1. Descubra como iniciar o projeto verificando o arquivo README na pasta do projeto.\n\n   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.\n\n   ```bash copy\n   npm start\n   ```\n\n1. 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.\n1. 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.\n1. 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.\n\n   Para este projeto, atualize a janela do navegador para ver suas alterações.\n\nSe 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 [Copilot Chat](vscode://GitHub.Copilot-Chat?ref_product=copilot&ref_type=engagement&ref_style=text) com o seguinte prompt. <!-- markdownlint-disable-line GHD003 -->\n\n```text copy\nHow do I start this project locally?\n```\n\n## O que vem a seguir?\n\nAgora que você configurou com êxito seu primeiro ambiente de desenvolvimento local, é hora de aplicar essas habilidades a diferentes tipos de projetos.\n\n**Pratique com um projeto diferente**: tente configurar outro projeto com requisitos diferentes. Por exemplo, [@new2code's aplicativo web Python](https://github.com/new2code/python-web-application) usa Python e Flask em vez de Node.js. <!-- markdownlint-disable-line GHD003 -->\n\nUse o que você aprendeu neste tutorial para:\n\n* Clonar o repositório usando o VS Code\n* Pergunte ao Copilot quais ferramentas e dependências você precisa instalar\n* Ler o arquivo README para entender como executar o projeto\n* Obter o aplicativo em execução no navegador\n\nEssa prática ajudará você a reconhecer padrões em diferentes tecnologias e aumentar a confiança em sua capacidade de configurar qualquer projeto localmente."}