cefet_web

Server-side parte 3

Criando um servidor web com Express

Roteiro

Continuando nosso servidor web DIY
O framework Express.js
Geração dinâmica de HTML

Construindo um servidor web DIY

Continuando nosso servidor web

Retorna sempre o mesmo arquivo
Servindo arquivo baseado em URL
Definindo o tipo MIME

Um servidor web não muito útil

Na última aula, criamos um servidor Web que retornava sempre o mesmo arquivo para quaisquer requisições

const http = require('http'),
  fs = require('fs');

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  fs.createReadStream(process.argv[3]).pipe(res);
})

server.listen(process.argv[2]);

Um servidor web útil (baseado na URL)

import http from 'http'           // módulo http (nativo)
import fs from 'fs'               // módulo fs (nativo)
import url from 'url'             // módulo url (nativo)

const PORTA = 8000
const __dirname = new URL('.', import.meta.url).pathname
const caminhoServidor = __dirname.substr(0, __dirname.length - 1)


const server = http.createServer((req, res) => {
  const urlCompleta = url.parse(caminhoServidor + req.url)
  const caminhoSolicitado = urlCompleta.pathname

  // por exemplo, para localhost:8080/estilos.css, caminhoSolicitado é o
  // endereço desse arquivo no file system
  const streamArquivo = fs.createReadStream(caminhoSolicitado)

  streamArquivo.on('error', () => {
    res.writeHead(404)
    res.end('Not Found')
  })

  streamArquivo.on('open', () => {
    res.writeHead(200, {
      'Content-Type': 'text/plain'
    })
    streamArquivo.pipe(res)
  })
})

server.listen(PORTA, () => {
  console.log(`Escutando em http://localhost:${PORTA}/`)
})

Problema: MIME types

O protocolo HTTP define um cabeçalho chamado Content-Type, que deve conter o tipo MIME do arquivo: texto, HTML, imagem, CSS etc. Exemplos:
1. text/plain
2. text/html
3. image/png
4. video/webm
5. application/json
Como saber qual MIME type enviar?
- Tipicamente, usamos a extensão do arquivo…
- e uma tabela que mapeie extensões para MIME types

Servindo os arquivos, com MIME types

Existem mais de 1.500 MIME types
Em vez de criar a lista nós mesmos, vamos buscar se alguém já não passou por esse problema e já propôs uma solução:
```
$ npm search mime
```
- Ou então pesquise no site do npm
  - Resultado: um pacote chamado mime, com a descrição “A comprehensive library for mime-type mapping” 🤔
    - Repositório no GitHub com documentação

Usando o pacote mime

Primeiro, vamos instalar localmente o pacote mime. No diretório do nosso arquivo js:
```
$ npm install mime
```
- Repare que uma pasta com o nome node_modules foi criada e ela contém uma subpasta chamada mime
No programa do nosso servidor web:
1. Incluir o módulo mime via require('mime')
2. Invocar o método lookup que, dado um nome de arquivo, retorna o MIME type

Usando o pacote mime (cont.)

(1) Incluindo o módulo mime:

import http from 'http'
import fs from 'fs'
import url from 'url'
// incluído e atribuido à variável "mime"
import mime from 'mime'

/* ... */

Usando o pacote mime (cont.)

(2) Invocando o método que retorna o tipo MIME dado um nome de arquivo:

/* ... */
streamArquivo.on('open', () => {
  res.writeHead(200, {
    'Content-Type': mime.lookup(caminhoSolicitado)
  })
  stream.pipe(res)

  console.log(`Serviu o arquivo: ${caminhoSolicitado}`)
})
/* ... */

O que ainda está faltando

Nosso servidor web ainda precisa de algumas coisas:
1. Controlar cache de arquivos já solicitados
  - Se um navegador solicita um arquivo, o servidor pode enviar uma resposta 304 not modified em vez de 200 OK
2. Prevenir que um usuário acesse http://localhost:8080/../../../
3. Saber responder a métodos HTTP diferentes de GET (POST, PUT, DELETE, HEAD etc.)
4. Saber falar outros métodos (e.g., HTTPS)
5. Gerar arquivos HTML dinamicamente
Novamente, vejamos se não estamos reinventando a roda =)

Express

Um framework web para Node.js

Descrição
Instruções de uso
Hello world
Servindo arquivos estáticos
Definindo rotas
Geração dinâmica de HTML

Se entitulam um web framework para Node.js:
1. Rápido
2. Não opinativo (unopinionated)
3. Minimalista
Site oficial: http://expressjs.com/
Instalando:
```
$ npm install express --save
```
- Página Getting started

Servidor “hello world” com Express

import express from 'express'
const app = express()

app.get('/', (req, res) => {
  res.send('Hello World!')
})

const server = app.listen(3000, () => {
  const host = server.address().address;
  const port = server.address().port;

  console.log(`Listening at http://${host}:${port}`);
});

Servidor de arquivos estáticos com Express

import express from 'express'
const app = express()

// suponhamos que "/public" é uma pasta com
// nossos arquivos estáticos
app.use(express.static(`${__dirname}/public`))

app.listen(3000, () => {
  console.log('Escutando em: http://localhost:3000')
})

Especificando rotas

O express facilita a especificação da ação a ser tomada dependendo da URL solicitada

Uma rota é um verbo HTTP (GET, POST etc.) e uma URL

A cada rota é associada uma callback:

// GET / (página inicial)
app.get('/', (request, response) => {
  response.render('index')     // desenha a view 'index'
})
// POST /contato
app.post('/contato', (request, response) => {
  // envia um email usando os dados enviados
})

Especificando rotas (cont.)

Mais alguns exemplos de rotas:

// HEAD /user/122   (verificar se usuário id=122 existe)
app.head('/user/:ident', (request, response) => {
  // request.params contém os parâmetros da rota
  const usuario = tabelaDeUsuarios[request.params.ident]
  if (usuario !== null) {
    response.status(200).end()
  } else {
    response.status(404).end()
  }
})

Veja mais no guia oficial sobre rotas

Gerando HTML dinamicamente

Queremos poder gerar HTML dinamicamente. Para isso, precisamos de uma linguagem que facilite isso, ao mesmo tempo que possibilite a separação de código HTML do código nessa linguagem
Para ser “não opinativo”, o Express não impõe uma linguagem específica, oferecendo 19 opções, e.g.:
1. ejs (.ejs, era o formato original do Express)
2. handlebars (.hbs, site oficial)
3. pug (.pug, site oficial)

Gerando HTML dinamicamente com ejs

Usamos ejs (ou qualquer outro templating engine) em 3 passos:
1. Configuramos o express
2. Escrevemos arquivos HTML no formato ejs
3. Para determinadas rotas, renderizamos views
(1) Para configurar o Express para usar ejs:
```
app.set('view engine', 'ejs')
```

Gerando HTML dinamicamente com ejs (cont.)

(2) Escrevemos arquivos no formato .ejs em vez de .html. Trecho de um arquivo, e.g., equipe.ejs:

<ul>
  <% for (let i = 0; i < users.length; i++) { %>
    <li><img src="<%= users[i].foto %>"><%= users[i].nome %></li>
  <% } %>
</ul>

Esses arquivos são chamados de views e devem ficar dentro de uma pasta que configurarmos (valor padrão: ./views):
```
app.set('views', 'arquivos_ejs');   // pasta arquivos_ejs
```

Gerando HTML dinamicamente com ejs (cont.)

(3) Ao definirmos os handlers das nossas rotas, chamamos response.render e passamos o nome do arquivo da view que deve ser usado (sem a extensão):

app.get('/equipe', function(request, response) {
  response.render('equipe', contexto);      // vai pegar arquivos_ejs/equipe.ejs
});

Gerando HTML dinamicamente com ejs (cont.)

(3) É possível (e muito comum) disponibilizar dados para a view e podemos fazer isso usando o segundo parâmetro de response.render:

response.render('equipe', {
  users: [
    { nome: 'TJ Holowaychuk', foto: 'tj.jpg'  },
    { nome: 'Douglas Wilson', foto: 'dcw.jpg' }
  ]
});

Mais informações sobre templating engines no Express

Gerando HTML dinamicamente com handlebars

(1) Configurando o Express:
```
app.set('view engine', 'hbs');
```

(2) Criando arquivos no formato .hbs:

<ul>
    
    <li><img src=""></li>
    
</ul>

Gerando HTML dinamicamente com pug

(1) Configurando o Express:
```
app.set('view engine', 'pug');
```

(2) Criando arquivos no formato .pug:

ul
  each user in users
    li: img(src=user.foto) #{user.nome}

Referências

Capítulo 8 do livro “Node.js in Action”
Site do expressjs