Iniciando nosso projeto - NodeJS e Express (parte 2)

Posted by uselessdev on 17/12/2016

Criando o projeto

Índice

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!

WHY

Bem, nós vamos criar a estrutura!

Primeiros arquivos

Vamos criar a pasta do nosso projeto:

1
2
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.

1
2
touch index.js # Cria o arquivo index.js
npm init -y # Cria o arquivo package.json sem perguntas

Pacotes

Bem agora vamos instalar alguns pacotes que irão facilitar nossa vida daqui pra frente:

1
2
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

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

Morgan é um pacote que vai cuidar dos nossos logs na aplicação, também não é obrigatório.

Nodemon

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.

Hello World!

Vamos escrever nosso hello world

1
2
3
4
5
6
7
8
9
10
11
12
var express = require('express')
var app = express()
var port = process.env.PORT || 3000
app.get('/', function (request, response) {
response.send('hello world!')
})
app.listen(port, function () {
console.log('Servidor rodando em http://localhost:%s', port)
})

e pra subir nosso servidor basta rodar isso no seu terminal:

1
node index.js

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.

Refactory

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?

NOPE

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

1
mkdir bootstrap; touch bootstrap/app.js

Agora vamos modificar nosso arquivo index.js e nosso arquivo bootstrap/app.js

1
2
3
4
5
6
7
8
9
10
11
// index.js
var express = require('./bootstrap/app')
var app = express()
module.exports = app
// bootstrap/app.js
var express = require('express')
var app = express()
module.exports = app

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.

Scripts

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:

1
2
3
"scripts": {
"dev": "nodemon ./server.js"
}

Pra começarmos a desenvolver podemos apenas rodar npm run dev.

Logs

Lembra do Morgan?

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:

1
2
3
4
5
6
7
var logger = require('morgan') // Primeiro chamamos o pacote
var express = require('express')
var app = express()
app.use(logger('dev')) // Depois definimos como middleware
module.exports = app

E pronto.

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!

1
mkdir routes; touch routes/index.js

Configurando a rota:

1
2
3
4
5
module.exports = function (app) {
app.get('/', function (request, response) {
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

1
2
3
4
5
// ...
require('../routes/index')(app) // Aqui chamamos nossa rota index e já invocamos
module.exports = app

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:

1
2
3
4
5
6
7
8
9
10
var consign = require('consign') // Primeiro chamamos o módulo
...
// Antes de exportarmos o app configuramos o consign
consign()
.include('routes')
.into(app)
module.exports = app

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.

Conclusão

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.

Você pode acompanhar o projeto no nosso github, até a próxima semana.

Próximo: Controllers - NodeJS e Express (parte 3)


Comentários: