Francisco Chaves

Software Developer.
Chatbot Developer.

Modo escuro

Servidor Web com Node.js e Express

30 de agosto de 2020

Node.js

Olá pessoal, hoje iremos criar um servidor com Node.js e Express, para servir páginas HTML, o sistema operacional utilizado para realizar o tutorial será o Ubuntu 18.04.

O Express é um dos principais framework web para utilizar com Node.js, além de ser minimalista é muito rápido, fornecer vários recursos para aplicações, como facilidades para criações de servidores web e APIs.

Precisamos ter o NodeJS instalado no computador, caso não tenha ainda feito a instalação acesse este link.

Vamos iniciar com a criação de um diretório com nome servidor-web para armazenar o código do projeto:

mkdir servidor-web

Entre na pasta:

cd servidor-web

Crie o arquivo de configuração package.json do projeto, responsável por indicar as dependências e também para iniciar scripts customizados, o comando abaixo iniciará a criação do arquivo com algumas perguntas para preencher:

npm init

Veja como o meu arquivo package.json ficou:

{
  "name": "servidor-web",
  "version": "1.0.0",
  "description": "Servidor Web com Node.js e Express",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": ["Servidor", "Node.js", "Web"],
  "author": "Francisco Chaves",
  "license": "MIT"
}

Para criar um arquivo package.json sem precisar preencher as perguntas utilize o comando abaixo:

npm init -y

Agora vamos adicionar a dependência express no projeto:

npm install express

Crie um arquivo com o nome index.js:

touch index.js

Abra o arquivo com o editor nano ou com seu editor de código favorito:

nano index.js

Adicione o conteúdo a seguir, com o editor nano salve o arquivo com as teclas CTRL + O e feche com as teclas CTRL + X:

const express = require('express');
const app = express();
const port = 3000 | process.env.PORT;

app.get('/', (request, response) => {
  response.send('<h1>Hello Express!!</h1>');
});

app.listen(port, () => {
  console.log('Servidor web em execução: http://localhost:3000');
});

Execute a aplicação:

node index.js

Acesse a URL http://localhost:3000 e veja o resultado:

Hello Express

Estamos quase terminando, agora vamos criar uma pasta com o nome public, onde ficará os nossos arquivos estáticos (HTML, CSS, JS, Imagens…):

mkdir public

Dentro da pasta public crie três arquivos HTML, uma pasta css e um arquivo CSS com o nome estilo.css:

1- Página home:

<html>
  <head>
    <title>Home</title>
    <link rel="stylesheet" href="./css/estilo.css" />
  </head>
  <body>
    <h1>Página home</h1>
  </body>
</html>

2- Página sobre:

<html>
  <head>
    <title>Sobre</title>
    <link rel="stylesheet" href="./css/estilo.css" />
  </head>
  <body>
    <h1>Página sobre</h1>
  </body>
</html>

3- Página contato:

<html>
  <head>
    <title>Contato</title>
    <link rel="stylesheet" href="./css/estilo.css" />
  </head>
  <body>
    <h1>Página contato</h1>
  </body>
</html>

4- Arquivo de estilo:

body {
  background-color: ghostwhite;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

h1 {
  color: darkslategray;
  font-size: 3em;
  text-shadow: 2px 2px 5px grey;
}

A estrutura de pastas deve ficar conforme abaixo:

.
├── index.js
├── package.json
└── public
    ├── css
    │   └── estilo.css
    ├── contato.html
    ├── index.html
    └── sobre.html

Vamos alterar o código do nosso servidor para utilizar arquivos estáticos, adicione a função de middleware express.static ao Express para indicar o caminho para o diretório public onde está os arquivos.

const express = require('express');
const app = express();
const port = 3000 | process.env.PORT;

app.use(express.static(__dirname + '/public'));

app.listen(port, () => {
  console.log('Servidor web em execução: http://localhost:3000');
});