Tutorial: Seu primeiro servidor Web com Node e Express em 5 minutos

javascript Mai 31, 2020

Um tutorial rápido de como subir um servidor com node e express.

Sei, já tem um monte por aí, mas se você ainda não aprendeu (ou esqueceu  😆) segue aqui minha contribuição.

Prerequisitos

Antes de tudo precisamos ter o node instalado. Se ainda não tiver o node instalado você pode instalar a ultima versão LTS para o seu sistema operaiona a partir de https://nodejs.org/en/download/
Nota: isso pode levar mais de 5 minutos.

1: Iniciando o projeto com o npm

# criando a pasta 
$ mkdir app-in-5
$ cd app-in-5
# iniciando o projeto 
$ npm init -y

2: Instalar o express

$ npm install express --save

3: Importar express

Crie o arquivo server.js

// server.js
const express = require('express');
const server = express();

4: Adicionar um manipulador de rota JSON

Sempre que um client acessar '/json' vamos retornar um JSON com a mensagem "hello world"

// server.js
... 
server.get("/json", (req, res) => {
    res.json({ message: "Hello world" });
});

5: Adicionar um manipulador de rota HTML

Sempre que um client acessar '/' vamos retornar o arquivo index.html

// server.js
... 
server.get("/", (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

Crie o arquivo index.html no mesmo nivel do arquivo server.js

<!DOCTYPE html>
<html lang="en">
 <head>
   <title>Node Workshop</title>
 </head>
 <body>
     <h1 style="color: blue;">
        Experss in 5 minutes
     </h1>
     <p>HELLO WORLD</p>
 </body>
</html>

6: Iniciar o servidor

Primeiro vamos configurar a porta e mandar o servidor ficar ouvindo requisições nessa porta. Adicione no server.js essa configuração:

// server.js
... 
const port = 4000; 
server.listen(port, () => {    
    console.log(`Server listening at ${port}`);
 });

agora, no terminal, navegue até o projeto e execute:

$ node server.js

7: Testando

Acesse http://localhost:4000 no seu navegador
ou teste com o curl em outro termina:

$ curl http://localhost:4000/json
{"message":"Hello world"}

$ curl http://localhost:4000
<!-- index.html --> ...

Diego Bruning

Mais de 5 anos de experiência em desenvolvimento de Software, minha principal qualidade é o envolvimento e o compromisso com os projetos.

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.