Configurando o Node como ambiente de desenvolvimento - Aprendendo desenvolvimento web

Configurando o Node como ambiente de desenvolvimento
====================================================

* Anterior
* Menu: Express Nodejs
* Próxima

Agora que você sabe para que serve o Express, nós vamos lhe mostrar como configurar e testar o ambiente Node/Express no Windows, Linux (Ubuntu) e macOS. Independentemente do sistema operacional que você prefere, este artigo deve lhe proporcionar o que você precisa para desenvolver aplicativos em Express.

|  |  |
| --- | --- |
| Pré-Requisitos: |
 Saber como abrir um terminal/linha de comando. Saber como instalar
 pacotes de software no sistema operacional do computador utilizado para
 desenvolvimento
  |
| Objetivo: |
 Configurar o ambiente de desenvolvimento para Express (X.XX) em seu
 computador
  |

Visão geral do ambiente de desenvolvimento do Express
-----------------------------------------------------

*Node* e *Express* facilitam a configuração de seu computador para começar a desenvolver aplicações web. Esta seção fornece uma visão ampla de quais ferramentas serão necessárias, explica alguns métodos simples para instalar o Node (e Express) no Ubuntu, macOS e Windows e também mostra como você pode testar sua aplicação.

### O que é o ambiente de desenvolvimento Express?

O ambiente de desenvolvimento *Express* inclui uma instalação do *Nodejs,* o pacote de gerenciamento *NPM* e (opcionalmente) o *Gerador de Aplicações Express* em seu computador local.

O *Node* e o *NPM* são instalados em conjunto por meio de um pacote binário preparado, instaladores, pacotes de gerenciamento de sistemas operacionais ou diretamente da fonte (como mostra a seção seguinte). O *Express* é então instalado pelo NPM como uma dependência de sua aplicação web *Express* individual (junto a outras bibliotecas como motores de modelo, drivers de banco de dados, autenticações middleware, middleware para arquivos estáticos, etc.)

NPM também pode ser utilizado para instalar (globalmente) o Express Application Generator, uma ferramenta que cria um "esqueleto" de um app Express, seguindo o padrão MVC. O gerador de app é opcional porque você não precisa dessa ferramenta para criar um app ou um construtor Express para ter a mesma arquitetura. Nós vamos usá-lo nesta seção porque nos permite iniciar uma aplicação de uma maneira mais rápida e promover uma estrutura modular.

**Nota:** Ao contrário de muitos outros framework que não oferecem um servidor web junto ao ambiente de desenvolvimento, o Node/Express cria e roda o seu próprio servidor web.

Há outras ferramentas periféricas que integram o ambiente de desenvolvimento, é o caso dos editores de textos (códigos), conhecidos como IDE, e versionadores de códigos, como o Git, que ajudam a gerenciar diferentes versões do código. Estamos partindo da ideia de que você já conhece essas ferramentas e as têm instaladas (em especial o editor de texto).

### Quais sistemas operacionais têm suporte?

*Node* roda em Windows, macOS, diferentes versões do Linux, Docker, etc. Há uma lista de sistemas suportados que pode ser encontrada na página de Downloads do Nodejs. Quase todos os computadores pessoais têm o que é necessário para rodar o Node. O Express roda no ambiente Node e, consequentemente, roda em qualquer plataforma que roda o *Node*.

Neste artigo, vamos abordar as instruções de configuração para Windows, macOS, e Ubuntu Linux.

### Qual versão do Node/Express você deve usar?

Há várias versões do Node - as mais recentes contém correção de bugs, suporte para EMCAScript (JavaScript) e melhorias nas APIs do Node.

De maneira geral, você deve usar a versão mais recente do LTS (long-term supported), pois é a mais estável do que a versão "current". Além disso, você deve usar a versão current apenas se precisar de alguma funcionalidade que não está presente na versão LTS.

Para o Express, você deve usar sempre a versão mais completa.

### Sobre o banco de dados e outras dependências?

Outras dependências, como database drivers, engine para templates, ferramentas para autenticação, etc, são parte da aplicação e são importadas para o ambiente a partir do NPM. Nós vamos falar sobre essa parte mais para frente.

Instalando o Node
-----------------

Para utilizar o Express, você terá que instalar o Nodejs e o NPM em seu sistema operacional. Nas seções a seguir, vamos explicar o jeito mais fácil de instalar a versão LTS do Nodejs no Ubuntu Linux 16.04, macOS e Windows 10.

**Nota:** **Dica:** As seções abaixo mostram o jeito mais fácil de instalar o NPM nos Sistemas Operacionais. Se você utilizar outro sistema ou quer ver uma abordagem diferente para as plataformas atuais acesse Instalando Node.js via NPM (nodejs.org).

### Windows e macOS

Instalar o Node e o NPM no Windows ou no macOS é uma tarefa rápida e simples. Siga os seguintes passos:

1. Baixar o instalador:
    1. Vá para https://nodejs.org/en/
    2. Selecione o botão de download da versão LTS, que é a recomendada para a maioria dos usuários.
2. Instale o Node ao clicar duas vezes no arquivo de download. Siga a instalação a partir das janelas que vão aparecer na sua tela.
### Ubuntu 16.04

O jeito mais fácil de instalar a versão LTS do Node é usar o NPM a partir do Ubuntu *binary distributions repository*. Isso pode ser feito de uma maneira muito simples. Rode os seguintes comandos no seu terminal.

```bash
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs
```

**Aviso:** **Atenção:** Não faça a instalação direto do repositório normal do Ubuntu pois ele contém versões antigas do Node.

### Testando a instalação do Nodejs e do NPM

O jeito mais fácil de testar se tudo correu bem na instalação é checar qual a versão do Node está rodando no computador. Para isso, vá ao terminal/command prompt e digite o seguinte comando para retornar a resposta com a versão mais recente.

```bash
>node -v
v8.9.4
```

O *NPM* também deve ter sido instalado. Você pode checar da seguinte maneira:

```bash
>npm -v
5.6.0
```

Uma maneira um pouco mais divertida de testar é criar um servidor web em "puro node". Vamos imprimir a tradicional frase "Hello World" no browser quando visitarmos uma determinada URL.

1. Crie um arquivo chamado hellonode.js e cole dentro dele o código abaixo. Estamos usando apenas o Node, sem o Express, e com sintaxe do ES6.

```js
//Chame o módulo HTTP
var http = require("http");

//Crie um servidor HTTP para ouvir as requisições na porta 8000
http
  .createServer(function (request, response) {
    // Configure o resposta HTTP header com o HTTP status e Content type
    response.writeHead(200, { "Content-Type": "text/plain" });

    // Envie a resposta do body "Hello World"
    response.end("Hello World\n");
  })
  .listen(8000);

// Imprima URL para acessar o servidor
console.log("Server running at http://127.0.0.1:8000/");
```

O código importa o módulo "http" e o utiliza para criar um servidor (`createServer()`) que escuta as requisições HTTP na porta 8000. O script, então, imprime a mensagem no console. A função `createServer()` recebe como argumento uma função callback que é chamada quando recebe uma requisição HTTP - isso retorna uma resposta com um status 200 ("OK") do HTTP e o texto "Hello World".

**Nota:** Não se preocupe se você não entendeu exatamente o que esse código faz. Nós vamos explicar isso em mais detalhes quando iniciarmos a parte do Express.
2. Inicie o servidor e navegue pelo mesmo diretório que o seu arquivo hellonode.js no terminal. Depois chame o Node da seguinte forma:

```bash
>node hellonode.js
Server running at http://127.0.0.1:8000/
```

3. Navegue até a URL (`http://127.0.0.1:8000/`). Se tudo estiver funcionando bem, o browser vai apresentar a frase "Hello World".
Usando o NPM
------------

Ao lado do próprio Node, o NPM é a ferramenta de trabalho mais importante nas aplicações Node. O NPM é usado para buscar qualquer pacote (biblioteca JavaScript) que uma aplicação precisa para ser desenvolvida, testada ou produzida, além de ser adotado para rodar testes ao longo de todo o processo de desenvolvimento.

**Nota:** A partir da perspectiva do Node, Express é um pacote que precisa ser instalado utilizando o NPM e depois importado para o seu código.

Você pode usar o NPM separadamente para buscar cada pacote desejado. Em geral, nós gerenciamos as dependências com um arquivo chamado package.json. Esse arquivo lista todas as dependências para um pacote JavaScript específico, incluindo o nome do pacote, a versão, descrição, arquivo de inicialização, produção de dependências, desenvolvimento de dependências, versões do Node que podem ser utilizadas. O **package.json** contém tudo que o NPM precisa para buscar e rodar a sua aplicação (se você está escrevendo uma biblioteca para ser reutilizável, você pode usar essa definição para fazer o upload do pacote para o repositório npm e deixá-lo acessível a qualquer usuário).

### Adicionando dependências

Os passos seguintes mostram como baixar pacotes via NPM, salvá-los nas dependências do projeto e importá-los/chamá-los para dentro da aplicação Node.

**Nota:** Nesta seção mostraremos como buscar e instalar o pacote do Express. Depois, explicaremos como esse e outros pacotes já estão especificados para nós graças ao *Express Application Generator*. É muito importante entendermos como o NPM funciona e o que é criado com o generator.

1. Primeiro passo é criar um diretório para sua aplicação. No prompt, insira os comandos a seguir.

```bash
mkdir myapp
cd myapp
```

2. Use o comando `npm init` para criar o arquivo **package.json** da sua aplicação. Esse comando registra para você uma série de informações, como o nome e a versão do seu aplicativo, além do nome do seu "entry point" (**index.js** por padrão). Por hora, vamos manter a configuração padrão.

```bash
npm init
```

Se você acessar o arquivo **package.json** (`cat packge.json`), você verá toda a configuração padrão e, ao final, o tipo de licença que o app está utilizando.

```json
{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
```

3. Agora, instale o Express dentro do diretório **myapp**. O pacote será salvo automaticamente na lista de dependências do seu **package.json**.

```bash
npm install express
```

A lista de dependências do **package.json** agora mostra também a versão do Express que estamos usando. Está grifada no final do arquivo.

```json
{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.2"
  }
}
```

4. Para usar o Express, é preciso incluir a função `require()` no arquivo index.js dentro da sua aplicação. Crie esse arquivo agora mesmo na pasta raiz "**myapp**" e inclua o código a seguir.

```js
var express = require("express");
var app = express();

app.get("/", function (req, res) {
  res.send("Hello World!");
});

app.listen(8000, function () {
  console.log("Example app listening on port 8000!");
});
```

O código mostra uma aplicação web bem simples cujo objetivo único é imprimir a mensagem "HelloWorld". Em linhas gerais, esse arquivo importa o módulo do express e o utiliza para criar um servidor (`app`) que escuta as requisições HTTP pela porta 8000 e imprime a mensagem no console, além de definir qual URL usada para testar o servidor. A função `app.get()` responde apenas às requisições HTTP feitas com o método GET, desde que especificadas com o path ('/'). Nesse caso, chamando a função para enviar a mensagem *Hello World*!
5. Rode a linha de comando abaixo para iniciar o servidor.

```bash
>node index.js
Example app listening on port 8000
```

6. Vá para a seguinte URL (`http://127.0.0.1:8000/`). Se tudo estiver funcionando corretamente, o browser vai mostrar a mensagem "Hello World!".
### Desenvolvendo dependências

Se você utilizar uma dependência apenas durante o desenvolvimento da aplicação, é recomendado que você a salve como uma "development dependency". Dessa forma, o pacote não será utilizado no ambiente de produção. Por exemplo: caso utilizar o pacote esling (JavaScript Linting), você faria a instalação via NPM da seguinte forma.

```bash
npm install eslint --save-dev
```

Assim, a esling vai aparecer da seguinte forma na lista de dependências do **package.json**.

```json
  "devDependencies": {
    "eslint": "^4.12.1"
  }
```

**Nota:** "Linters" são ferramentas que nos ajudam a identificar e reportar que o código está sendo escrito dentro das melhores práticas.

### Rodando tarefas

Além de definir e buscar dependências, você também pode nomear scripts dentro do seu arquivo **package.json** e chamar o NPM para executá-lo a partir de um run-script command. Essa abordagem é comum para automatizar testes e tarefas ao longo do desenvolvimento (por exemplo: minificar o JavaScript, reduzir imagens, LINT/análise de códigos, etc).

**Nota:** Ferramentas de automação de tarefas como o Gulp e o Grunt também podem ser utilizados, além de outros pacotes externos.

Para definir o script que roda o *esling*, citado na seção acima, nós precisamos adicionar o seguinte bloco no nosso **package.json** (importante: sua aplicação precisa ter como source está na pasta /src/js):

```json
"scripts": {
  ...
  "lint": "eslint src/js"
  ...
}
```

Explicando um pouco mais: `eslint src/js` é o comando que colocamos no nosso terminal para rodar o `eslint` nos arquivos JavaScript situados no diretório `src/js` dentro do diretório do nosso app. Incluindo o comando, criamos o comando de atalho - `lint`.

```bash
npm run-script lint
# OR (using the alias)
npm run lint
```

O exemplo pode não parecer mais curto do que o comando original, mas com o que você aprendeu é possível incluir comandos bem maiores dentro do npm scripts, como as cadeias de múltiplos comandos. Você pode até escrever um único script npm para rodar todos os seus testes de uma só vez.

Instalando o Express Application Generator
------------------------------------------

O Express Application Generator é uma ferramenta que cria "esqueleto" para aplicações Express. A instalação é realizada via NPM como mostrada a seguir (o comando `-g` instala a pacote globalmente, ou seja, você pode acessá-lo de qualquer lugar do seu computador).
```

npm install express-generator -g
```

Para criar um aplicativo Express chamado "helloworld" com as configurações padrões, vá até o local/pasta em que você deseja desenvolver o projeto e escreva a seguinte linha de comando:

```bash
express helloworld
```

**Nota:** Nota: Você também pode definir a biblioteca de template que pretende usar e muitas outras configurações. Use o comando `help` para ver todas as opções.

```bash
express --help
```

O NPM vai criar um novo aplicativo Express em uma subpasta na localização em que você está. O progresso será apresentado no console. Para finalizar, o processo, a ferramenta mostrará os comandos que você precisa seguir para instalar a dependência Node e iniciar o seu app.

**Nota:** O novo app terá um arquivo package.json no diretório raiz. Você pode abrir esse arquivo para checar o que foi instalado, incluindo o Express e Jade (template library) .

```js
{
  "name": "helloworld",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.18.2",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "express": "~4.15.5",
    "jade": "~1.11.0",
    "morgan": "~1.9.0",
    "serve-favicon": "~2.4.5"
  }
}
```

Instale todas as dependências para o app helloworld com o NPM, de acordo com os comandos abaixo:

```bash
cd helloworld
npm install
```

Agora, rode o aplicativo (o comando muda um pouco entre Windows, Linux/macOS), como está no código a seguir:

```bash
# Rode o helloworld no Windows
SET DEBUG=helloworld:* & npm start

# Rode helloworld no Linux/macOS
DEBUG=helloworld:* npm start
```

O comando DEBUG gera um loggin bem útil, apresentando resultados, como abaixo:

```bash
>SET DEBUG=helloworld:* & npm start

> helloworld@0.0.0 start D:\Github\expresstests\helloworld
> node ./bin/www

  helloworld:server Listening on port 3000 +0ms
```

Abre um browser e navegue para `http://127.0.0.1:3000/` e veja a página default apresentada pelo aplicativo.

![Express - Generated App Default Screen](/pt-BR/docs/Learn/Server-side/Express_Nodejs/development_environment/express_default_screen.png)

Vamos falar mais sobre o "gerador" quando chegarmos ao artigo referente à geração de esqueletos de uma aplicação.

Sumário
-------

Agora você tem o desenvolvimento do Node pronto para rodar no seu computador e que pode ser utilizado para criar aplicações web com o framework Express. Você também viu como o NPM é utilizado para importar o Express em sua aplicação e como criar um esqueleto a partir do Express Aplication Generator.

No próximo artigo, nós vamos iniciar um tutorial para construir uma aplicação web completa utilizando esse ambiente junto com as ferramentas.

Veja também
-----------

* Downloads página (nodejs.org)
* Installing Node.js via package manager (nodejs.org)
* Installing Express (expressjs.com)
* Express Application Generator (expressjs.com)
* Anterior
* Menu: Express Nodejs
* Próxima
Outros módulos
--------------

* Express/Node introduction
* Setting up a Node (Express) development environment
* Express Tutorial: The Local Library website
* Express Tutorial Part 2: Creating a skeleton website
* Express Tutorial Part 3: Using a Database (with Mongoose)
* Express Tutorial Part 4: Routes and controllers (en-US)
* Express Tutorial Part 5: Displaying library data (en-US)
* Express Tutorial Part 6: Working with forms (en-US)
* Express Tutorial Part 7: Deploying to production (en-US)


Express: Tutorial para criar o site de uma Biblioteca Local - Aprendendo desenvolvimento web

Express: Tutorial para criar o site de uma Biblioteca Local
===========================================================

* Anterior
* Menu: Express Nodejs
* Próxima

Este artigo tem como objetivo explicar o que você vai aprender ao longo dos próximo tutoriais e dar uma visão geral do projeto que vamos desenvolver: um site de "local library" (Biblioteca Local, em tradução livre).

|  |  |
| --- | --- |
| Pré-requisitos: |
 Leia a
 Indrodução ao Express. Para os próximos artigos, você também precisa ler
 Conhecendo Node como ambiente de desenvolvimento.
  |
| Objetivos: |
 Apresentar a aplicação que será desenvolvida ao longo deste tutorial e
 permitir aos leitores entender quais tópicos serão abordados.
  |

Visão Geral
-----------

Bem-vindo ao tutorial MDN "Express: Tutorial para criar o site de uma Biblioteca Local", no qual vamos desenvolver um website para gerenciar o catálogo de uma biblioteca.

Neste passo a passo você vai:

* Usar a ferramenta *Express Aplication Generator (Gerador de Aplicações Express)* para criar a estrutura do site e da aplicação.
* Iniciar e encerrar o Web Server do Node.
* Usar um banco de dados para armazenar os dados de sua aplicação.
* Criar caminhos para a requisição de diferentes informações e templates ("views") para renderizar os dados em arquivos HTML no browser.
* Trabalhar com formulários.
* Subir sua aplicação para o ambiente de produção (deploy).

Alguns dos itens acima você já conhecebe bem, outros você sabe apenas um pouco. Não se preocupe. Ao final do tutorial, você saberá o sucifiente para desenvolver, por conta própria, um simples app Express.

O site da Biblioteca Local
--------------------------

*LocalLibrary* ou Biblioteca Local é o nome do website que vamos criar durante os tutoriais. O objetivo do site é prover um catálogo para uma pequena biblioteca, onde usuários podem pesquisar livros disponíveis e gerenciar suas contas.

Esse exemplo foi escolhido cuidadosamente. Isso porque para construir a "biblioteca" vamos utilizar recursos básicos e fundamentais do Express, além de funcionalidades e conceitos que você poderá aplicar em qualquer outro website:

* Em nossos primeiros artigos vamos criar uma biblioteca virtual na qual os usuários poderão procurar quais livros estão disponíveis para empréstimo. Tal funcionalidade nos exigirá entender operações padrões em sites web, como leituras e visualizações de conteúdos registrados em banco de dados.
* Durante nosso trabalho, o exemplo da biblioteca se estenderá naturalmente para mais funcionalidades e informações disponíveis na biblioteca. Por exemplo: permitir que novos livros sejam adicionados aos catálogos. Somente essa *feature* nos permitirá aprender sobre o uso de formulários e autenticação de usuários.

Apesar de ser um exemplo bem extenso, nossa Biblioteca Local apresentará o mínimo de informações para ajudar você a entender e se desenvolver melhor no uso do Express. A aplicação terá informações sobre livros, cópias de livros, autores e outras informações-chave. Nós não vamos, no entanto, armazenar informações sobre outros itens que a biblioteca pode emprestar e nem vamos oferecer a infraestrutura necessária para suportar os serviços de uma biblioteca grande (de verdade).

Estou perdido, onde encontro o código-fonte?
--------------------------------------------

Com o avanço nos tutoriais, forneceremos trechos de códigos para você copiar e colar. Você também receberá trechos apenas com códigos iniciais para completá-los e aprimorá-los por conta própria.

Dica: Em vez de simplesmente copiar e colar todos os códigos, a sugestão é digitá-los. Isso ajuda você a se familiarizar com a sintaxe, melhorando o nível de aprendizado.

Se ficar perdido no meio do caminho, fique calmo. Você pode acessar o código inteiro pelo Github.

**Nota:** As versões específicas do Node, Express e outros módulos que adotados no tutorial estão listados no arquivo package.json.

Sumário
-------

Agora que você entedeu o que é o site "Biblioteca Local " e o que vamos aprender ao longo do projeto, é hora de criar nossa estrutura de pastas e arquivos.

* Anterior
* Menu: Express Nodejs
* Próxima


Introdução Express/Node - Aprendendo desenvolvimento web

Introdução Express/Node
=======================

* Menu: Express Nodejs
* Próxima

Neste primeiro artigo sobre Express responderemos as questões " O que é Node?" e "O que é Express?", além de dar a você uma visão geral sobre o que torna o Express um framework web tão especial. Vamos descrever as principais características e mostrar alguns dos principais blocos de códigos de construção de um aplicativo Express (embora neste momento você ainda não tenha um ambiente de desenvolvimento para testá-lo).

|  |  |
| --- | --- |
| Pré-requisitos: |
 Conhecimentos básicos em informática. Uma compreensão geral de
 programação web no lado servidor (backend), em particular, nos mecanismos de
 interação cliente-servidor de websites.
  |
| Objetivos: |
 Familiarizar-se com Express, como este framework trabalha junto ao Node,
 quais as funcionalidades que fornece e quais são os principais blocos de
 construção de um aplicativo Express.
  |

O que é Express e Node ?
------------------------

Node (ou formalmente *Node.js*) é um ambiente em tempo de execução open-source (código aberto) e multiplataforma que permite aos desenvolvedores criarem todo tipo de aplicativos e ferramentas do lado servidor (backend) em JavaScript. Node é usado fora do contexto de um navegador (ou seja executado diretamente no computador ou no servidor). Como tal, o ambiente omite APIs JavaScript específicas do navegador e adiciona suporte para APIs de sistema operacional mais tradicionais, incluindo bibliotecas de sistemas HTTP e arquivos.

Do ponto de vista do desenvolvimento de um servidor web, o Node possui vários benefícios:

* Performance excelente. Node foi projetado para otimizar a taxa de transferência e a escalabilidade em aplicações web. É uma ótima combinação para resolver muitos problemas comuns no desenvolvimento da web (por exemplo, aplicações em tempo real).
* O código é escrito em "JavaScript simples e antigo". Isso significa menos tempo gasto para lidar com mudanças de código entre navegador e servidor web, não sendo necessária uma mudança na linguagem.
* JavaScript é uma linguagem de programação relativamente nova e apresenta algumas vantagens quando comparadas a outras linguagens tradicionais de servidor (por exemplo Python, PHP, etc.). Muitas outras linguagens novas e populares compilam/convertem em JavaScript, permitindo que você também use essas linguagens, como TypeScript, CoffeeScript, ClosureScript, Scala, LiveScript, etc.
* O Gerenciador de Pacotes do Node (NPM, na sigla em inglês) provê acesso a centenas de milhares de pacotes reutiliváveis. NPM possui a melhor coleção de dependências e também pode ser usado para automatizar a maior parte da cadeia de ferramentas de compilação.
* É portátil, com versões para diferentes sistemas operacionais, como Microsoft Windows, OS X, Linux, Solaris, FreeBSD, OpenBSD, WebOS e NonStop. Além disso, tem excelente suporte de muitos provedores de hospedagem na web, que muitas vezes fornecem documentação e infraestrutura específica para hospedar sites desenvolvidos em Node.
* Possui uma comunidade de desenvolvedores e um ecossistema muito ativo, com muitas pessoas dispostas a ajudar.

Você pode utilizar o Node.js para criar um simples servidor web, utilizando o pacote Node HTTP.

### Olá, Node.js

O exemplo a seguir cria um servidor web que escuta qualquer tipo de requisição HTTP na URL `http://127.0.0.1:8000/` — quando uma requisição é recebida, o script vai responder com a string (texto) "Olá Mundo". Se você já instalou o Node, você pode seguir os passos seguintes deste exemplo.

1. Abre o Terminal (no Windows, abra o prompt da linha de comando)
2. Crie uma pasta onde você quer salvar o programa, por exemplo, `test-node`. Então, entre na pasta com o seguinte comando no terminal:
```

cd test-node
```

Use o seu editor de texto preferido, crie um arquivo chamado `hello.js` e cole o código a seguir:

```js
// Carrega o modulo HTTP do Node
var http = require("http");

// Cria um servidor HTTP e uma escuta de requisições para a porta 8000
http
  .createServer(function (request, response) {
    // Configura o cabeçalho da resposta com um status HTTP e um Tipo de Conteúdo
    response.writeHead(200, { "Content-Type": "text/plain" });

    // Manda o corpo da resposta "Olá Mundo"
    response.end("Olá Mundo\n");
  })
  .listen(8000, "127.0.0.1");

// Imprime no console a URL de acesso ao servidor
console.log("Servidor executando em http://127.0.0.1:8000/");
```

Salve o arquivo na pasta que você criou acima.

Por último, vá para o terminal e digite o comando a seguir:

`node hello.js`

Enfim, abra o browser e digite `http://localhost:8000`. Você verá o texto "**Olá, Mundo**", no canto superior esquerdo.

Web Frameworks
--------------

Algumas tarefas comuns no desenvolvimento web não são suportadas diretamente pelo Node. Se você quiser que a sua aplicação possua diferentes verbos HTTP (por exemplo `GET`, `POST`, `DELETE`, etc), que gerencie requisições de diferentes URLs ("rotas"), apresente arquivos estáticos ou utilize templates para mostrar as respostas (response) de maneira dinâmica, você não terá muita praticidade usando apenas o Node. Você terá duas opções. Escrever o código por conta própria ou então evitar todo esse trabalho de reinventar a roda ao utilizar um framework.

Introduzindo o Express
----------------------

Express é o framework Node mais popular e a biblioteca subjacente para uma série de outros frameworks do Node. O Express oferece soluções para:

* Gerenciar requisições de diferentes verbos HTTP em diferentes URLs.
* Integrar "view engines" para inserir dados nos templates.
* Definir as configurações comuns da aplicação web, como a porta a ser usada para conexão e a localização dos modelos que são usados para renderizar a resposta.
* Adicionar novos processos de requisição por meio de "middleware" em qualquer ponto da "fila" de requisições.

O *Express* é bastante minimalista, no entanto, os desenvolvedores têm liberdade para criar pacotes de middleware específicos com o objetivo de resolver problemas específicos que surgem no desenvolvimento de uma aplicação. Há bibliotecas para trabalhar com cookies, sessões, login de usuários, parâmetros de URL, dados em requisições POST, cabeçalho de segurança e tantos outros. Você pode achar uma lista de pacotes de middleware mantidos pela equipe Express em Express Middleware (juntamente com uma lista de pacotes populares desenvolvidos por terceiros).

**Nota:** Essa flexibilidade do Express é uma espada de dois gumes. Há pacotes de middleware para resolver quase qualquer problema ou requisito ao longo do desenvolvimento, mas utilizar os pacotes corretos para cada situação às vezes se torna um grande desafio. Não há "caminho certo" para estruturar um aplicativo. Muitos exemplos que você encontra na Internet não são bons ou mostram apenas uma pequena parte do que você precisa fazer para desenvolver uma aplicação web.

De onde o Node e o Express vieram?
----------------------------------

Node foi inicialmente lançado em 2009, mas naquela época apenas para Linux. O gerenciador de pacotes NPM veio no ano seguinte, 2010, e o suporte nativo do Windows chegou em 2012. A versão atual do Long Term Support (LTS) é o Node v8.9.3, enquanto a versão mais recente é o Node 9. Esse é um resumo da rica histórica do Node, mas é possível conhecer mais na Wikipédia.

O Express foi lançado em novembro de 2010 e atualmente está na versão 4.16 da API. Você pode verificar o changelog para obter informações sobre as mudanças na versão atual e o GitHub para obter notas detalhadas das versões históricas.

O quão popular é Node/Express ?
-------------------------------

É importante considerar a popularidade de um framework web porque indica se a ferramenta continuará sendo mantida e atualizada, além de apontar quais recursos provavelmente estarão disponíveis na documentação, nas bibliotecas de complemento e no suporte técnico.

Não há nenhum número capaz de medir precisamente a popularidade de um framework (apesar de que alguns sites como o Hot Frameworks avaliarem a popularidade a partir do número de projetos do GitHub e do número de perguntas do StackOverflow relativas a cada tecnologia). Diante dessa limitação, o mais importante é fazermos algumas outras perguntas para saber se o Node e o Express são "suficientemente populares" para não caírem nos problemas clássicos das tecnologias com pouca adesão da comunidade.

O Node e o Express continuam a evoluir ? Você pode obter ajuda na comunidade caso precise? Existe uma oportunidade para você receber trabalho remunerado ao dominar o Node e o Express ?

Baseado no número de empresas de alto perfil que usam Express, no número de pessoas contribuindo para o código base, e no número de pessoas que oferecem suporte (gratuito ou pago), a reposta é sim. O Node e o Express são tecnologias populares!

Express é opinativo ?
---------------------

Os frameworks web costumam se autodeclararem "opinativos" ou "não opinativos".

Os frameworks opinativos são aqueles com "opiniões" sobre o "caminho certo" para lidar com qualquer tarefa específica. Muitas vezes, apoiam o desenvolvimento rápido em um domínio particular (resolvendo problemas de um tipo específico) porque a maneira correta de fazer qualquer coisa geralmente é bem compreendida e bem documentada. No entanto, são menos flexíveis na resolução de problemas fora de seu domínio principal e tendem a oferecer menos opções para quais componentes e abordagens podem usar nesses casos.

Frameworks não opinativos, por outro lado, têm muito menos restrições sobre a melhor maneira de utilizar componentes para atingir um objetivo, ou mesmo quais componentes devem ser usados. Eles tornam mais fácil para os desenvolvedores usar as ferramentas mais adequadas para completar uma tarefa específica, embora você precise encontrar esses componentes por si próprio.

Express é um framework não opinativo. Você pode inserir qualquer middleware que você goste no manuseio das solicitações em quase qualquer ordem que desejar. Pode estruturar o aplicativo em um arquivo ou em vários, usar qualquer estrutura de pastas dentro do diretório principal, etc.

Como se parece o código do Express ?
------------------------------------

Em um site tradicional baseado em dados, um aplicativo da Web aguarda pedidos HTTP do navegador da web (ou outro cliente). Quando um pedido é recebido, o aplicativo descreve quais ações são necessárias com base no padrão de URL e possivelmente informações associadas contidas em dados POST ou GET. Dependendo do que é necessário, pode-se ler ou escrever informações em um banco de dados ou executar outras tarefas necessárias para satisfazer a solicitação. O aplicativo retornará uma resposta ao navegador da Web, criando, de forma dinâmica, uma página HTML para o navegador, exibindo e inserindo os dados recuperados em espaços reservados em um modelo HTML.

Express fornece métodos para especificar qual função é chamada quando chega requisição HTTP (GET, POST, SET, etc.) e de rotas e métodos para especificar o mecanismo de modelo ("view") usado, onde o modelo arquivos estão localizados e qual modelo usar para renderizar uma resposta. Você pode usar o middleware Express para adicionar suporte para cookies, sessões e usuários, obtendo parâmetros POST / GET, etc. Você pode usar qualquer mecanismo de banco de dados suportado por Node (o Express não define nenhum comportamento relacionado a banco de dados).

As seções a seguir explicam algumas das coisas comuns que você verá ao trabalhar com o código Express e Node.

### Olá Mundo Express

Primeiro, considere o padrão do exemplo do Express Olá Mundo (discutiremos cada trecho do código nas seções abaixo e nas seções a seguir).

**Nota:** **Dica:** Se você tiver o Node e o Express já instalados (ou se você os instalar como mostrado no próximo artigo, você pode salvar este código em um arquivo chamado **app.js** e executá-lo em um prompt, ao digitar o comando `node app.js`.

```js
var express = require("express");
var app = express();

app.get("/", function (req, res) {
  res.send("Olá Mundo!");
});

app.listen(3000, function () {
  console.log("App de Exemplo escutando na porta 3000!");
});
```

As duas primeiras linhas `require()` importam o módulo Express e criam uma aplicação Express. Esse objeto (tradicionalmente nomeado de `app`), tem métodos de roteamento de requisições HTTP, configurações de middleware, renderização de views HTML, registro de engines de templates e modificação das configurações que controlam como o aplicativo se comporta (por exemplo, o modo de ambiente, se as definições de rota são sensíveis a maiúsculas e minúsculas, etc).

A parte do meio do código (as três linhas que começam com `app.get`) mostra uma definição de rota. O método `app.get()` especifica uma função de retorno de chamada que será invocada sempre que exista uma solicitação HTTP `GET` com um caminho (`'/'`) relativo à raiz do site. A função de retorno de chamada requer uma solicitação e um objeto de resposta como argumentos, e simplesmente chama `send()` na resposta para retornar a string "Olá Mundo!"

O bloco final inicia o servidor na porta '3000' e imprime um comentário de log no console. Com o servidor em execução, você pode acessar o `localhost:3000` em seu navegador para ver o exemplo de resposta retornado.

### Importando e criando módulos

Um módulo é uma biblioteca/arquivo de JavaScript que você pode importar para outro código usando a função `require()` do Node. Express por si é um módulo, assim como as bibliotecas de middleware e banco de dados que usamos em nossos aplicativos Express.

O código abaixo mostra como importamos um módulo por nome, usando o quadro Express como um exemplo. Primeiro invocamos a função `require()`, especificando o nome do módulo como uma string (`'express'`), e chamando o objeto retornado para criar um aplicativo Express. Podemos então acessar as propriedades e funções do objeto da aplicação.

```js
var express = require("express");
var app = express();
```

Você também pode criar seus próprios módulos para serem importados da mesma maneira.

**Nota:** **Dica:** Você vai ***querer*** criar seus próprios módulos porque isso permite que você organize seu código em peças gerenciáveis - um aplicativo monolítico (de arquivo único) é difícil de entender e manter. O uso de módulos também ajuda você a gerenciar o namespace, pois somente as variáveis que você exporta explicitamente são importadas quando você usa um módulo.

Para tornar os objetos disponíveis fora do módulo, você precisa apenas atribuí-los ao objeto `exports`. Por Exemplo, o módulo **square.js** abaixo é um arquivo que exporta os métodos `area()` e `perimeter()`:

```js
exports.area = function (width) {
  return width \* width;
};
exports.perimeter = function (width) {
  return 4 \* width;
};
```

Nós podemos importar este módulo usando `require()`. Depois, conecte ao(s) método(s) exportado(s) como mostrado a seguir:

```js
var square = require("./square"); // Chamamos o arquivo utilizando o require()
console.log("The area of a square with a width of 4 is " + square.area(4));
```

**Nota:** Você também pode especificar um caminho absoluto para o módulo (ou um nome, como fizemos inicialmente).

Se você deseja exportar um objeto completo em uma atribuição, em vez de criar uma propriedade de cada vez, atribua ao module.exports como mostrado abaixo (você também pode fazer isso para tornar a raiz do objeto exporter um construtor ou outra função):

```js
module.exports = {
  area: function (width) {
    return width \* width;
  },

  perimeter: function (width) {
    return 4 \* width;
  },
};
```

Para muitas outras informações sobre módulos veja Módulos (Node API docs).

### Usando APIs assíncronas

O código JavaScript frequentemente usa APIs assíncronas em vez de síncronas para operações que podem levar algum tempo para serem concluídas. Uma API síncrona é aquela em que cada operação deve ser concluída antes que a próxima operação seja iniciada. Por exemplo, as seguintes funções de log são síncronas e imprimirão o texto no console em ordem (Primeiro, Segundo).

```js
console.log("Primeiro");
console.log("Segundo");
```

Em contrapartida, uma API assíncrona é aquela em que a API iniciará uma operação e retornará imediatamente (antes da conclusão da operação). Assim que a operação terminar, a API usará algum mecanismo para executar operações adicionais. Por exemplo, o código abaixo imprimirá "Segundo, Primeiro". Isso porque, mesmo que o método `setTimeout()` seja chamado primeiro e retornae imediatamente, a operação precisa de três segundos para finalizar.

```js
setTimeout(function () {
  console.log("Primeiro");
}, 3000);
console.log("Segundo");
```

O uso de APIs assíncronas não bloqueadoras é ainda mais importante no Node do que no navegador, pois o Node é um ambiente de execução orientado por evento único (single threaded). "Single threaded" significa que todos os pedidos para o servidor são executados no mesmo tópico (em vez de serem gerados em processos separados). Esse modelo é extremamente eficiente em termos de velocidade e recursos do servidor, mas isso significa que, se qualquer uma das suas funções chamar métodos síncronos que demoram muito para completar, eles bloquearão não apenas a solicitação atual, mas todas as outras solicitações serão tratadas por sua aplicação web.

Há várias maneiras de uma API assíncrona notificar para a aplicação que alguma função chegou ao fim. A maneira mais comum é registrar uma função de retorno de chamada quando você invoca a API assíncrona, que será chamada de volta quando a operação for concluída. Usamos essa abordagem acima.

**Nota:** **Dica:** O uso de callbacks pode ser bastante "bagunçado" se você tiver uma sequência de operações assíncronas dependentes que devem ser executadas em ordem, porque isto resulta em multiplo níveis de callbacks aninhados. Este problema é comumente conhecido como "inferno de callback" ou "código hadouken". Pode-se reduzir o problema ao adotar boas práticas de programação (veja http://callbackhell.com/), utilizar um módulo como async, ou mesmo adotar recursos do ES6, como Promises.

**Nota:** **Dica:** Uma convenção comum para Node e Express é usar as devoluções de retorno de erro. Nesta convenção, o primeiro valor em suas funções de retorno de chamada é um valor de erro, enquanto os argumentos subseqüentes contêm dados de sucesso. Há uma boa explicação de por que essa abordagem é útil neste blog: The Node.js Way - Understanding Error-First Callbacks (fredkschott.com).

### Criando manipuladores de rotas

No nosso *Olá Mundo* em Express (veja acima), nós definimos uma (callback) função manipuladora de rota para requisição `GET` HTTP para a raiz do site (`'/'`).

```js
app.get("/", function (req, res) {
  res.send("Olá Mundo");
});
```

A função de retorno de chamada requer uma solicitação e um objeto de resposta como argumento. Neste caso, o método simplesmente chama `send()` na resposta para retornar a string "Olá Mundo!" Há uma série de outros métodos de resposta para encerrar o ciclo de solicitação / resposta, por exemplo, você poderia chamar `res.json()` para enviar uma resposta JSON ou `res.sendFile()` para enviar um arquivo.

**Nota:** **Dica JavaScript:** Você pode usar qualquer argumento que você gosta nas funções de retorno de chamada. Quando o retorno de chamada é invocado, o primeiro argumento sempre será o pedido e o segundo sempre será a resposta. Faz sentido nomeá-los de tal forma que você possa identificar o objeto que você está trabalhando no corpo do retorno de chamada.

O Express também fornece métodos para definir manipuladores de rotas para todas as outras requisições HTTP, que são usadas exatamente da mesma maneira: `post()`, `put()`, `delete()`, `options()`, `trace()`, `copy()`, `lock()`, `mkcol()`, `move()`, `purge()`, `propfind()`, `proppatch()`, `unlock()`, `report()`, `mkactivity()`, `checkout()`, `merge()`, `m-search()`, `notify()`, `subscribe()`, `unsubscribe()`, `patch()`, `search()`, e `connect()`.

Há um método de roteamento especial, `app.all()`, que será chamado em resposta a qualquer método HTTP. É usado para carregar funções de middleware em um caminho específico para todos os métodos de solicitação. O exemplo a seguir (da documentação Express) mostra um manipulador que será executado para solicitações `/secret`, independentemente do verbo HTTP usado (desde que seja suportado pelo módulo http).

```js
app.all("/secret", function (req, res, next) {
  console.log("Acessando a sessão secreta...");
  next(); // passa o controle para o próximo manipulador
});
```

As rotas permitem combinar padrões de caracteres específicos em um URL e extrair alguns valores do URL e passá-los como parâmetros para o manipulador de rotas (como atributos do objeto de solicitação passado como parâmetro).

Muitas vezes, é útil agrupar manipuladores de rotas para uma determinada parte de um site e acessá-los usando um prefixo de rota comum (por exemplo, um site com um Wiki pode ter todas as rotas relacionadas ao wiki em um arquivo e tê-los acessado com um prefixo de rota de / wiki /). Em Express, isso é alcançado usando o objeto `express.Router`. Por exemplo, podemos criar nossa rota wiki em um módulo chamado wiki.js e, em seguida, exportar o objeto `Router`, conforme mostrado abaixo:

```js
// wiki.js - Rotas de Wiki

var express = require("express");
var router = express.Router();

// Home page route
router.get("/", function (req, res) {
  res.send("Wiki home page");
});

// About page route
router.get("/about", function (req, res) {
  res.send("About this wiki");
});

module.exports = router;
```

**Nota:** Adicionar rotas ao objeto `Router` é como adicionar rotas ao objeto `app` (como mostrado anteriormente).

Para usar o roteador em nosso arquivo de aplicativo principal, então, `require()` o módulo de rota (**wiki.js**) e depois `use()` no aplicativo Express para adicionar o Router ao caminho de gerenciamento de middleware. As duas rotas serão acessíveis a partir de `/wiki/` e `/wiki/about/`.

```js
var wiki = require("./wiki.js");
// ...
app.use("/wiki", wiki);
```

Vamos mostrar-lhe muito mais sobre trabalhar com rotas e, em particular, sobre o uso do `Router`, mais tarde, na seção vinculada Rotas e controladores (en-US).

### Usando middleware

O Middleware é usado extensivamente em aplicativos Express para que as tarefas ofereçam arquivos estáticos ao tratamento de erros, a comprensão de respostas HTTP. Enquanto as funções de rota terminam o ciclo de solicitação-resposta HTTP, retornando alguma resposta ao cliente HTTP, as funções de middleware normalmente executam alguma operação na solicitação ou resposta e, em seguida, ligue para a próxima função na "pilha", que pode ser mais um middleware ou uma rota manipuladora. A ordem em que o middleware é chamado depende do desenvolvedor do aplicativo.

**Nota:** O middleware pode executar qualquer operação, executar qualquer código, fazer alterações no objeto de solicitação e resposta, e também pode encerrar o ciclo de solicitação-resposta. Se não terminar o ciclo, ele deve chamar o `next()` para passar o controle para a próxima função de middleware (ou a solicitação ficará pendurada).

A maioria dos aplicativos usará middleware de terceiros para simplificar tarefas comuns de desenvolvimento web, como trabalhar com cookies, sessões, autenticação de usuários, acessar dados `POST` e JSON, log, etc. Você pode encontrar uma lista de pacotes de middleware mantidos pela equipe Express (que também inclui outros pacotes populares de terceiros). Outros pacotes Express estão disponíveis no gerenciador de pacotes do NPM.

Para usar middleware de terceiros, primeiro você precisa instalá-lo em seu aplicativo usando NPM. Por exemplo, para instalar o logger morgan HTTP, você faria isso:

```bash
npm install morgan
```

Você pode então chamar `use()` no objeto do aplicativo Express para adicionar o middleware à pilha:

```js
var express = require('express');
var logger = require('morgan');
var app = express();
app.use(logger('dev'));
...
```

**Nota:** O middleware e as funções de roteamento são chamadas na ordem em que são declaradas. Para alguns middleware, a ordem é importante (por exemplo, se o middleware de sessão depende do middleware de cookies, então o manipulador de cookies deve ser adicionado primeiro). É quase sempre o caso em que o middleware é chamado antes de definir rotas, ou seus manipuladores de rotas não terão acesso à funcionalidade adicionada pelo seu middleware.

Você pode escrever suas próprias funções de middleware. É provável que você tenha que fazê-lo (somente para criar código de manipulação de erro). A única diferença entre uma função de middleware e um retorno de chamada de manipulador de rotas é que as funções de middleware têm um terceiro argumento `next`, que as funções de middleware devem chamar se não completam o ciclo de solicitação (quando a função de middleware é chamada, isso contém a próxima função que deve ser chamado).

Você pode adicionar uma função de middleware à cadeia de processamento com `app.use()` ou `app.add()`, dependendo se você deseja aplicar o middleware a todas as respostas ou a respostas com um verbo HTTP específico (`GET`, `POST`, etc. ). Você especifica rotas o mesmo em ambos os casos, embora a rota seja opcional ao chamar **app.use()**.

O exemplo abaixo mostra como você pode adicionar a função middleware usando ambos os métodos e com/sem rota.

```js
var express = require("express");
var app = express();

// Um exemplo de função middleware
var a\_middleware\_function = function (req, res, next) {
  // ... Executa alguma operação
  next(); // next() Chama o próximo middleware ou função de rotas
};

// Função adicionada com use() para todas rotas e requisições
app.use(a_middleware_function);

// Função adicionada com use() para uma rota específica
app.use("/someroute", a_middleware_function);

// função middleware adicionado para uma rota e requisição específica
app.get("/", a_middleware_function);

app.listen(3000);
```

**Nota:** **Dica JavaScript:** Acima, declaramos a função de middleware separadamente e, em seguida, configuramos como retorno de chamada. Na nossa função anterior do operador de rotas, declaramos a função de retorno de chamada quando foi utilizada. Em JavaScript, ambas abordagens são válidas.

A documentação Express possui uma documentação excelente sobre como usar e escrever o middleware Express.

### Servindo arquivos estáticos

Você pode usar o middleware express.static para servir arquivos estáticos, incluindo suas imagens, CSS e JavaScript (`static()` é a única função de middleware que é realmente parte do Express). Por exemplo, você usaria a linha abaixo para exibir imagens, arquivos CSS e arquivos JavaScript de um diretório chamado 'public' no mesmo nível onde você chama o nó:

```js
app.use(express.static("public"));
```

Todos os arquivos no diretório público são atendidos adicionando o nome do arquivo (relativo ao diretório "público" base) ao URL base. Então, por exemplo:
```

http://localhost:3000/images/dog.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/about.html
```

Você pode chamar `static()` várias vezes para atender vários diretórios. Se um arquivo não puder ser encontrado por uma função de middleware, ele simplesmente será transmitido ao middleware subsequente (a ordem em que o middleware é chamado é baseada em sua ordem de declaração).

```js
app.use(express.static("public"));
app.use(express.static("media"));
```

Você também pode criar um prefixo virtual para seus URL estáticos, em vez de ter os arquivos adicionados ao URL base. Por exemplo, aqui especificamos um caminho de montagem para que os arquivos sejam carregados com o prefixo "/media":

```js
app.use("/media", express.static("public"));
```

Agora, você pode carregar os arquivos que estão no diretório `public` a partir do prefixo de caminho `/media`.
```

http://localhost:3000/media/images/dog.jpg
http://localhost:3000/media/video/cat.mp4
http://localhost:3000/media/cry.mp3
```

Para obter mais informações, consulte Servindo arquivos estáticos no Express.

### Erros de manipulação

Os erros são tratados por uma ou mais funções de middleware especiais que possuem quatro argumentos, em vez dos três habituais: `(err, req, res, next)`. Por exemplo:

```js
app.use(function (err, req, res, next) {
  console.error(err.stack);
  res.status(500).send("Something broke!");
});
```

Isso pode retornar qualquer conteúdo exigido, mas deve ser chamado depois de todas as outras chamadas `app.use()` e rotas para que sejam o último middleware no processo de solicitação de pedidos!

Express vem com um manipulador de erros embutido, que cuida de todos os erros que podem ser encontrados no aplicativo. Essa função de middleware de gerenciamento de erros padrão é adicionada no final da pilha de funções do middleware. Se você passar um erro para `next()` e você não lidar com isso em um manipulador de erro, ele será tratado pelo manipulador de erros incorporado; o erro será gravado no cliente com o rastreamento da pilha.

**Nota:** O rastreamento da pilha não está incluído no ambiente de produção. Para executá-lo no modo de produção, você precisa configurar a variável de ambiente `NODE_ENV` para `'production'`.

**Nota:** HTTP404 e outros códigos de status de "erro" não são tratados como erros. Se você quiser lidar com isso, você pode adicionar uma função de middleware para fazê-lo. Para mais informações, consulte as FAQ.

Para obter mais informações, consulte Gerenciamento de erros (Express docs).

### Usando Banco de Dados

Aplicativos Express podem usar qualquer mecanismo de banco de dados suportado pelo Node (o Express em si não define nenhum comportamento/requisitos adicionais específicos para gerenciamento de banco de dados). Existem muitas opções, incluindo PostgreSQL, MySQL, Redis, SQLite, MongoDB, etc.

Para usá-los, você deve primeiro instalar o driver do banco de dados usando NPM. Por exemplo, para instalar o driver para o popular NoSQL MongoDB você usaria o comando:

```bash
npm install mongodb
```

O próprio banco de dados pode ser instalado localmente ou em um servidor em nuvem. No seu código Express, você precisa do driver, conecte-se ao banco de dados e execute as operações criar, ler, atualizar e excluir (CRUD). O exemplo abaixo (da documentação Express) mostra como você pode encontrar registros de "mamíferos" usando MongoDB.

```js
var MongoClient = require("mongodb").MongoClient;

MongoClient.connect("mongodb://localhost:27017/animals", function (err, db) {
  if (err) throw err;

  db.collection("mammals")
    .find()
    .toArray(function (err, result) {
      if (err) throw err;

      console.log(result);
    });
});
```

Outra abordagem popular é acessar seu banco de dados indiretamente, através de um Object Relational Mapper ("ORM"). Nesta abordagem, você define seus dados como "objetos" ou "modelos" e o ORM mapeia estes para o formato de banco de dados subjacente. Esta abordagem tem o benefício de que, como desenvolvedor, você pode continuar a pensar em termos de objetos JavaScript, em vez de semântica de banco de dados, e que existe um local óbvio para realizar a validação e verificação de dados recebidos. Falaremos mais sobre bancos de dados em um artigo posterior.

Para obter mais informações, consulte integração com banco de dados (documentos express).

### Renderizando dados (views)

Os mecanismos de modelo (referidos como "view engines" por Express) permitem que você especifique a estrutura de um documento de saída em um modelo, usando marcadores de posição para os dados que serão preenchidos quando uma página for gerada. Os modelos geralmente são usados para criar HTML, mas também podem criar outros tipos de documentos. Express tem suporte para uma série de mecanismos de modelos, e há uma comparação útil dos motores mais populares aqui: Comparing JavaScript Templating Engines: Jade, Mustache, Dust and More.

No seu código de configurações do aplicativo você configurou o mecanismo do modelo para usar e o local onde Express deve procurar modelos usando as configurações 'visualizações' e 'visualizar mecanismos', conforme mostrado abaixo (você também terá que instalar o pacote que contém a biblioteca do modelo também !)

```js
var express = require("express");
var app = express();

// Definir o diretório para conter os modelos ('views')
app.set("views", path.join(__dirname, "views"));

// Definir o motor de visualização para usar, neste caso 'some\_template\_engine\_name'
app.set("view engine", "some\_template\_engine\_name");
```

A aparência do modelo dependerá do mecanismo que você usa. Supondo que você tenha um arquivo de modelo chamado "índice. <Template\_extension>" que contenha espaços reservados para variáveis de dados denominadas 'título' e 'mensagem', você chamaria `Response.render()` em uma função de roteador de rotas para criar e enviar a resposta HTML :

```js
app.get("/", function (req, res) {
  res.render("index", { title: "About dogs", message: "Dogs rock!" });
});
```

Para obter mais informações, consulte usando motores de modelo com Express (Express docs).

### Estrutura de Arquivos

Express não faz suposições em termos de estrutura ou quais os componentes que você usa. Rotas, visualizações, arquivos estáticos e outra lógica específica da aplicação podem viver em qualquer número de arquivos com qualquer estrutura de diretório. Embora seja perfeitamente possível ter todo o aplicativo Express em um único arquivo, geralmente faz sentido dividir seu aplicativo em arquivos com base em função (por exemplo, gerenciamento de contas, blogs, fóruns de discussão) e domínio de problema arquitetônico (por exemplo, modelo, exibição ou controlador se você está usando uma arquitetura MVC).

Em um tópico posterior, usaremos o Express Application Generator, que cria um esqueleto de aplicativo modular que podemos estender facilmente para criar aplicativos da web.

Sumário
-------

Parabéns, você completou o primeiro passo em sua viagem Express/Node! Agora você deve entender os principais benefícios do Express e Node, e aproximadamente o que as principais partes de um aplicativo Express podem ser (rotas, middleware, tratamento de erros e código de modelo). Por ser um framework não opinativo, o Express permite que você defina a maneira como essas partes e essas bibliotecas são integradas.

Claro que Express é deliberadamente uma estrutura de aplicativos web muito leve, tanto seu benefício e potencial vem de bibliotecas e recursos de terceiros. Examinaremos essa questão com mais detalhes nos próximos artigos. No artigo a seguir, vamos analisar a criação de um ambiente de desenvolvimento de Node, para que você possa começar a ver algum código Express em ação.

Veja também
-----------

* Venkat.R - Manage Multiple Node versions
* Modules (Node API docs)
* Express (home page)
* Basic routing (Express docs)
* Routing guide (Express docs)
* Using template engines with Express (Express docs)
* Using middleware (Express docs)
* Writing middleware for use in Express apps (Express docs)
* Database integration (Express docs)
* Serving static files in Express (Express docs)
* Error handling (Express docs)
* Menu: Express Nodejs
* Próxima
Próximos módulos
----------------

* Introdução Express/Node - Módulo Atual
* Configurando um ambiente de desenvolvimento Node (Express)
* Express Tutorial: The Local Library website
* Express Tutorial Part 2: Criando um esqueleto de website
* Express Tutorial Part 3: Utilizando Banco de Dados (com Mongoose)
* Express Tutorial Part 4: Rotas e Controladores (en-US)
* Express Tutorial Part 5: Displaying library data (en-US)
* Express Tutorial Part 6: Trabalhando com formulários (en-US)
* Express Tutorial Part 7: Deploying to production (en-US)


Express Tutorial Parte 2: Criando a estrutura do website - Aprendendo desenvolvimento web

Express Tutorial Parte 2: Criando a estrutura do website
========================================================

* Anterior
* Menu: Express Nodejs
* Próxima

Neste segundo Tutorial Express, mostrará como criar a estrutura do website que depois você poderá colocar *templates,* chamadas de banco de dados ou rotas específicas.

|  |  |
| --- | --- |
| Pré-requisitos: | Preparar o ambiente de desenvolvimento do Node . Revise o Tutorial Express. |
| Objetivo: | Iniciar nosso website usando o "*Express Application Generator"*. |

Visão Geral
-----------

Nesse artigo mostraremos como criar a estrutura do website usando a ferramenta "Express Application Generator ". Neste caso, usaremos a ferramenta para criar o framework para nosso website "LocalLibrary", para o qual adicionaremos mais tarde todo o outro código necessário para o site. O processo é extremamente simples, com apenas a requisição de invocar o "Generator" na linha de comando com um novo nome de projeto, e, se quiser, especificar o *template* do site e o gerador de CSS.

As seguintes sessões mostrará como chamar o "Application Generator", e prover uma pequena explicação sobre as diferentes opções de CSS. Também aprenderemos como a estrutura do site é definida. No final, será mostrado como podemos rodar o site para ver se funciona.

**Nota:** **Nota**: O "*Express Application Generator"* não é o único gerador para as aplicações do Express, e o projeto gerado não é a única maneira viável de estruturar seus arquivos e diretórios. O site gerado, entretanto, tem uma estrutura modular que é fácil de extender e ser entendida. Para aprender melhor sobre a aplicação do "*minimal* Express", veja Exemplo"Hello world".

Usando o "Application Generator"
--------------------------------

Você já deve ter instalado o gerador como requisito. Como um lembrete rápido, você instala a ferramenta de gerador em todo o site usando o Gerenciador de pacotes NPM, como mostrado:

```bash
npm install express-generator -g
```

O gerador tem algumas opções que podem ser visualizadas usando o comando `--help` (or `-h`):

```bash
> express --help

    Usage: express [options] [dir]

  Options:

        --version        output the version number
    -e, --ejs            add ejs engine support
        --pug            add pug engine support
        --hbs            add handlebars engine support
    -H, --hogan          add hogan.js engine support
    -v, --view <engine>  add view <engine> support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
        --no-view        use static html instead of view engine
    -c, --css <engine>   add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
        --git            add .gitignore
    -f, --force          force on non-empty directory
    -h, --help           output usage information
```

Você pode simplesmente especificar `express` para criar um projeto dentro do diretório atual usando *Jade* view e CSS simples (se você especificar um nome de diretório, o projeto será criado em uma subpasta com esse nome).

```bash
express
```

Também pode ser escolhido um "view" (*template)* usando`--view` e/ou um gerador de CSS usando `--css`.

**Nota:** As outras opções para escolher os mecanismos de modelo (e.g. `--hogan`, `--ejs`, `--hbs` etc.) são preteridas. Use `--view` (ou `-v`)!

### Qual *engine* de "view" devo usar?

O *Express Application Generator* permite que você configure vários mecanismos populares de exibição/modelagem, incluindo EJS, Hbs, Pug (Jade), Twig, e Vash, embora escolha Jade por padrão se você não especificar uma opção de visualização. O próprio Express também pode suportar um grande número de outras linguagens de modelagem out of the box.

**Nota:** Se você deseja usar um mecanismo de modelo que não é suportado pelo gerador, consulte Usando mecanismos de modelo com o Express (Express docs) e a documentação para seu mecanismo de exibição de destino.

De um modo geral, você deve selecionar um mecanismo de modelagem que forneça todas as funcionalidades de que você precisa e permita que você seja mais produtivo - ou em outras palavras, da mesma forma que você escolhe qualquer outro componente! Algumas das coisas a considerar ao comparar mecanismos de modelo:

* Tempo para produtividade — Se sua equipe já tiver experiência com uma linguagem de modelagem, é provável que eles sejam produtivos mais rapidamente usando essa linguagem. Caso contrário, você deve considerar a curva de aprendizado relativa para mecanismos de modelagem candidatos.
* Popularidade e atividade — Revise a popularidade do mecanismo e se ele possui uma comunidade ativa. É importante poder obter suporte para o mecanismo quando você tiver problemas durante a vida útil do site.
* Style — Alguns mecanismos de modelo usam marcação específica para indicar o conteúdo inserido no HTML "comum", enquanto outros constroem o HTML usando uma sintaxe diferente (por exemplo, usando recuo e nomes de bloco).
* Performance/rendering time.
* Features — você deve considerar se os mecanismos que você procura têm os seguintes recursos disponíveis:
    + Layout inheritance: Allows you to define a base template and then "inherit" just the parts of it that you want to be different for a particular page. This is typically a better approach than building templates by including a number of required components or building a template from scratch each time.
    + "Include" support: Allows you to build up templates by including other templates.
    + Concise variable and loop control syntax.
    + Ability to filter variable values at template level (e.g. making variables upper-case, or formatting a date value).
    + Ability to generate output formats other than HTML (e.g. JSON or XML).
    + Support for asynchronous operations and streaming.
    + Can be used on the client as well as the server. If a templating engine can be used on the client this allows the possibility of serving data and having all or most of the rendering done client-side.

**Nota:** **Tip:** Existem muitos recursos na Internet para ajudá-lo a comparar as diferentes opções!

Para este projeto, usaremos o Pug mecanismo de modelagem (este é o mecanismo Jade que foi renomeado recentemente), pois esta é uma das linguagens de modelagem Express/JavaScript mais populares e é suportada imediatamente pelo gerador.

### What CSS stylesheet engine should I use?

The *Express Application Generator* allows you to create a project that is configured to use the most common CSS stylesheet engines: LESS, SASS, Compass, Stylus.

>
> \*\*Nota:\*\*CSS has some limitations that make certain tasks difficult. CSS stylesheet engines allow you to use more powerful syntax for defining your CSS and then compile the definition into plain-old CSS for browsers to use.
>
>
>

Assim como nos mecanismos de modelagem, você deve usar o mecanismo de folha de estilo que permitirá que sua equipe seja mais produtiva. Para este projeto, usaremos o CSS comum (o padrão), pois nossos requisitos de CSS não são suficientemente complicados para justificar o uso de qualquer outra coisa.

### What database should I use?

The generated code doesn't use/include any databases. *Express* apps can use any database mechanism supported by *Node* (*Express* itself doesn't define any specific additional behavior/requirements for database management).

We'll discuss how to integrate with a database in a later article.

Creating the project
--------------------

For the sample *Local Library* app we're going to build, we'll create a project named *express-locallibrary-tutorial* using the *Pug* template library and no CSS stylesheet engine.

Primeiro, navegue até onde deseja criar o projeto e, em seguida, execute o Express Application Generator no prompt de comando, conforme mostrado:

```bash
express express-locallibrary-tutorial --view=pug
```

The generator will create (and list) the project's files.

```bash
   create : express-locallibrary-tutorial\
   create : express-locallibrary-tutorial\public\
   create : express-locallibrary-tutorial\public\javascripts\
   create : express-locallibrary-tutorial\public\images\
   create : express-locallibrary-tutorial\public\stylesheets\
   create : express-locallibrary-tutorial\public\stylesheets\style.css
   create : express-locallibrary-tutorial\routes\
   create : express-locallibrary-tutorial\routes\index.js
   create : express-locallibrary-tutorial\routes\users.js
   create : express-locallibrary-tutorial\views\
   create : express-locallibrary-tutorial\views\error.pug
   create : express-locallibrary-tutorial\views\index.pug
   create : express-locallibrary-tutorial\views\layout.pug
   create : express-locallibrary-tutorial\app.js
   create : express-locallibrary-tutorial\package.json
   create : express-locallibrary-tutorial\bin\
   create : express-locallibrary-tutorial\bin\www

   change directory:
     > cd express-locallibrary-tutorial

   install dependencies:
     > npm install

   run the app:
     > SET DEBUG=express-locallibrary-tutorial:* & npm start
```

At the end of the output, the generator provides instructions on how you install the dependencies (as listed in the **package.json** file) and then how to run the application (the instructions above are for Windows; on Linux/macOS they will be slightly different).

**Nota:** When using Windows, the && and & assumes you are using the Command Prompt. If you are using the new default PowerShell terminal do not concatenate the commands with && and &. Instead set the DEBUG environment variable with $ENV:DEBUG = "express-locallibrary-tutorial:\*";. The npm start can be followed by the npm start.

Running the skeleton website
----------------------------

At this point, we have a complete skeleton project. The website doesn't actually *do* very much yet, but it's worth running it to show how it works.

1. First, install the dependencies (the `install` command will fetch all the dependency packages listed in the project's **package.json** file).

```bash
cd express-locallibrary-tutorial
npm install
```

2. Then run the application.
    * On Windows, use this command:
     bash
    ```bash
    SET DEBUG=express-locallibrary-tutorial:* & npm start

    ```
    * On macOS or Linux, use this command:
     bash
    ```bash
    DEBUG=express-locallibrary-tutorial:* npm start

    ```
3. Then load `http://localhost:3000/` in your browser to access the app.

You should see a browser page that looks like this:

![Browser for default Express app generator website](/pt-BR/docs/Learn/Server-side/Express_Nodejs/skeleton_website/expressgeneratorskeletonwebsite.png)

You have a working Express application, serving itself to *localhost:3000*.

**Nota:** You could also start the app just using the `npm start` command. Specifying the DEBUG variable as shown enables console logging/debugging. For example, when you visit the above page you'll see debug output like this:

```bash
>SET DEBUG=express-locallibrary-tutorial:* & npm start

> express-locallibrary-tutorial@0.0.0 start D:\github\mdn\test\exprgen\express-locallibrary-tutorial
> node ./bin/www

  express-locallibrary-tutorial:server Listening on port 3000 +0ms
GET / 304 490.296 ms - -
GET /stylesheets/style.css 200 4.886 ms - 111
```

Enable server restart on file changes
-------------------------------------

Any changes you make to your Express website are currently not visible until you restart the server. It quickly becomes very irritating to have to stop and restart your server every time you make a change, so it is worth taking the time to automate restarting the server when needed.

One of the easiest such tools for this purpose is nodemon. This is usually installed globally (as it is a "tool"), but here we'll install and use it locally as a *developer dependency*, so that any developers working with the project get it automatically when they install the application. Use the following command in the root directory for the skeleton project:

```bash
npm install --save-dev nodemon
```

If you still choose to install nodemon globally to your machine, and not only to your project's **package.json** file:

```bash
npm install -g nodemon
```

If you open your project's **package.json** file you'll now see a new section with this dependency:

```json
 "devDependencies": {
    "nodemon": "^1.18.10"
}
```

Because the tool isn't installed globally we can't launch it from the command line (unless we add it to the path) but we can call it from an NPM script because NPM knows all about the installed packages. Find the the `scripts` section of your package.json. Initially, it will contain one line, which begins with `"start"`. Update it by putting a comma at the end of that line, and adding the `"devstart"` line seen below:

```json
  "scripts": {
    "start": "node ./bin/www",
    "devstart": "nodemon ./bin/www"
  },
```

We can now start the server in almost exactly the same way as previously, but with the `devstart` command specified:

* On Windows, use this command:

```bash
SET DEBUG=express-locallibrary-tutorial:* & npm run devstart
```

* On macOS or Linux, use this command:

```bash
DEBUG=express-locallibrary-tutorial:* npm run devstart
```

**Nota:** Now if you edit any file in the project the server will restart (or you can restart it by typing `rs` on the command prompt at any time). You will still need to reload the browser to refresh the page.

We now have to call "`npm run <scriptname>`" rather than just `npm start`, because "start" is actually an NPM command that is mapped to the named script. We could have replaced the command in the *start* script but we only want to use *nodemon* during development, so it makes sense to create a new script command.

The generated project
---------------------

Let's now take a look at the project we just created.

### Directory structure

The generated project, now that you have installed dependencies, has the following file structure (files are the items **not** prefixed with "/"). The **package.json** file defines the application dependencies and other information. It also defines a startup script that will call the application entry point, the JavaScript file **/bin/www**. This sets up some of the application error handling and then loads **app.js** to do the rest of the work. The app routes are stored in separate modules under the **routes/** directory. The templates are stored under the /**views** directory.
```

/express-locallibrary-tutorial
    app.js
    /bin
        www
    package.json
    package-lock.json
    /node_modules
        [about 6700 subdirectories and files]
    /public
        /images
        /javascripts
        /stylesheets
            style.css
    /routes
        index.js
        users.js
    /views
        error.pug
        index.pug
        layout.pug
```

The following sections describe the files in a little more detail.

### package.json

The **package.json** file defines the application dependencies and other information:

```json
{
  "name": "express-locallibrary-tutorial",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www",
    "devstart": "nodemon ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "express": "~4.16.0",
    "http-errors": "~1.6.2",
    "morgan": "~1.9.0",
    "pug": "2.0.0-beta11"
  },
  "devDependencies": {
    "nodemon": "^1.18.10"
  }
}
```

The dependencies include the *express* package and the package for our selected view engine (*pug*). In addition, we have the following packages that are useful in many web applications:

* cookie-parser: Used to parse the cookie header and populate `req.cookies` (essentially provides a convenient method for accessing cookie information).
* debug: A tiny node debugging utility modeled after node core's debugging technique.
* morgan: An HTTP request logger middleware for node.
* http-errors: Create HTTP errors where needed (for express error handling).

The scripts section defines a "*start*" script, which is what we are invoking when we call `npm start` to start the server. From the script definition, you can see that this actually starts the JavaScript file **./bin/www** with *node*. It also defines a "*devstart*" script, which we invoke when calling `npm run devstart` instead. This starts the same **./bin/www** file, but with *nodemon* rather than *node*.

```json
  "scripts": {
    "start": "node ./bin/www",
    "devstart": "nodemon ./bin/www"
  },
```

### www file

The file **/bin/www** is the application entry point! The very first thing this does is `require()` the "real" application entry point (**app.js**, in the project root) that sets up and returns the `express()` application object.

```js
#!/usr/bin/env node

/\*\*
 \* Module dependencies.
 \*/

var app = require("../app");
```

**Nota:** `require()` is a global node function that is used to import modules into the current file. Here we specify **app.js** module using a relative path and omitting the optional (.**js**) file extension.

The remainder of the code in this file sets up a node HTTP server with `app` set to a specific port (defined in an environment variable or 3000 if the variable isn't defined), and starts listening and reporting server errors and connections. For now you don't really need to know anything else about the code (everything in this file is "boilerplate"), but feel free to review it if you're interested.

### app.js

This file creates an `express` application object (named `app`, by convention), sets up the application with various settings and middleware, and then exports the app from the module. The code below shows just the parts of the file that create and export the app object:

```js
var express = require('express');
var app = express();
...
module.exports = app;
```

Back in the **www** entry point file above, it is this `module.exports` object that is supplied to the caller when this file is imported.

Let's work through the **app.js** file in detail. First, we import some useful node libraries into the file using `require()`, including http-errors, *express*, *morgan* and *cookie-parser* that we previously downloaded for our application using NPM; and *path*, which is a core Node library for parsing file and directory paths.

```js
var createError = require("http-errors");
var express = require("express");
var path = require("path");
var cookieParser = require("cookie-parser");
var logger = require("morgan");
```

Then we `require()` modules from our routes directory. These modules/files contain code for handling particular sets of related "routes" (URL paths). When we extend the skeleton application, for example to list all books in the library, we will add a new file for dealing with book-related routes.

```js
var indexRouter = require("./routes/index");
var usersRouter = require("./routes/users");
```

**Nota:** At this point, we have just *imported* the module; we haven't actually used its routes yet (this happens just a little bit further down the file).

Next, we create the `app` object using our imported *express* module, and then use it to set up the view (template) engine. There are two parts to setting up the engine. First, we set the '`views`' value to specify the folder where the templates will be stored (in this case the subfolder **/views**). Then we set the '`view engine`' value to specify the template library (in this case "pug").

```js
var app = express();

// view engine setup
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "pug");
```

The next set of functions call `app.use()` to add the *middleware* libraries into the request handling chain. In addition to the 3rd party libraries we imported previously, we use the `express.static` middleware to get *Express* to serve all the static files in the **/public** directory in the project root.

```js
app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, "public")));
```

Now that all the other middleware is set up, we add our (previously imported) route-handling code to the request handling chain. The imported code will define particular routes for the different *parts* of the site:

```js
app.use("/", indexRouter);
app.use("/users", usersRouter);
```

**Nota:** The paths specified above ('/' and '`/users'`) are treated as a prefix to routes defined in the imported files. So for example, if the imported **users** module defines a route for `/profile`, you would access that route at `/users/profile`. We'll talk more about routes in a later article.

The last middleware in the file adds handler methods for errors and HTTP 404 responses.

```js
// catch 404 and forward to error handler
app.use(function (req, res, next) {
  next(createError(404));
});

// error handler
app.use(function (err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get("env") === "development" ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render("error");
});
```

The Express application object (app) is now fully configured. The last step is to add it to the module exports (this is what allows it to be imported by **/bin/www**).

```js
module.exports = app;
```

### Routes

The route file **/routes/users.js** is shown below (route files share a similar structure, so we don't need to also show **index.js**). First, it loads the *express* module and uses it to get an `express.Router` object. Then it specifies a route on that object and lastly exports the router from the module (this is what allows the file to be imported into **app.js**).

```js
var express = require("express");
var router = express.Router();

/\* GET users listing. \*/
router.get("/", function (req, res, next) {
  res.send("respond with a resource");
});

module.exports = router;
```

The route defines a callback that will be invoked whenever an HTTP `GET` request with the correct pattern is detected. The matching pattern is the route specified when the module is imported ('`/users`') plus whatever is defined in this file ('`/`'). In other words, this route will be used when an URL of `/users/` is received.

**Nota:** **Tip:** Try this out by running the server with node and visiting the URL in your browser: `http://localhost:3000/users/`. You should see a message: 'respond with a resource'.

One thing of interest above is that the callback function has the third argument '`next`', and is hence a middleware function rather than a simple route callback. While the code doesn't currently use the `next` argument, it may be useful in the future if you want to add multiple route handlers to the `'/'` route path.

### Views (templates)

The views (templates) are stored in the **/views** directory (as specified in **app.js**) and are given the file extension **.pug**. The method `Response.render()` is used to render a specified template along with the values of named variables passed in an object, and then send the result as a response. In the code below from **/routes/index.js** you can see how that route renders a response using the template "index" passing the template variable "title".

```js
/\* GET home page. \*/
router.get("/", function (req, res, next) {
  res.render("index", { title: "Express" });
});
```

The corresponding template for the above route is given below (**index.pug**). We'll talk more about the syntax later. All you need to know for now is that the `title` variable (with value `'Express'`) is inserted where specified in the template.
```

extends layout

block content
  h1= title
  p Welcome to #{title}
```

Challenge yourself
------------------

Create a new route in **/routes/users.js** that will display the text "*You're so cool"* at URL `/users/cool/`. Test it by running the server and visiting `http://localhost:3000/users/cool/` in your browser

Summary
-------

You have now created a skeleton website project for the Local Library and verified that it runs using *node*. Most importantly, you also understand how the project is structured, so you have a good idea where we need to make changes to add routes and views for our local library.

Next, we'll start modifying the skeleton so that it works as a library website.

See also
--------

* Express application generator (Express docs)
* Using template engines with Express (Express docs)
* Anterior
* Menu: Express Nodejs
* Próxima