Express Server issue with MIME type ('text/html')

Question

Just started Express server module in my school. I have made a very simple website just to try it but it seems that the css file is not being executed (checked in chrome's terminal cl).

Refused to apply style from 'http://localhost:3000/public/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. home:26
GET http://localhost:3000/public/einstein-home.jpg 404 (Not Found)

const express = require('express');
    const app = express();
    
    app.use(express.static('public')); 
    
    
    app.get('/home', (request, response) => {
        console.log('dirname', __dirname);
        response.sendFile(__dirname + '/views/home.html')
    });
    
    app.get('/about', (request, response) => {
        console.log('dirname', __dirname);
        response.sendFile(__dirname + '/views/about.html')
    });
    
    app.get('/works', (request, response) => {
        console.log('dirname', __dirname);
        response.sendFile(__dirname + '/views/works.html')
    });
    
    
    app.listen(3000, () => {
        console.log('Website about Einstein');
    });

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background-color: #f2f2f2;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    font-style: normal;
    font-weight: 200;
}

.container {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    height: 600px;
    background-color: #FFFFFF;
}

header {
    width: 100%;
    height: 8%;
    background-color: #52bad5;
    border-bottom: 1px solid #2C9AB7;
}

nav {
    float: right;
    width: 50%;
    text-align: right;
    margin-right: 25px;
}
header nav ul {
    list-style: none;
    float: right;
}
nav ul li {
    float: left;
    color: #FFFFFF;
    font-size: 14px;
    text-align: left;
    margin-right: 25px;
    letter-spacing: 2px;
    font-weight: bold;
    transition: all 0.3s linear;
}
ul li a {
    color: #FFFFFF;
    text-decoration: none;
}
ul li:hover a {
    color: #2C9AB7;
}

.text {
    width: 90%;
    text-align: justify;
    font-weight: lighter;
    line-height: 25px;
    float: left;
    padding-left: 20px;
    padding-right: 20px;
    color: #A3A3A3;
}
.about {
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 35px;
    display: inline-block;
    background-color: #FFFFFF;
    margin-top: 0px;
}

.foot {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #717070;
    color: #FFFFFF;
    text-transform: uppercase;
    font-weight: lighter;
    letter-spacing: 2px;
    border-top-width: 2px;
}


.hidden {
    display: none;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="public/style.css">
        <script src="http://use.edgefonts.net/source-sans-pro:n2:default.js"></script>  

    </head>
    <body>
<div class="container"> 
  
  <header> <a href="">
    </a>
    <nav>
      <ul>
        <li><a href="#hero">HOME</a></li>
        <li><a href="#about">ABOUT</a></li>
        <li> <a href="#work">WORK</a></li>
      </ul>
    </nav>
  </header>
  <img src="/public/einstein.jpg" width="auto" height="361" alt=""/>
  <section class="about" id="about">
    <h2 class="hidden">About</h2>
    <p class="text">Welcome "Einsteiners". Feel free to find navigate in our website.</p>
</section>

  <footer>
    <article class="footer_column"> </article>
    <article class="footer_column"> </article>
  </footer>

  <div class="foot">e=mc2</div>
</div>
</body>
</html>

Can you please send me some feedback regarding this issue?

Cheers!

Most likely issue here is that you URL is incorrect. The mime type message is a red herring. You do not need public — Bibberty

Mike 'Pomax' Kamermans Mike 'Pomax' Kamermans · Accepted Answer · 2020-11-03T00:18:49

I can strongly recommend not rolling your own templating: express comes with ejs built in, and if you need something more elaborate, adding better templating through pug or nunjucks are perfectly fine options. Rely on res.render() to generate your HTML files, don't use res.write or res.sendFile.

As for why things are not working properly, remember to read up on how static works: you tell Express which directories it needs to check for URL requests before moving on to the "real" routes, where -crucially- the name of the dir does not map to the URLs.

I.e. if you have this:

app.use(express.static('public'))
app.use(express.static('files'))

then a request to yoursite.tld/css/cake.css will first check for css/cake.css inside public, then inside files, and then it'll fall through to whatever app.get routes might match if there is no path match.

Express Server issue with MIME type ('text/html')

1 Answers