0
votes

I am an extremely new beginner with Node.js and Express. I am getting these errors from the console.

Refused to apply style from 'https://brawlhallastats.herokuapp.com/assets/css/bootstrap.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type and strict MIME checking are enabled.

The CSS loads how it should be locally, but when I look at the deployed app on Heroku, it just shows plain HTML with no styling. Why is this? I have no idea why and would greatly appreciate some help as I've been searching for help and could not find a direct answer that applies to me.

I believe the problem persists somewhere in the code below. For reference, this is my layout:

    C:/
        index.html
        server.js
        package.json
        .gitignore
        assets
            css
                all_the_css_files in here
        node_modules
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="assets/css/core.css" rel="stylesheet" type="text/css">
    <link href="assets/css/icons.css" rel="stylesheet" type="text/css">
    const express = require('express');
    const app = express();
    const path = require('path');

    app.get('/', function(req, res) {
        res.sendFile(path.join(__dirname, 'index.html'));
    });

    app.listen(process.env.PORT || 4000, function(){
        console.log('Your node js server is running');
    });

I expected the website to load with all the styles correctly. Any explanation would be greatly appreciated.

2
Looks like it is heroku related?shaochuancs
Please share how are you importing stylesheets in your index.htmlSubbu
Yes, sorry, Updated the page with import example.BrawlhallaStats

2 Answers

1
votes

I figured it out and I am writing the concise answer here as people new to express will probably run into this as well.

I was running into this problem because I needed to set a public folder. All I did was create a folder named public, put assets inside public, then include this line into the server.js file.

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

For me the solution was, instead Of:

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

I used:

app.use(express.static(__dirname));

now everything working correctly