CSS not loading with node.js and express

Question

My CSS won't load when running my HTML. The HTML is hooked up correctly with the CSS but express and node.js seem to be ignoring it. I can't understand the articles and tutorials or other stack overflow questions so I'll just send the code.

I also get an error that says the MIME-type is text/HTML even though I've checked multiple times, the MIME-type is indeed text/CSS.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Infinite Road</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
    <div class="infinite">
        <div class="shadow"></div>
    </div>
</body>
</html>

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: radial-gradient(#9bdfff, #009be4);
  }
  .infinite {
      position: relative;
      width: 800px;
      height: 160px;
      background: #525252;
      transform-origin: bottom;
      transform-style: preserve-3d;
      transform: perspective(500px) rotateX(30deg);
  }
  .infinite::before {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      width: 100%;
      height: 10px;
      background: linear-gradient(90deg, #fff 0%, #fff 70%, #525252 70%, #525252 100%);
      background-size: 120px;
      animation: animate 0.5s linear infinite;
  }
  @keyframes animate {
      0% {
          background-position: 0px;
      }
      100% {
          background-position: -120px;
      }
  }
  .infinite::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 30px;
      background: #333;
      bottom: -30px;
      transform-origin: top;
      transform: perspective(500px) rotateX(-25deg)
  }
  .shadow {
      position: absolute;
      bottom: -93px;
      left: 50%;
      transform: translateX(-50%);
      width: 95%;
      height: 60px;
      background: linear-gradient(#000, transparent);
      opacity: 0.5;
  }

JS:

const path = require('path');
const { readFile } = require('fs');
const app = express();

app.get('/', (request, response) => {
    response.sendFile(path.join(__dirname, "index.html"))
});

app.get('/', (request, responseC) => {
    responseC.sendFile(path.join(__dirname, "style.css"))
});

app.listen(process.env.PORT || 8080, () => console.log('App availible on http://localhost:8080'))

Stackoverflow told me there's too much code, not enough text so I tried to add more.

On Stack Overflow the questions have to be self-contained. That means the question must have all necessary information to be answerable. — user16540390
– user16540390, Commented Nov 29, 2021 at 21:48
What can I add? Sorry, I was having trouble formatting the code. — BlitzDBS
– BlitzDBS, Commented Nov 29, 2021 at 21:49
Please provide a minimal reproducible example direct in your code. — user16540390
– user16540390, Commented Nov 29, 2021 at 21:49
You have same routes. The second should be app.get('/style.css', (request, responseC) => { — user16540390
– user16540390, Commented Nov 29, 2021 at 21:57

Bhaskar · Accepted Answer · 2021-11-30 03:29:28Z

1

create a folder with name "public" in your project root directory and use the following code to serve images, CSS files, and JavaScript files in a directory named public:

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

or

const path = require('path')
app.use('/static', express.static(path.join(__dirname, 'public')));

if you have done everything right then you can access file like this:

http://localhost:3000/css/style.css

css link

 <link rel="stylesheet" href="/style.css">

answered Nov 30, 2021 at 3:29

Bhaskar

3462 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bhaskar Over a year ago

you can also look at official express documentation expressjs.com/en/starter/static-files.html

BlitzDBS Over a year ago

I already found a solution. I messed up and just did "/" in my app.get. The answer above by me is the correct one and I need to wait 1 more day to mark it as correct.

Bhaskar Over a year ago

This is correct way to serve static files in node.js. BlitzDBS's answer is not so commonly used.

BlitzDBS Over a year ago

I followed a fireship video and I got this from a comment on the original question.

moken · Accepted Answer · 2023-07-08 05:36:29Z

1

Change

app.get('/', (request, responseC) => {`

to

app.get('/style.css', (request, responseC) => {

edited Jul 8, 2023 at 5:36

moken

6,92112 gold badges30 silver badges43 bronze badges

answered Nov 29, 2021 at 22:00

BlitzDBS

631 silver badge7 bronze badges

1 Comment

moken Over a year ago

Answer needs supporting information Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

CSS not loading with node.js and express

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related