Servindo Aplicações Web e Arquivos Estáticos com Express

• Criando o Servidor
• Configuração de Diretório
• Rotas Personalizadas
• Configuração para SPA
• Conclusões

Criando o Servidor

Crie uma pasta para o servidor Express. Crie um arquivo chamado index.js, abra o console e escreva:

npm init

Complete as opções solicitadas. Em seguida, instale o módulo Express usando o seguinte comando:

npm install --save express

Crie uma pasta dentro do projeto onde os arquivos estáticos irão. Neste caso, a pasta será chamada app. A árvore de arquivos deve ficar assim:

|-- app
|-- node_modules
|-- index.js
|-- package-lock.json
|-- package.json

Configuração de Diretório

Coloque os arquivos estáticos na pasta /app, por exemplo, seu site, imagens, arquivos CSS, etc. Para fazer o servidor Express usar essa pasta como a fonte para arquivos estáticos, você usaria o código express.static() da seguinte forma em index.js:

const express = require('express');
const app = express();

// diga ao servidor para usar /app como a fonte para arquivos estáticos
app.use(express.static('app'));

// execute o servidor na porta 3000
app.listen(3000, () => console.log('Running on http://localhost:3000'));

Se, por exemplo, houvesse arquivos chamados cat.jpeg, main.css, index.html em /app, poderíamos acessá-los a partir do servidor com as rotas:

http://localhost:3000/cat.jpeg
http://localhost:3000/main.css
http://localhost:3000/index.html

Se, por exemplo, houvesse outra pasta chamada static que também quiséssemos usar como fonte para arquivos estáticos, simplesmente precisamos chamar a função novamente:

// diga ao servidor para usar /app e /static como fontes para arquivos estáticos  
app.use(express.static('app'));
app.use(express.static('static'));

O Express procurará arquivos na ordem definida pelos diretórios estáticos.

Rotas Personalizadas

Se quisermos criar uma rota personalizada através da qual acessar arquivos estáticos, podemos fazê-lo passando o nome como o primeiro parâmetro da função da seguinte forma:

// diga ao servidor para usar /app e /static como fontes para arquivos estáticos
app.use('/static', express.static('app'));
app.use('/static', express.static('static'));

Acessaríamos os arquivos desta forma:

http://localhost:3000/static/cat.jpeg
http://localhost:3000/static/main.css  
http://localhost:3000/static/index.html

Configuração para SPA

Se tivermos uma aplicação desenvolvida em frameworks como Angular, React ou Vue e quisermos que nosso servidor sirva essas aplicações e redirecione rotas para serem tratadas pela aplicação web, podemos configurar o servidor da seguinte forma:

Supondo que nossa aplicação esteja em uma pasta chamada /app

const express = require('express');
const path = require('path');
const app = express();

// diga ao servidor para usar /app como a fonte para arquivos estáticos
app.use(express.static('app'));

// redirecione todas as rotas para serem tratadas por nossa aplicação
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname + '/app/index.html'));
});

// execute o servidor na porta 3000
app.listen(3000, () => console.log('Running on http://localhost:3000'));

Conclusões

Através de express.static(), o tratamento de arquivos estáticos se torna muito mais simples. Também permite que usemos um servidor Express para servir aplicações web.

Se você só precisa servir um site estático, pode não precisar de um servidor como tal. Existem opções gratuitas para hospedar aplicações web, incluindo Github Pages, Netlify, Firebase Hosting e Surge.

Espero que este artigo seja útil para você.