Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Como rodar o HTML no localhost?

Fiz um servidor index.js para manipular dados numa tabela de um banco de dados. Usando o Postman eu consigo inserir, alterar, consultar e deletar registros do banco de dados. Eu digito no Terminal (Node) do VSC: nodemon index.js

Depois eu incluí um formulário HTML (index.html) para fazer as mesmas operações que o Postman faz. Eu chamo este formulário através da rota localhost:3000/form .

app.get('/form', (req, res) => {
    res.sendFile(__dirname + "/index.html"); 
});

Ele roda o formulário html porém sem o estilo, ou seja, ele não acha o "css/style.css":

Meu index.html contem essas linhas:

 <link rel="stylesheet" href="./css/style.css">

<form name="dados" class="formulario" action="http://127.0.0.1:3000/form" method="POST"> 

O console do Navegador dá esta mensagem: " Refused to apply style from 'http://localhost:3000/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. "

Como eu posso rodar o formulário HTML do meu servidor (pelo Node) sem dar este problema?

2 respostas

Nesse caso você precisa mapear o css também.


app.get('/form', (req, res) => {
    res.sendFile(__dirname + "/index.html"); 
});

app.get('/css/style.css', (req, res) => {
    res.sendFile(__dirname + "./css/style.css"); 
});

e dentro do seu html você precisa mudar a forma de import:

errado:

 <link rel="stylesheet" href="./css/style.css">

certo:

 <link rel="stylesheet" href="/css/style.css">

Eu tenho um exemplo pratico caso tenha dificuldade:

Server: https://github.com/RuiGuilherme/ipv4-header-checksum-validator/blob/main/server.js#L16

HML: https://github.com/RuiGuilherme/ipv4-header-checksum-validator/blob/main/www/index.html#L7

solução!

Valeu Rui! Agora funcionou. Muito obrigado

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software