Introdução
Com o Express, é possível entregar os arquivos estáticos de forma separada no sistema. E isso é importante porque você consegue dizer para o servidor, exatamente quais arquivos não precisam de um processamento, mas sim que ele só seja entregue para uso.
Dessa forma o servidor vai entender que aquele arquivo, não requer nenhum tipo de lógica ou processamento para ser entregue, ele simplesmente é mostrado na tela para o usuário.
Os arquivos estáticos podem ser fotos, arquivos, folhas de estilo css, arquivos javascript, arquivos somente com HTML e entre outros.
Sobre o Express static
O express.static é um middleware que é integrado ao express e que permite indicar onde estarão os arquivos estáticos a serem carregados.
É possível fazer a configuração somente uma vez, e normalmente é feita dentro do arquivo principal do sistema, que pode ser o server.js, main.js, index.js, depende de como configurou seu sistema.
Essa configuração indica o diretório do servidor no qual estão os arquivos estáticos, com isso, sempre que no código tiver referência a uma imagem por exemplo, o servidor sabe que precisa ir buscar para o diretório que foi configurado.
Normalmente é configurado só um diretório e com o nome public, dessa forma:
app.use(express.static('public'));
Com essa configuração acima é possível carregar todos arquivos dentro do diretório public
http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html
Repare que dentro do diretório public, os arquivos podem ser separados em subdiretórios para facilitar o entendimento de onde cada um estará, por exemplo, dentro de public pode ter um diretório images que indica que lá estarão as imagens do sistema.
Configurando mais de um diretório público
Caso queira, é possível configurar mais de um diretório de arquivos estáticos, pode ser utilizado para caso tenha uma subdivisão maior dos arquivos.
Por exemplo, as imagens ficam em um diretório, já os arquivos PDF que são os termos de contrato do sistema ficam em outro, só que não dentro do mesmo diretório, então assim é melhor dizer que os dois diretórios são de arquivos estáticos, dessa forma:
app.use(express.static('images'));
app.use(express.static('contracts'));
Nesse caso, o Express executa a leitura dos arquivos estáticos na ordem que foi declarado, ou seja, no caso o diretório images será lido antes que o diretório contracts.
Na prática isso quase não tem diferença, mas você pode organizar seus diretórios de maneira que o que tenha menos arquivos carregue primeiro por ser mais rápido.
Configurando um prefixo
Quando é configurado o diretório public por exemplo, esse diretório não aparece no caminho do arquivo, é possível acessá-lo fazendo somente:
http://localhost:3000/images/kitten.jpg
Caso você queira indicar que este arquivo é um estático, é possível colocar um prefixo na URL para fazer esse controle.
Esse prefixo é um caminho virtual, ele não existirá na estrutura de arquivos do servidor, é somente para indicar que aquele é um arquivo estático mesmo.
Para o exemplo, o caminho virtual de prefixo que vou colocar vai ser o /static, e o código ficará assim:
app.use('/static', express.static('public'));
Agora para acessar os arquivos precisa fazer:
http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html
Lembrando que esse caminho é virtual, ele não vai existir nos diretórios. Para uma segurança maior e ter certeza que o public está relacionado ao diretório raiz de onde o app Node foi iniciado, é uma boa prática usar o caminho absoluto do diretório que será entregue:
app.use('/static', express.static(__dirname + '/public'));
O __dirname faz essa função de obter o caminho absoluto, evitando problemas com a referenciação do diretório.
Vídeo sobre o assunto
Para ver outros canais onde o posto conteúdo, meu Github e também cursos, veja os Links do Programando Soluções.
Conclusão
É uma boa prática configurar o servidor para mostrar os arquivos estáticos separado, isso pode trazer um ganho de performance, além de uma separação melhor dos arquivos, até o próximo post 🙂
Referências
https://expressjs.com/pt-br/starter/static-files.html
https://expressjs.com/pt-br/advanced/best-practice-performance.html