‫Palestrante: Agora
‫vamos aprender como servir arquivos estáticos com o Express.
‫Agora, o que eu realmente quero dizer com arquivos estáticos?
‫Bem, são os arquivos que estão em nosso sistema de arquivos
‫que atualmente não podemos acessar usando todas as rotas.
‫Então, por exemplo, temos essa visão geral. arquivo html aqui
‫em nossa pasta pública.
‫Mas no momento não temos como acessar isso
‫usando um navegador, certo?
‫E o mesmo para esses arquivos de imagem que
‫temos aqui, ou os arquivos CSS ou Javascript.
‫Então, deixe-me mostrar isso a você,
‫e deixe-me usar o navegador dessa vez.
‫Por enquanto, estou copiando essa URL aqui
‫apenas para mostrar que
‫vai funcionar, obviamente também no navegador.
‫Ok, então este é nosso resultado não formatado aqui,
‫da mesma rota.
‫Mas digamos que realmente desejamos acessar aquele arquivo HTML
‫de que acabei de falar.
‫Portanto, podemos, é claro, não apenas
‫escrever publicamente e, por exemplo, uma
‫visão geral. html, certo?
‫Não há como acessar isso agora.
‫E isso simplesmente porque não definimos nenhuma rota
‫para esta URL, certo?
‫Não temos nenhum manipulador associado a esta rota.
‫E assim, se realmente quisermos acessar
‫algo de nosso sistema
‫de arquivos, precisamos usar um middleware Express integrado.
‫Deixe-me mostrar como podemos fazer isso.
‫Por exemplo, depois deste.
‫Agora, nesta seção, estamos falando apenas sobre uma API, então não
‫precisamos servir arquivos estáticos como imagens ou
‫HTML, então o que acabei de mostrar a vocês.
‫Mas, como esta seção é
‫uma introdução ao Express
‫em geral, também gostaria de mostrar rapidamente esse conteúdo para você.
‫Então, como eu estava dizendo, tudo o que
‫precisamos fazer é usar um middleware integrado simples
‫que funcione assim.
‫Expresse dot static, porque queremos servir arquivos estáticos, então este é
‫um nome óbvio para isso.
‫E aqui passamos o diretório do qual
‫queremos servir os arquivos estáticos.
‫E, neste caso, vou usar o diretório público.
‫Então, esta pasta aqui onde temos esses arquivos HTML, ok?
‫E, na verdade, vamos usar
‫uma string de modelo aqui para que eu possa seguir em frente
‫e usar a variável dirname, depois barra e public.
‫Salve-o e volte para o navegador.
‫Então poderemos abrir esta visão geral. html.
‫Agora não vai funcionar neste URL aqui.
‫Na verdade, tem que ser assim.
‫Portanto, sem o público, basta / visão geral. html.
‫Então, vamos ver, e realmente funciona.
‫OK.
‫Agora, por que isso?
‫Por que não precisamos da pasta pública aqui na URL?
‫Bem, simplesmente porque quando abrimos uma URL que ele
‫não consegue encontrar em nenhuma
‫de nossas rotas, ele irá procurar naquela pasta pública que definimos.
‫E isso define essa pasta para a raiz.
‫Ok, então vamos fingir que a raiz agora
‫é nossa pasta pública.
‫Então, isso aqui, e a visão geral está aí.
‫E é por isso que temos acesso a ele.
‫Então lá também temos imagens, por exemplo.
‫Digamos que queremos abrir a imagem e este pino aqui.
‫E podemos fazer isso.
‫Então,
‫imagem, pin png, e então vamos lá.
‫Aqui está a imagem.
‫Agora, o que não podemos fazer é isso, porque isso não é um arquivo.
‫Esta se parece com uma rota normal
‫e, portanto, o Express realmente tenta encontrar um manipulador de rota para
‫esta, o que não é possível
‫porque você não definiu nada.
‫Tudo bem?
‫Então, realmente funciona para arquivos estáticos.
‫Nesse caso, novamente, não seguirá por uma nova rota, mas
‫simplesmente servirá aquele arquivo que
‫especificamos na pasta
‫pública ou na pasta que especificamos aqui neste middleware.
‫Agora dê uma olhada no console aqui e veja todas as solicitações
‫que foram realmente feitas quando abrimos essa página.
‫Agora vamos esclarecer isso aqui apenas para ver todas as solicitações
‫que realmente vêm dessa página de visão geral.
‫Então, vamos escrever novamente uma visão geral. html aqui.
‫E essas imagens aqui
‫estão quebradas e isso é porque esse html não
‫deveria ser servido assim, certo?
‫Estou apenas usando agora
‫aqui para obtermos algum feedback visual.
‫Não estou interessado no conteúdo aqui.
‫Agora, basta dar uma olhada em todas as
‫solicitações feitas para todos os ativos.
‫Como eu disse no
‫início, para cada peça que faz parte do
‫site, nosso servidor recebe uma solicitação separada.
‫E você vê aqui que a maioria deles recebe este 404.
‫É por isso que os links são quebrados na página da web, simplesmente
‫porque o Express não pode encontrá-los nesta pasta.
‫Mas, novamente, esse não é o ponto aqui.
‫O que eu só queria
‫mostrar a vocês é como podemos
‫servir arquivos estáticos de uma pasta e não de uma rota.
‫Tudo bem.
‫E assim encerramos a introdução básica ao Express.
‫Nos próximos dois vídeos,
‫falaremos sobre algo chamado de variáveis
‫de ambiente e também configuraremos o ESlint no código VS oral.