Just delved into the world of node / express and decided to test my skills by creating a simple tip calculator app. However, I seem to have hit a roadblock with loading my CSS. The console keeps throwing this error:
"Refused to apply style from 'http://localhost:1000/public/style.css' because its MIME type ('text/html')."
I already attempted moving my static files to a "public" folder like some suggestions advised, but it's still not functioning properly.
I suspect that my server configuration might be off, since attempting to access
http://localhost:1000/public/style.cssCANNOT GET error. I'm fairly certain that my path is right. Any thoughts on what could be causing the issue here?
Below is 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}`);
});
This is the html code in use:
<!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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="24464b4b50575056455464100a120a15">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="563c272333242f166578637867">[email protected]</a>/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8defe2e2f9fef9ffecfdcdb9a3bba3bc">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<script src="index.js" async defer></script>
</body>
</html>
Here are details pertaining to the file path: