Estou conseguindo acessar o localhost 3000 e esta carregando a pagina, porem esta sem estilo algum, totalmente cru.
Estou conseguindo acessar o localhost 3000 e esta carregando a pagina, porem esta sem estilo algum, totalmente cru.
hoje, com a Alura e o Google Gemini
Olá Leonardo, tudo bem?
Isso geralmente acontece quando os arquivos de estilo (CSS) não estão sendo encontrados ou carregados corretamente pelo navegador. Portanto, para identificar e solucionar esse problema, peço que verifique se no seu arquivo index.html, o link para o Bootstrap está correto. Deve ser algo assim:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
Como também no arquivo documento.html:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
Também verifique se a estrutura de pastas está correta e que o servidor está servindo a pasta public corretamente. No seu servidor.js, você deve ter algo assim:
import express from "express";
import url from "url";
import path from "path";
const app = express();
const porta = process.env.porta || 3000;
const caminhoAtual = url.fileURLToPath(import.meta.url);
const diretorioPublico = path.join(caminhoAtual, "../..", "public");
app.use(express.static(diretorioPublico));
app.listen(porta, () => console.log(`Servidor escutando na porta ${porta}`));
Caso o problema persista, você pode abrir o console do desenvolvedor no seu navegador (F12 no Chrome) e veja se há algum erro na aba "Console" e compartilhe o erro aqui.
Espero ter ajudado.
Qualquer dúvida, compartilhe no fórum.
Abraços e bons estudos!