html view can not load css style because of MIME-type error

Question

I created super simple express app which will display one home.html view from view directory. Everything is ok home.html is displayed but there is no any css styles that i added. In the console i get only one error:

I tried to solve my problem with another answers from stack that I found like:

change app.use()
- from -> app.use(express.static(path.join(__dirname, 'public')))
- to -> app.use(express.static(path.join(__dirname + '/public')))

Okay here you can see how my directory structure looks like

As you can see I created public folder and inside of this folder i keep my css styles, so under the url: http://localhost:8080/public/css/style.css I should see my css styles but I can see only error

But in the same time under this url http://localhost:8080/css/style.css I can find my css file

I am really confused and I do not know what I am doing wrong. I will be very glad If any of you help me.

app.js

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const flash = require('connect-flash');
const routes = require('./routes/index');
const app = express();

app.set('views', path.join(__dirname, 'views'));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

app.use(express.static(path.join(__dirname, 'public')));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cookieParser());
app.use(flash());
app.use('/', routes);

module.exports = app;

server.js

const app = require('./app');

app.set('port', process.env.PORT || 8080);

const server = app.listen(app.get('port'), () => {
    console.log(`Server is up on ${server.address().port}`);
});

home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/public/css/style.css">
    <title>Express</title>
</head>
<body>
    <h1>Express</h1>
</body>
</html>

style.css

body {
    background: #f6f6f6;
}
h1 {
    color: green;
}

because you are sending css with mimetype `text/html` it should be `text/css` — AVX-42, Aug 09 '19 at 11:57
where in `````` in home.html ? i add: `````` so type is ```text/css```. Or you mean another place? — Krzysztof Kaczyński, Aug 09 '19 at 12:00
from sever side it should be `text/css` mimetype. in your html it's not necessary to add `type` attribute. — AVX-42, Aug 09 '19 at 12:02
How can i set MIME-type on my server ? Should i create another endpoint for this css request ? — Krzysztof Kaczyński, Aug 09 '19 at 12:06
refer https://stackoverflow.com/questions/7109732/express-setting-content-type-based-on-path-file — AVX-42, Aug 09 '19 at 12:10
. It must work. express.static makes your public folder equals to http://localhost:3000/. This will map to the public folder directly. You do not need to give public again. — Amaranadh Meda, Aug 09 '19 at 12:17

score 0 · Accepted Answer · answered Aug 09 '19 at 12:47

Ok so I made mistake with express server configuration. Instead of serving static file like

app.use(express.static(path.join(__dirname, 'public')));
app.use('/public', express.static(path.join(__dirname, 'public')));

This happened because /public directory was served under root url

html view can not load css style because of MIME-type error

1 Answers1