13 de maio de 2020 • 8 min de leitura

Como configurar o ambiente de desenvolvimento Node/Express

Nesse tutorial, mostrarei como configurar o ambiente de desenvolvimento Node/Express que inclui a instalação de NodeJs, pacote NPM e 'Express Application Generator'.

Instalando Node

  • Acesse o site: https://nodejs.org/pt-br/
  • Faça o download da versão LTS "Recomendada para a maioria dos usuários"
  • Clique duas vezes no arquivo baixado e siga as instruções da instalação, clicando em Next...Next

  • Testando sua instalação do NodeJs e NPM:

    $ node --version
v10.16.2
    $ npm --version
6.9.0

[Atenção] Instalação NodeJs no Windows

O instalador poderá ser baixado clicando-se no botão install, diretamente da página do Node.js:

Versão 64 bits (provavelmente seu OS é 64 bits) Versão 32 bits Durante a instalação, basta clicar nos botões para continuar o assistente. Não troque a pasta padrão do Node.js, a não ser que saiba exatamente o que está fazendo.

Atenção: na plataforma Windows, dependendo da configuração da sua máquina, ou do uso de uma rede corporativa (proxy), pode ser que a instrução npm install não funcione. Caso isso aconteça, pode-se tentar os passos a seguir. Caso o primeiro funcione, não é necessário fazer o segundo:

a) Problema no certificado: no terminal, deve-se executar o comando:

npm set strict-ssl false

Em seguida, é possível repetir a operação de instalação que falhou.

b) Redes de empresa ou proxy da rede: alguns usuários acessam a rede através de um proxy. Isso pode impedir que o npm tenha acesso ao seu repositório. Nesse sentido, é necessário saber o endereço do proxy para então configurá-lo através das instruções a seguir (troque proxy.company:8080 pelo endereço do seu proxy).

npm config set proxy http://proxy.company.com:8080

npm config set https-proxy http://proxy.company.com:8080

Sem usar o NPM

Crie um arquivo helloworld.js, use o módulo 'http' para criar um servidor NodeJs createServer().

//Carrega o módulo HTTP
var http = require("http");
 
//Crie um servidor HTTP e ouça na porta 8090 os pedidos
http.createServer(function (request, response) {
 
   // Defina o cabeçalho HTTP da resposta com status HTTP e tipo de conteúdo
   response.writeHead(200, {'Content-Type': 'text/plain'});
   
   // Envie o corpo da resposta "Hello World"
   response.end('Hello World');
}).listen(8090);
 
// URL de impressão para acessar o servidor
console.log('Server running at http://localhost:8090/')

Inicie o servidor como comando no terminal onde criou o arquivo:

$ node helloworld.js
Server running at http://localhost:8090/

Hello World

Usando agora o NPM

O NPM é a ferramenta mais importante para trabalhar com aplicativos Node para buscar quaisquer pacotes (bibliotecas JavaScript) que um aplicativo precisa para o ambiente de desenvolvimento, de teste e produção.

Crie um diretório para a aplicação:

$ mkdir hellonodejs
$ cd hellonodejs

Crie um arquivo package.json Com o aplicativo NodeJs, o arquivo 'package.json' contém todas as dependências do “pacote” do JavaScript, incluindo o nome do pacote, versão, descrição, arquivo inicial a ser executado, dependências de produção, dependências de desenvolvimento, versões do Node que podem funcionar, etc.

Uma maneira mais simples e fácil de fazer é usando o comando npm init -y no terminal para criar o arquivo 'package.json', algo parecido com o que está descrito abaixo será criado:

{
  "name": "01-nodejs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Instale o Express com o NPM

Usando o comando npm install express

$ npm install express
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN 01-nodejs@1.0.0 No description
npm WARN 01-nodejs@1.0.0 No repository field.     

+ express@4.17.1
added 50 packages from 37 contributors and audited 50 packages in 21.217s
found 0 vulnerabilities

Agora apareceu no final do arquivo 'package.json' a dependência do 'Express' com a versão nesse casp 4.17.1:

{
  "name": "01-nodejs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  }
}

Use o Express para criar o servidor NodeJs

Crie um arquivo 'index.js' na raiz do diretório de aplicativos 'hellonodejs' com o conteúdo abaixo:

var express = require('express')
var app = express()
 
app.get('/', function (req, res) {
  res.send('Hello World!')
})
 
app.listen(8090, function () {
  console.log('Aplicativo de exemplo escutando na porta 8090!')
})

A função app.get() responde apenas a solicitações HTTP GET com o caminho do URL especificado ('/').

Vamos iniciar o Servidor

Ao executar com o comando node index.js irá apresentar a seguinte mensagem

$ node index.js
Aplicativo de exemplo escutando na porta 8090!

Vá em seu navegador e acesse http://localhost:8090, será exibido 'Hello World!'.

Express Application Generator

Usamos a ferramenta "Express Application Generator" para gerar um esqueleto de aplicativo Express. Use o comando a seguir:

$ npm install express-generator
npm WARN 01-nodejs@1.0.0 No description
npm WARN 01-nodejs@1.0.0 No repository field.

+ express-generator@4.16.1
added 10 packages from 13 contributors and audited 60 packages in 5.236s
found 1 low severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

Verifique a versão do express usando o comando:

$ express --version
4.16.1

Crie um aplicativo Express chamado 'hellonodejs' com as configurações padrão:

$ express hellonodejs

  warning: the default view engine will not be jade in future releases
  warning: use `--view=jade' or `--help' for additional options


   create : hellonodejs\
   create : hellonodejs\public\
   create : hellonodejs\public\javascripts\
   create : hellonodejs\public\images\
   create : hellonodejs\public\stylesheets\
   create : hellonodejs\public\stylesheets\style.css     
   create : hellonodejs\routes\
   create : hellonodejs\routes\index.js
   create : hellonodejs\routes\users.js
   create : hellonodejs\views\
   create : hellonodejs\views\error.jade
   create : hellonodejs\views\index.jade
   create : hellonodejs\views\layout.jade
   create : hellonodejs\app.js
   create : hellonodejs\package.json
   create : hellonodejs\bin\
   create : hellonodejs\bin\www

   change directory:
     $ cd hellonodejs

   install dependencies:
     $ npm install

   run the app:
     $ DEBUG=hellonodejs:* npm start

Será criado um diretório parecido com o que está abaixo:

express

Instale todas as dependências do aplicativo 'hellonodejs' pelo NPM:

$ cd hellonodejs/
$ npm install

Execute o aplicativo:

$ npm start

> hellonodejs@0.0.0 start D:\nodejs\01-nodejs\hellonodejs
> node ./bin/www

GET / 200 413.319 ms - 170
GET /stylesheets/style.css 200 5.054 ms - 111
GET /favicon.ico 404 10.028 ms - 1132

Estrutura do projeto:

estrutura do projeto express

package.json

{
  "name": "hellonodejs",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "jade": "~1.11.0",
    "morgan": "~1.9.1"
  }
}
  • body-parser: analisa / extrai o corpo de uma solicitação HTTP request.
  • morgan: um middleware do registrador de solicitações HTTP para o node.
  • cookie-parser: usado para analisar o cabeçalho do cookie e preencher req.cookies

Arquivo www

Situado em /bin/www é o ponto de entrada do aplicativo!

#!/usr/bin/env node

/**
 * Module dependencies.
 */

var app = require('../app');
var debug = require('debug')('hellonodejs:server');
var http = require('http');

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

/**
 * Create HTTP server.
 */

var server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}

/bin/www require()‘app.js’ file.

app.js

O arquivo cria um aplicativo expresso, configura o aplicativo com várias configurações e middleware e depois exporta o aplicativo do módulo.

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

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

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')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// 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');
});

module.exports = app;

Mais detalhes com o arquivo 'app.js'

Importe bibliotecas do node úteis para o arquivo usando require():

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

require() serve também para importar módulos do nosso diretório de rotas:

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

Configurar o mecanismo de exibição (modelo)

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

Inclua as bibliotecas de middleware na cadeia de manipulação de solicitações:

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')));

Adicione tratamento de rotas à cadeia de tratamento de pedidos:

app.use('/', indexRouter);
app.use('/users', usersRouter);

Inclua métodos de manipulador para erros e respostas HTTP 404:

// 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');
});

A última etapa é adicioná-lo às exportações do módulo:

module.exports = app;

Rotas

Veja o arquivo '/routes/index.js':

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

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

module.exports = router;

Ele carrega o módulo expresso e o usa para obter um objeto "express.Router".

Views

Veja o arquivo ‘/views/index.jade’:

extends layout

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

O roteador '/routes/index.js' acima renderizará o modelo '/views/index.jade'.

Resultado abaixo:

resultado

Comentários