Kevin Powell - Community•6d ago

Express server not loading my stylesheet

Hello guys, sorry to disturb you all; I try to build a small server using express; my html file is being delivered but the stylesheet related to it isn't... I don't understand why, I'm having the following error in the browser:

Refused to apply style from 'http://localhost:8080/styles/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Here is my code:

import express from 'express';
import path from 'path';
import { fileURLToPath } from 'url';
import {router} from '../routes/root.js'


const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const port = 8080;
const app = express();

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

// Handle form submission
app.use(express.urlencoded({extended : false}));


app.get('/M00967932', router);


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

////
import express from 'express';
import path from 'path';
import  {fileURLToPath} from 'url';


const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const router = express.Router();

router.get('/M00967932(/index.html)?', (req,res) => {
    res.sendFile(path.join(__dirname, '../public/HTML/index.html'));
});

export {router};

import express from 'express';
import path from 'path';
import { fileURLToPath } from 'url';
import {router} from '../routes/root.js'


const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const port = 8080;
const app = express();

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

// Handle form submission
app.use(express.urlencoded({extended : false}));


app.get('/M00967932', router);


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

////
import express from 'express';
import path from 'path';
import  {fileURLToPath} from 'url';


const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const router = express.Router();

router.get('/M00967932(/index.html)?', (req,res) => {
    res.sendFile(path.join(__dirname, '../public/HTML/index.html'));
});

export {router};

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../styles/style.css" />
    <title>Website</title>
  </head>
  <body>
    <h1>Just some text</h1>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../styles/style.css" />
    <title>Website</title>
  </head>
  <body>
    <h1>Just some text</h1>
  </body>
</html>

I don't understand, what is the problem here please; the link in my html file is correct but when I open it with live server it works... what is my mistake here please

1 Reply

FakerOP•6d ago

ah I wrongly set up the file path for public

Gaming

Programming

Express server not loading my stylesheet