Node js does not render the page’s css style

Question

I ran the Node on a screen I had done in CSS and HTML with Bootstrap and does not load the styles.

Failed to load Resource: the server responded with a status of 404 (Not Found) * Refused to apply style from '' because its MIME type ('text/html') is not a supported stylesheet MIME type, and Strict MIME checking is enabled.

If anyone has a solution, thank you.

index.html

<aside class="logo">
  <img src="" alt="" class="logo">
</aside>

<header class="header">
  <h1><i class="fa fa-home"></i> Título</h1>
  <p>Subtitulo do sistema</p>
</header>

<aside class="menu-area">
  <nav class="menu">
    <a href="/"><i class="fa fa-home"></i> Inicio</a>
    <a wm-link="#/HTML/movimento.html"><i class="fa fa-edit"></i> Movimento</a>
    <a wm-link="#/HTML/setor.html"><i class="fa fa-clipboard"></i> Setor</a>
    <a wm-link="#/HTML/local.html"><i class="fa fa-map-marker"></i> Local</a>
    <a wm-link="#/HTML/tipo.html"><i class="fa fa-id-badge"></i> Tipo</a>
    <a wm-link="#"><i class="fa fa-file-text-o"></i> Relatórios</a>
  </nav>
</aside>

<main wm-link-destino class="content p-3">
  conteudo
</main>

<footer class="footer">
  <p class="mr-2">Produzido por <i class="fa fa-terminal">SISTCON</i></p>
</footer>
Fundamentos Sistema de Grid Componentes Formulários -->

app js.:

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

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
})
app.get('/login', function(req, res){
  res.send("testando 2")
})
app.listen(2000)

No importing of the screen styles or the navigation part of the menu.

js navigation.:

$(document).ready(function(){

(function () { function navegarViaAjax(hash) { if (!hash) return

    const link = document.querySelector(`[wm-link='${hash}']`)
    if(!link) return

    const destino = document.querySelector('[wm-link-destino]')

    const url = hash.substring(1)
    fetch(url)
        .then(resp => resp.text())
        .then(html => {
            destino.innerHTML = html
            const resultado = html.match(/\<script\>([\s\S]*)\<\/script\>/)
            if(resultado && resultado.length >= 2){
                eval(resultado[1])
            }
        })
}

function configurarLinks() {
    document.querySelectorAll('[wm-link]')
        .forEach(link => {
            link.href = link.attributes['wm-link'].value
        })
}

function navegacaoInicial() {
    if (location.hash) {
        navegarViaAjax(location.hash)
    } else {
        const primeiroLink = document.querySelector('[wm-link]')
        navegarViaAjax(primeiroLink)//.hash
    }
}

window.onhashchange = e => navegarViaAjax(location.hash)

configurarLinks()
navegacaoInicial()
})()

})

Answer 1

Friend try to set the static route of your Styles css:

app.use('/static', express.static(__dirname + '/public'))

you can call it in your html:

/static/css/styles.css

In express for you to call static files from Styles or JS vc sets their static route.