Arquivos Estáticos no Express com Node.js

Vamos abordar como enviar arquivos HTML estáticos para o usuário utilizando Node.js + Express. Para trabalhar com arquivos estáticos no Express, há um componente especial chamado express.static(), que aponta para o diretório contendo esses arquivos.

Suponha que nosso projeto tenha a seguinte estrutura:

app.js: principal arquivo da aplicação
node_modules
package.json
public: pasta onde será definido um arquivo
- about.html

Na pasta public, haverá o arquivo about.html com o seguinte conteúdo:

<!DOCTYPE html>
<html>
  <head>
    <title>Sobre o site</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>Sobre o site</h1>
  </body>
</html>

Agora, vamos definir o seguinte código no arquivo app.js:

const express = require("express");

const app = express();

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

app.use("/", function (_, response) {
  response.send("Página Principal");
});

app.listen(3000, () => console.log("Servidor iniciado em http://localhost:3000"));

Página Principal

Para integrar o componente express.static no processo de tratamento de requisições, utilizamos a função app.use(). Esta função permite adicionar diversos componentes, também conhecidos como middleware, ao pipeline de tratamento de requisições:

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

Este chamado deve ser colocado antes de todos os outros chamados da função app.get().

Na função express.static(), passamos o caminho para a pasta com os arquivos estáticos. Neste caso, indicamos um caminho relativo: para a pasta public dentro da pasta atual do projeto. Se necessário, também é possível definir um caminho absoluto:

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

Aqui, a expressão especial __dirname permite obter o caminho completo da pasta, ao qual é adicionado o caminho /public.

Vamos executar a aplicação e acessar no navegador o caminho http://localhost:3000/about.html:

Arquivos Estáticos no Express em Node.js

É importante notar que, ao acessar o arquivo, indicamos apenas o nome do arquivo sem o nome da pasta public. Também não devemos confundir este acesso com a ação da função sendFile; neste caso, acessamos diretamente os arquivos estáticos, enquanto a função sendFile pega o conteúdo do arquivo e o envia ao usuário.

Além disso, podemos alterar o caminho para o diretório de arquivos estáticos:

const express = require("express");

const app = express();

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

app.use("/", function (_, response) {
  response.send("<h1>Página Principal</h1>");
});

app.listen(3000, () => console.log("Servidor iniciado em http://localhost:3000"));

Agora, para acessar o arquivo about.html, é necessário enviar a requisição para http://localhost:3000/static/about.html.

Em conclusão, podemos definir diversos caminhos para diferentes tipos de arquivos estáticos. Por exemplo, arquivos HTML em uma pasta, estilos em outra e scripts JavaScript em uma terceira:

app.use(express.static("html"));
app.use(express.static("styles"));
app.use(express.static("scripts"));