Iniciando nosso projeto - NodeJS e Express (parte 2) - CODER WEB
Iniciando nosso projeto - NodeJS e Express (parte 2)
Posted by uselessdev on 17/12/2016
#nodejs #tasklist
No último artigo nós fizemos uma pequena introdução, agora vamos começar nosso projeto, então vamos criar nossa estrututa, pra isso poderíamos usar algumas opções pra automatizar esse processo como o express-generator ou o gerador do Yeoman, generator-express, mas não vamos!
Bem, nós vamos criar a estrutura!
Vamos criar a pasta do nosso projeto:
mkdir node-tasklist # Cria a pasta tasklist
cd node-tasklist # Entra na pasta criada
Uma vez dentro da pasta raiz da nossa aplicação vamos criar nosso primeiro arquivo.
touch index.js # Cria o arquivo index.js
npm init -y # Cria o arquivo package.json sem perguntas
Bem agora vamos instalar alguns pacotes que irão facilitar nossa vida daqui pra frente:
npm i express morgan --save # Instala os pacotes express e morgan para a aplicação
npm i nodemon --save-dev # Instala o pacote Nodemon pra usarmos no desenvolvimento
Express vai ser nosso framework web, ele não é obrigatório pra se criar uma aplicação web com NodeJS mas ele facilita esse trabalho, e muito.
Morgan é um pacote que vai cuidar dos nossos logs na aplicação, também não é obrigatório.
Nodemon é o que vai nos poupar tempo de verdade aqui. Pra cada alteração que fizermos no nosso código precisariamos reiniciar nosso servidor, o Nodemon faz isso de forma automática pra gente.
Vamos escrever nosso hello world
console.log('Servidor rodando em http://localhost:%s', port)
e pra subir nosso servidor basta rodar isso no seu terminal:
Vamos a uma rápida explicação, primeiro nós importamos o módulo express var express = require('express'), logo depois nós invocamos a função express e passamos ela pra váriavel app a partir de agora app vai ser um objeto com todos os métodos públicos de express.
Depois, dizemos que a váriavel port precisa receber o valor de process.env.PORT ou, se esse valor não existir é igual a 3000.
Então configuramos nossa primeira rota app.get ali definimos que quando o usuário acessar a rota / ou seja http://localhost:3000/, ele vai receber como resposta o nosso hello world.
Por fim dizemos ao nosso servidor pra escutar na porta 3000 com o app.listen.
Pra entender melhor ou pegar mais detalhes do express você pode, e deve, consultar a documentação do mesmo.
Nossa aplicação começou a tomar forma, mas antes vamos falar sobre nossa rota e nosso index.js.
Atualmente nós iniciamos nossa aplicação, configuramos e criamos nossa rota tudo no MESMO arquivo, isso parece certo?
Bem então vamos mudar algumas coisas, primeiro vamos criar uma pasta chamada bootstrap (não aquele bootstrap) e logo em seguida criar um arquivo app.js
mkdir bootstrap; touch bootstrap/app.js
Agora vamos modificar nosso arquivo index.js e nosso arquivo bootstrap/app.js
var express = require('./bootstrap/app')
// bootstrap/app.js
Agora sim, mas e nossa rota? Calma
Nosso arquivo index.js fica responsável apenas por iniciar nosso servidor e a configuração fica lá no bootstrap/app.js, já que nosso arquivo index.js é responsável por subir nosso servidor vamos renomea-lo para server.js, agora pra subir deveriámos rodar node server.js mas não queremos fazer isso.
Pra subir nossa aplicação, podemos agora passar apenas o comando npm start no terminal, esse comando quando não é declarado no seu package.json ele roda node server.js por padrão.
Tudo indo bem, mas quando alterarmos nosso código teriamos que reiniciar nosso servidor, e foi pra evitar isso que instalamos o Nodemon, vamos configurar ele:
"dev": "nodemon ./server.js"
Pra começarmos a desenvolver podemos apenas rodar npm run dev.
Lembra do Morgan?
Não esse Morgan
Vamos configurar nosso pacote pra logs, e ele é bem simples, ele funciona como um middleware para o express, então pra deixarmos ele funcionando vamos alterar nosso arquivo bootstrap/app.js, adicionando o seguinte:
var logger = require('morgan') // Primeiro chamamos o pacote
app.use(logger('dev')) // Depois definimos como middleware
Mas e a rota?
Agora sim, vamos falar sobre nossa rota desaparecida, uma vez que nosso arquivo server.js é responsável por subir nossa aplicação e o arquivo bootstrap/app.js pela configuração inicial da aplicação, nossas rotas ficarão onde? Isso mesmo! Em uma pasta routes.
Vamos então cria-la e configurar nossa rota de hello world!
mkdir routes; touch routes/index.js
Configurando a rota:
response.send('hello world')
Aqui criamos nossa rota e exportamos uma função que recebe como parametro app que deve ser nossa instancia do Express, no arquivo bootstrap/app.js
require('../routes/index')(app) // Aqui chamamos nossa rota index e já invocamos
Beleza, mas pra cada rota nova precisaremos adicionar de novo aqui, na nossa aplicação isso não vai ter tanto impacto, mas imagina em uma aplicação grande? Então vamos adicionar mais um módulo que vai nos ajudar com isso: Consign.
Consign é um autoload então vamos configurar ele na nossa aplicação:
var consign = require('consign') // Primeiro chamamos o módulo
// Antes de exportarmos o app configuramos o consign
.include('routes')
Explicando rapidinho, invocamos o consign e dizemos pra ele carregar todas as funções que são exportadas dentro de routes, passando o app como parametro, assim, não precisaremos ficar carregando cada rota nova aqui.
Enfim finalizamos nossa segunda parte, como você pode perceber é bem simples de se trabalhar com e NodeJS e Express, no próximo artigo nós iremos implementar nossas views e começaremos listar nossas tarefas.