Introdução ao Node.js

Node.js® é um ambiente de execução de JavaScript em nível de back-end e front-end. Neste tutorial, veremos uma breve introdução ao desenvolvimento de aplicações web usando Node.js.

Requisitos básicos: node e npm. Para verificar se estão instalados, digite no terminal:

node -v

npm -v

Você pode fazer o download do Node.js neste endereço: https://nodejs.org/pt-br/

Resumo

Node.js: tecnologia para execução de JavaScript em server-side
npm: ferramenta usada para instalação de pacotes e bibliotecas de terceiros (dados ficam salvos na pasta node_modules e descritos no arquivo package.json)
express: framework usado para configuração de rotas na execução do servidor web
nodemon: automatiza a execução do servidor web (sua função é reiniciar o servidor web cada vez que um arquivo é alterado)
ejs: acrônimo para Embedded JavaScript templates. Permite a configuração de templates no Node.js.

Iniciando uma aplicação com node

No terminal, digite:

npm init -y

Isso irá criar um arquivo chamado package.json.

O próximo passo é instalar o pacote express. Esse pacote irá permitir a criação de rotas e views que, por sua vez, permitirão que você acesse o site pelo navegador. No terminal execute:

npm install express

Agora crie um arquivo chamado index.js e adicione o seguinte conteúdo:

 const express = require('express');

 const app = express();

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

 app.listen(3001);

Para iniciar o servidor, vá até o terminal e digite:

node index.js

Agora, para acessar a aplicação criada, vá no navegador e acesse:

http://localhost:3001

Mudanças no código fonte não serão automaticamente aplicadas à página. Para realizar alterações na página, você deve reiniciar o servidor (use control + c, e execute o comando “node index.js” novamente). Entretanto, é possível permitir atualizações automáticas usando o pacote nodemon.

Instale o nodemon usando o código:

npm install -D nodemon

Altere o arquivo package.json:

"main": "index.js",

"start": "nodemon index.js",

E inicie com o comando npm start.

OPÇÃO ALTERNATIVA
Você pode ainda configurar de outra forma. Alter o arquivo package.json na seguinte linha:

"scripts": {"dev": "nodemon index.js"},

Agora, para iniciar o servidor utilize:

npm run dev

Criando rotas básicas com Express

Observe como podemos criar uma rota básica que recebe um id e o imprime na tela:

 app.get('/:id', (req, res)=>{
    res.send(req.params.id);
 });

Agora podemos acessar essa rota digitando na url: http://localhost:3001/123456789

Observe que apenas essa rota está disponível. Se tentarmos acessar outras rotas, como a rota raiz ou uma outra rota aleatória, obteremos mensagens de erro:

Criando um template básico

Agora, vamos criar um template básico para o seu site.

Instale a biblioteca ejs:

npm install ejs

Altere o arquivo index.js:

/* 
    Arquivo: ./index.js
    Função: Iniciar o servidor web
*/

const porta = 8080;
const express = require('express');

const servidor = express();

servidor.use(express.static(__dirname + "/"));

servidor.engine('html', require('ejs').renderFile);
servidor.set('view engine', 'html');

servidor.get('/', function(req, res) {
    res.render('index'); // carrega ./views/index.html
});

servidor.listen(porta); 

// Principal arquivo: ./controllers/controller.js

Você pode iniciar o servidor com npm start, mas primeiro vamos configurar a estrutura da nossa página. Para isso, vamos utilizar como inspiração o padrão MVC.

Padrão MVC

MVC (acrônimo para model-view-controller) é um padrão de arquitetura de software em que o código é dividido em três componentes: modelo (responsável pelo acesso aos dados), visão (responsável pela exibição da interface com o usuário) e controlador (responsável pela gestão de acesso entre visões e dados).

Para iniciar nosso código, vamos tomar como base os princípios do MVC (note que usamos isso como uma mera inspiração, não nos restringimos a seguir o padrão à risca).

No diretório raiz, crie as seguintes pastas:

models
views
controllers

Views

Na pasta views, crie o arquivo index.html:

<!doctype html>
<html lang="pt-BR">
<head>

    <title>Node template</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./node_modules/bootstrap-icons/font/bootstrap-icons.css">

    <link rel="stylesheet" href="./views/css/main.css">

</head>
<body>

    <!-- Início do conteúdo -->
    <div class="container-fluid">
        <div id="grafo"></div>
    </div>
    <!-- Fim do conteúdo -->

    <script src="../controllers/controller.js" type="module"></script>

</body>
</html>

Crie também as pastas e arquivos:

views
- css
  - main.css
- img
- js

Note que usamos o Bootstrap na declaração do HTML. Você pode:

instalá-lo via CDN;
baixar os arquivos brutos e alocá-los nas pastas ./views/css e ./views/js;
ou ainda, fazer a instalação via npm:

npm install bootstrap
npm install bootstrap-icons

Teste se está tudo ok iniciando o servidor via terminal (npm start) e acessando o site no navegador pelo endereço http://localhost:8080

Iniciando uma aplicação com node

Criando rotas básicas com Express

Criando um template básico

Padrão MVC

Views

Por Diego Mariano

2 respostas em “Introdução ao Node.js”

Deixe um comentário Cancelar resposta

Compartilhe este post!