Refused to display style because MIME type

January 25, 2022

I’m new to node / express and I’m testing it by building a simple tip calculator app, but I can’t get my CSS to load. I keep getting an error in the console: "Refused to apply style from ‘http://localhost:1000/public/style.css’ because its MIME type (‘text/html’)." I tried changing my path to my static files to a "public" folder as suggested in other answers, but it still doesn’t work.

I think my server may be configured incorrectly, because when I try to load http://localhost:1000/public/style.css in the browser, I get a "CANNOT GET" error. I’m kind of stumped because I’m pretty sure the path is correct; any idea what I’m doing wrong here?

My js file:

const express = require('express');
const app = express();
const port = 1000

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

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

app.listen(port, () => {
  console.log(`tipCalc listening on port ${port}`);
});

my html:

<!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" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="public/style.css">
    </head>
    <body>
        <div class="calculator container-fluid">
            <form class="form">
                <div class="form-group">
                  <label for="formGroupExampleInput">Bill</label>
                  <input type="text" class="form-control bill" id="formGroupExampleInput" placeholder="$0.00">
                </div>
                <div class="form-group">
                  <label for="formGroupExampleInput2">Tip %</label>
                  <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="0%">
                </div>
                <div class="form-group">
                    <label for="formGroupExampleInput2">Number of people</label>
                    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="">
                  </div>
              </form>
              <div class="row result">
                <div class="col-xs-6 tip-result">
                    <h2>Tip amount: <span class="badge badge-secondary">$0</span></h2>
                </div>
                <div class="col-xs-6 total-result">
                    <h2>Total: <span class="badge badge-secondary">$0</span></h2>
                </div>
              </div>
            </div>

        <!-- bootstrap js/jquery -->
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

        <script src="index.js" async defer></script>
    </body>
</html>

my file path:

>Solution :

Instead of using your

app.get('/')

listener, use

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

Note: You’ll need to move your html file to the public folder, the reason I chose to serve the public folder is because exposing the main directory where the code is, is dangerous.