Este artigo faz parte de uma série de tutoriais que ensinarão passo a passo desde o desenvolvimento até a publicação de um pequeno site de apresentação utilizando o NodeJS e suas ferramentas.

Basicamente um mini curso. Seguindo todos os passos, no final você vai:

• Saber como instalar e configurar uma aplicação NodeJS.
• Servir uma aplicação online através do Express.
• Utilizar Handlebars para fornecer uma interface visual para o usuário com HTML e CSS.
• Publicar o seu site online no Heroku para que possa ser acessado por qualquer pessoa. Como este de exemplo aqui: Projeto Website

Seja bem-vindo. E bons estudos.

Introdução

No final deste artigo, você será capaz de criar uma aplicação e fornecer uma página bem simples, além de aprender conceitos e conhecer ferramentas importantes para o desenvolvimento.

Caso você esteja começando do zero, será preciso primeiro fazer a instalação do NodeJS em seu ambiente de desenvolvimento. Para isso, basta acessar o site oficial e realizar o download de acordo com o seu sistema operacional.

É recomendável baixar a última versão estável.

https://nodejs.org/en/download/

Após realizar a instalação, rode o comando a seguir no terminal do seu sistema operacional para saber se o NodeJS está sendo reconhecido:

node --version

Caso ainda não possua uma IDE para desenvolvimento, recomendo o Visual Studio Code. Porém, fique à vontade para escolher aquela de sua preferência. Até um bloco de notas servirá, mas conforme a complexidade aumentar, uma ferramenta mais profissional fará uma grande diferença.

Com o NodeJS e a IDE instalados, estamos prontos para começar.

Primeiros passos - Configurando e servindo uma aplicação

Escolha um local onde você gostaria de armazenar os seus projetos, seja na área de trabalho ou nos documentos, e crie uma pasta chamada ProjetoWebsite.

Abra o terminal de sua preferência, seja o próprio do sistema operacional ou da sua IDE, e vá até a pasta recém criada. Rode o seguinte comando:

npm init -y

O npm é um gerenciador de pacotes do Node, por meio dele é possível instalar plugins de terceiros, configurar a aplicação, entre outros. Esse comando criará toda a configuração inicial padrão necessária para começarmos os trabalhos.

Veremos mais para frente detalhadamente o que o arquivo package.json significa e o que podemos fazer com ele, mas por enquanto, façamos a coisa toda funcionar.

Para servir a aplicação, utilizaremos uma framework HTTP bem reconhecida, robusta e extremamente simples de implementar, o Express. Simplificando, essa framework permitirá uma comunicação externa com a aplicação.

O seguinte comando, instalará como dependência do nosso projeto o Express, e assim poderemos utilizá-lo em nossa aplicação. Rode o seguinte comando em seu terminal e na mesma pasta, ProjetoWebsite, em que o npm foi inicializado:

npm i express

Agora poderemos partir para uma parte mais interessante, de fato para uma implementação, algo mais atrativo.

Crie um arquivo chamado server.js na pasta ProjetoWebsite e escreva como no exemplo a seguir. Para fins de aprendizado, recomendo fazer manualmente para que possa entender e assimilar o que está sendo feito.

Os comentários são opcionais, escrevo apenas para que possa ser entendido passo a passo o que está sendo implementado.

// Requisita o módulo Express instalado para que possa ser utilizado na aplicação
const express = require('express')

// Cria uma instância da aplicação/Express
const app = express()

// Registra uma rota get(sinalizando leitura) apontando para a raiz '/'. Exemplo, exemplo.com/
// req: Request - Em resumo, corresponde as entradas, tudo aquilo que é enviado para o servidor 
// res: Response - Corresponde as saídas, tudo aquilo que é desejado enviar para o exterior
app.get('/', (req, res) => {
  // Envia uma string de resposta para a requisição realizada
  res.send('Olá mundo!')
})

// Inicializa o servidor observando a porta 3000
app.listen(3000, () => {
  console.log('Server online')
})

As variáveis "req" e "res" possuem muito mais funcionalidades e informações. Conforme os estudos e o aumento da complexidade serão apresentados mais detalhadamente.

O get de app.get corresponde a um dos métodos de requisição do HTTP, eles são responsáveis por indicar uma determinada ação a ser executada. No momento, é necessário que você entenda que quando se deseja recuperar um recurso específico, se utiliza normalmente o GET para este tipo de solicitação, diferentemente do formulário, que utiliza o POST, para envio de dados do cliente para o servidor.

Em resumo, o código anterior registra uma rota raiz, "/", que quando for acessada pelo browser, será mostrado uma mensagem "Olá mundo!".

Servindo a aplicação

Agora que criamos a aplicação, precisamos vê-la funcionando. Para isso, na pasta do projeto, rode o seguinte comando no terminal:

node server.js

Logo em seguida, você provavelmente verá um log no terminal mostrando a mensagem "Server online", como na imagem a seguir:

Caso ocorra algum erro nesta etapa, verifique se todos os passos anteriores foram realizados corretamente. Se o erro persistir, entre em contato que a sua dúvida será tirada.

Para ver o resultado, basta abrir o browser de sua preferência e digitar "localhost:3000"

Se tudo ocorrer bem, você verá a mensagem "Olá mundo" como resultado de sua requisição. Parabéns. ^^

Façamos agora um último incremento.

Normalmente um site possui várias páginas, o que permite distribuir o conteúdo entre todo ele de forma segmentada. Para isso, façamos então agora um exemplo de uma página Sobre.

No arquivo server.js, criaremos uma rota "/sobre" como no exemplo abaixo.

// ...

app.get('/sobre', (req, res) => {
  res.send("
Um simples tutorial de NodeJS
")
})

// ...

Caso o servidor ainda esteja sendo executado devido ao último teste realizado, será preciso parar e iniciá-lo novamente para as mudanças serem aplicadas.

Tecle "ctrl + c" para parar o servidor, e digite novamente "node server.js" para rodar a aplicação.

Atenção: É preciso parar a aplicação anterior porque caso a aplicação tente utilizar a porta "3000" simultaneamente será levantado um erro.

Com o servidor online, acesse a url "localhost:3000/sobre". E se tudo o ocorrer bem, você verá a mensagem sendo exibida.

Caso queira incrementar a primeira rota, e criar um link para navegar para a tela Sobre, modifique a primeira rota como a seguir:

app.get('/', (req, res) => {
    res.send('Olá mundo. Ir para Sobre')
})

Reinicialize novamente a aplicação para que seja aplicado as mudanças e veja se tudo ocorre como o esperado.

Automatizando a reinicialização da aplicação

Para evitar o contratempo de sempre ter que parar a aplicação e reiniciá-la manualmente, nós instalaremos uma ferramenta que fará isso de maneira automática. Após inicializada pela primeira vez, ela basicamente fica monitorando qualquer modificação ocorrida em nossos arquivos para reiniciar a aplicação.

Na pasta do projeto, rode o seguinte comando no terminal:

npm i nodemon -D

O "i" corresponde a "install" e o "-D" sinaliza que o pacote deverá ser instalado apenas nas dependências de desenvolvimento. Ou seja, quando o projeto for enviado para produção, estiver de fato rodando num ambiente final, o nodemon não será instalado. E para produção, existem ferramentas mais adequadas, como o Pm2, mas isso é história para outro dia, não precisa se preocupar no momento.

Após a instalação do pacote anterior, pare o servidor se ainda estiver em execução, e rode o comando a seguir:

npx nodemon server.js

Resultado:

Novamente, se tudo ocorrer bem como na imagem anterior, você verá a mensagem de "Server online", e é só acessar o "localhost:3000" para conferir.

Qualquer modificação que agora seja feita no arquivo, fará com que a aplicação seja automaticamente reinicializada. Pode fazer os testes modificando as mensagens ou criando novas rotas na aplicação.

Para deixar as coisas melhor organizadas e mais profissionais, faremos uso agora do arquivo "package.json" criado na inicialização do npm.

O package.json é responsável por manter uma configuração central, desde dependências até como executar determinadas ferramentas.

Ele se apresenta da seguinte forma:

{
  "name": "ProjetoWebiste",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {},
  "author": "",
  "license": "ISC",
  "devDependencies": {},
  "dependencies": {}
}

Os nomes são bens sugestivos, dentre eles vale salientar que:

• devDependencies: dependências de desenvolvimento.
• dependencies: dependências necessárias para a aplicação funcionar corretamente num ambiente de produção.
• scripts: conjunto de scripts a serem executados.

Agora, inseriremos o nodemon com a chave "dev" na tag "scripts" responsável por fornecer um modelo para execução de comandos:

"scripts": {
  "dev": "nodemon server.js"
},

Agora para inicializar a aplicação, na pasta ProjetoWebsite, você poderá executar da seguinte forma em seu terminal:

npm run dev

Desta forma, o npm rodará o comando atribuído como "dev" na tag scripts.

conferir se tudo está rodando normalmente, confira a mensagem "Server online" e abra novamente o browser de sua preferência e acesse o "localhost:3000"

Considerações finais

Com o intuito de não ficar um artigo muito longo e cansativo, esta primeira parte foi basicamente para uma apresentação simplificada e inicial de como desenvolver e servir uma aplicação NodeJS com o Express. Nos próximos artigos serão apresentadas funcionalidades mais interessantes, como de fato servir uma página por completo e dinâmica.

Bons estudos e até o próximo artigo.

Próximo artigo: Criando uma aplicação em NodeJS, Express e Handlebars - Parte 2

Um adendo.

Caso você seja iniciante, não precisa se apressar, continue os estudos base do NodeJS e seus principais pacotes para que tenha um conhecimento mais sólido. Aqui eu apresento algo um pouco mais avançado.

Neste artigo aprendemos a configurar, desenvolver e iniciar uma mini aplicação utilizando o NodeJS e Express. Com o passar do tempo, você verá que conforme a complexidade dos projetos aumentam, será preciso estudar novas abordagens e ferramentas.

Como exemplo, caso deseje conhecer, existe a JSagon NodeJS Framework. Sendo desenvolvida a partir de estudos e práticas observadas no desenvolvimento do dia a dia, removendo as complexidade das implementações e agilizando todo o processo.

Caso queira tirar alguma dúvida a respeito das tecnologias utilizadas, implementações ou contratempos que estejam tendo em implementações próprias. Pode entrar em contato clicando aqui.