Recently, I started learning about Express server module in my school. To practice, I created a simple website but encountered an issue with the CSS file not being executed (checked using Chrome's terminal).
- 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>If you have any suggestions or feedback regarding this issue, please let me know!
Cheers!