0. Antes de começar (importante!)
Assegure-se de que o nome de usuário (username) que você utiliza para fazer login no seu equipamento NÃO CONTÉM espaços ou acentos. Algumas das ferramentas com que vamos trabalhar não admitem espaços ou acentos seja no path da pasta de projetos, seja no path de configuração da própria ferramenta.
Se esse for o seu caso, é altamente recomendável que você crie um novo username, sem espaços ou acentos, apenas para trabalhar no ambiente de desenvolvimento que iremos configurar.
1. Instalação das ferramentas
Para configurarmos nosso ambiente de desenvolvimento, será necessária a instalação de quatro ferramentas:
Atenção: os links para download abaixo fazem referências aos instaladores para o Microsoft Windows, arquitetura 64 bits. Para a instalação em Linux ou em Windows 32 bits, consulte as instruções no site de cada uma das ferramentas.
- Node.js: versão >=
12.16(download) - Yarn: versão >=
1.22(download) - Visual Studio Code: versão >=
1.42(download da versão User Installer, que não necessita de permissões de administrador para instalar) - MongoDB Community Server: versão >=
4.2.3(download, veja instruções de instalação abaixo)
1.1. Instalação do MongoDB Community Server
Das ferramentas que iremos utilizar, a única que exige um pouco mais de atenção ao instalar é o MongoDB Server. Fique atento(a) aos seguintes detalhes:
- Na quarta tela da instalação, desmarque a opção “Install MongoDB Compass”, conforme imagem abaixo. Isso concluirá a instalação em muito menos tempo.
- Após terminada a instalação, é necessário se o MongoDB Community Server foi configurado para ser inicializado junto com o Windows. Para isso, siga os seguintes passos:
- Pressione, ao mesmo tempo, as teclas
⊞ WineR - Na janela que se abre, digite
services.msc - Na nova janela aberta, procure pela linha do MongoDB Server conforme imagem abaixo. Algumas versões do Windows podem trazer o valor “Inicializado” em vez de “Em execução”
- Pressione, ao mesmo tempo, as teclas
2. Criação da pasta raiz de projetos
O passo seguinte é a criação de uma pasta raiz dentro da qual iremos criar subpastas para os projetos de back-end e, futuramente, também o de front-end.
Apesar de simples, essa etapa demanda alguns cuidados:
- O nome da pasta NÃO PODE conter espaços ou acentos, pelos motivos já explicados no início deste artigo. Como sugestão, crie a pasta com o nome
ProgWeb. - Além disso, NÃO PODE conter espaços ou acentos no caminho (path) completo da pasta, desde a indicação do drive (normalmente
C:) até a pasta propriamente dita. Por isso, recomendamos criar a pasta em um desses dois lugares:- Se você tiver permissão de leitura/escrita na raiz do seu drive (
C:\, por exemplo), crie aí a pasta raiz de projetos. Assim, o caminho completo ficariaC:\ProgWeb, sem espaços ou acentos; ou - Crie a pasta raiz de projetos na Área de Trabalho. Desse forma, o caminho completo para a pasta ficaria algo como
C:\Users\username\Desktop\ProgWeb, também sem acentos ou espaços.
- Se você tiver permissão de leitura/escrita na raiz do seu drive (
3. Começando com o Visual Studio Code
Criada a pasta raiz do projeto, vamos abri-la no editor Visual Studio Code. Para isso, acesse o menu File e escolha Open Folder (ou Arquivo e depois Abrir Pasta, caso a interface do seu editor esteja em português).
Muitas das tarefas de desenvolvimento web são feitas utilizando-se a linha de comando (terminal). O Visual Studio Code possui um terminal embutido, que pode ser acessado por meio da combinação de teclas (atalho) Ctrl + ': aperte ao mesmo tempo a tecla Ctrl e a tecla correspondente à aspa simples, localizada abaixo da tecla Esc.
O terminal embutido aparece na parte inferior da tela do Visual Studio Code, e pode demorar um pouco até permitir a digitação de comandos. Uma vez pronto, vamos utilizá-lo para criar uma pasta para o projeto back-end, dentro da pasta raiz de projetos, usando o comando a seguir.
mkdir back-endEm seguida, vamos “entrar” dentro dessa pasta, com o comando
cd back-endDe agora em diante, todos os comandos que iremos emitir pelo terminal serão referentes ao projeto back-end; portanto, precisamos nos assegurar que estamos na pasta
back-endANTES de executá-los. Para isso, basta observar o prompt (o caminho escrito antes do cursor do terminal): o último elemento dele deve ser, justamente,back-end. Seu prompt deve ser semelhante a
C:\Users\username\Desktop\ProgWeb\back-end>
4. Gerando o projeto-base em Express com express-generator
Nosso projeto de back-end será um servidor web implementado em Node.js utilizando o framework Express. A função do Express é nos fornecer o básico que um servidor web precisa para funcionar, poupando-nos da parte mais pesada desse tipo de projeto.
Usando a ferramenta express-generator, é possível criar um servidor web mínimo, mas plenamente funcional. Ele será um ponto de partida a partir do qual acrescentaremos novas funcionalidades de acordo com os objetivos de cada projeto.
Esse servidor web mínimo é implementado em uma série de arquivos fonte em Javascript, organizados em pastas de acordo com sua finalidade. Executando o comando express-generator, esses arquivos serão criados automaticamente, economizando um tempo considerável.
Portanto, para gerar o projeto utilizando o express-generator, precisamos executar o comando abaixo, via terminal, estando dentro da pasta back-end:
npx express-generator . --no-viewO npx é um comando que foi instalado junto com o Node.js, cuja finalidade é baixar um pacote específico da Internet (no caso, o express-generator) e executá-lo uma única vez. O ponto (.) à frente de express-generator representa a pasta atual, que é onde devem ser gerados os arquivos. O parâmetro --no-view indica que o express-generator deve omitir a geração de alguns arquivos correspondentes à parte visual da aplicação, os quais não utilizaremos agora.
A execução desse comando pode demorar um pouco, dependendo da qualidade da conexão à Internet.
Ao término da execução, você notará, no painel esquerdo do Visual Studio Code, que vários arquivos novos apareceram.
back-end, gerados pelo express-generator.5. Yarn e os pacotes
Parte substancial do desenvolvimento usando Node.js consiste na instalação de pacotes de código. Quando precisamos de funcionalidades para a solução de problemas comuns da nossa aplicação, quase sempre já há um pacote que fornece essa funcionalidade, poupando-nos o trabalho de ter que codificá-la nós mesmos.
Existem milhares de pacotes de código disponíveis para o Node.js, e seus desenvolvedores fazem o upload deles para o website npm registry (npmjs.com). Lá, há uma ferramenta de busca desses pacotes.
No entanto, não é necessário fazer o download dos pacotes a partir do npm registry e adicioná-los ao nosso projeto manualmente. O Node.js disponibiliza um comando chamado npm (Node.js Package Manager), que, dado o nome de um pacote, faz o download dele e o adiciona de forma automática a projeto. Os pacotes baixados pelo npm são armazenados, dentro do projeto, na pasta node_modules.
O npm é simples de usar, mas tem suas limitações. Uma delas, por exemplo, é sempre procurar o arquivo no npm registry, baixando-o todas as vezes a partir da Internet, o que pode ser um problema em conexões limitadas à Internet. Além disso, a pasta node_modules tende a ficar enorme, contendo centenas e até milhares de pacotes, tornando demorado levar uma simples cópia do projeto de um lugar para outro.
Diante disso, o Yarn apresenta-se como uma alternativa mais avançada ao npm. O Yarn trabalha com um cache local, de modo que, se um pacote já foi baixado e estiver no cache, ele não será baixado novamente da Internet, economizando banda. E, a partir da versão 2.0, o Yarn deixa de armazenar os pacotes na pasta node_modules e passa a fazê-lo na pasta .yarn, com uma vantagem estrondosa: dentro dessa nova pasta, os pacotes são armazenados de forma compactada, diminuindo drasticamente o espaço em disco ocupado por um projeto Node.js.
Diante das evidentes vantagens, vamos usar o Yarn em vez do npm.
O Yarn que instalamos no início deste artigo é o 1.22. Com o advento da versão 2.0, ele deve ser instalado separadamente por projeto, de modo que precisaremos executar alguns comandos no terminal para fazer o upgrade de versão.
Mãos à obra!
No terminal embutido, dentro do Visual Studio Code, e estando dentro da pasta back-end, execute:
yarn set version berryIsso irá fazer com que a versão 2.0.x do Yarn seja baixada e instalada para o projeto back-end. Esse comando pode demorar um pouco para ser executado.
Em seguida, vamos conferir a versão do Yarn que está instalada, com o comando:
yarn --versionA versão impressa na tela deve começar com 2.0.
6. Dependências de projeto
Com um ecossistema de pacotes, é natural que certos pacotes dependam de outros pacotes para funcionar; esses, por seu turno, podem depender de outros pacotes, e assim por diante. Forma-se, assim, o que se denomina árvore de dependências.
Nosso projeto back-end, gerado pelo express-generator, também depende de alguns pacotes para funcionar. O controle das dependências de projeto é feito pelo arquivo package.json, que pode ser considerado o arquivo mais importante do projeto.
Abrindo o arquivo package.json no Visual Studio Code (basta dar um duplo clique sobre ele no painel da esquerda), observamos que, entre outras informações, há uma seção denominada "dependencies" dentro desse arquivo.
package.json do projeto back-end, com a seção "dependencies” em destaque. Note que os nomes dos pacotes dentro da seção são exibidos com um sublinhado ondulado amarelo, indicando que ainda não foram instalados.Nosso projeto depende, inicialmente, de quatro pacotes, os quais dependem de outros pacotes, formando sua própria árvore de dependência. É importante dizer que o express-generator NÃO instalou esses pacotes quando gerou o projeto, e é por isso que o Visual Studio Code exibe um sublinhado ondulado amarelo sob o nome dos pacotes.
Antes, porém, de colocar nosso projeto em execução, é necessário instalar essas dependências. Em nosso caso, isso será feito por meio do Yarn.
No terminal embutido, dentro do Visual Studio Code, e estando dentro da pasta back-end, execute:
yarn installEsse comando irá verificar dentro do arquivo package.json quais arquivos precisam ser baixados e fará o processo automaticamente. Dependendo da qualidade da conexão à Internet, esse processo pode demorar um pouco.
Após concluído, observe no painel esquerdo do Visual Studio Code que apareceram dois novos itens: uma pasta chamada .yarn/cache e um arquivo de nome yarn.lock. O primeiro contém os pacotes baixados, devidamente zipados. Note que há bem mais que os quatro pacotes iniciais, por causa da sequência de dependência de pacotes. Já o arquivo yarn.lock é um controle que o Yarn mantém da árvore de dependências.
Agora nosso projeto está pronto para ir ao ar.
7. Executando o projeto
Finalmente! Depois de tantas etapas cumpridas, podemos finalmente colocar nosso projeto para funcionar. Para isso, no terminal embutido, dentro do Visual Studio Code, e estando dentro da pasta back-end, execute:
yarn startO mais comum é que esse comando não emita qualquer mensagem. No terminal, o cursor ficará parado, sem voltar ao prompt de comandos. Isso indica que está tudo dentro do esperado.
Agora é hora de abrir um navegador web e ver o website que está sendo servido pelo nosso servidor web, que nada mais é que o nosso projeto em funcionamento. Na barra de endereços do navegador, digite o endereço localhost:3000.
Você deverá ver uma página semelhante a essa:
E é isso. Parabéns, você configurou seu ambiente de desenvolvimento com Node.js, Express e MongoDB com sucesso!