My first app doesn't serve css even if I set express.static() and have a correct path

Question

As the title says I'm trying to build my first node app and I'm encountering a problem.

Yesterday everthing worked fine. Now when I opened up my PC I get "Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/css.css"."

I find it very strange because I didn't edit anything, and it stopped working.

app.js

/*Libraries*/

var express = require("express"),
    app     = express()

/*Routes*/
    var indexRoute = require("./routes/index");
    app.use(indexRoute);
/*Modeles*/


/*Configuration*/
app.set("view engine", "ejs");
app.use(express.static('public'));

app.listen(3000, function() {
    console.log("==================================");
    console.log("===Serverul a pornit cu succes!===")
    console.log("==================================");
});

index.js

var express = require("express"),
    router = express.Router()

router.get("*", function(req, res) {
        res.render("index/404");
});

module.exports = router;

404.ejs

<% include ../../partials/header %>
    <section id="container-404" class="container-fluid">
        <div class="row">
            <div class="col-12">
                <h1 class="display-1">404</h1>
            </div>
        </div>
    </section>
<% include ../../partials/footer %>

header.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/reset.css">
    <link rel="stylesheet" href="/fontawesome-all.min.css">
    <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans:400,800" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="/css.css">
    <title>Best DavNic73</title>
</head>
<body>

Folder structure:

root { app.js

partials > footer.ejs, header.ejs

public > css.css and the other 2 css files

routes > index.js

views > index > 404.ejs }

My 2 cents here, could it be somehow related to this issue? stackoverflow.com/questions/44894236/…, maybe you have to specify a mount path, like this app.use('/static', express.static(path.resolve(__dirname, '../client/dist/static'))); — Alejandro Vales
– Alejandro Vales, Commented Sep 8, 2018 at 9:44
@AlejandroVales thanks for your effort, but the first answer got it right. — Octavian Niculescu
– Octavian Niculescu, Commented Sep 8, 2018 at 9:50

Jonas Wilms · Accepted Answer · 2018-09-08 09:40:33Z

1

You currently got the following routing -> 404 -> public. That means that the 404 route catches all the requests, the public route cannot be reached. You have to mount the handlers in the right order:

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

answered Sep 8, 2018 at 9:40

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

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

1 Comment

Octavian Niculescu Over a year ago

That actually worked but I don't really get why. Is app.use(express.static('public')); a route so it's getting overwritten if it's not the first or what? ////nevermind, I got it. I will accept your answer ASAP. Thanks a lot.

Collectives™ on Stack Overflow

My first app doesn't serve css even if I set express.static() and have a correct path

app.js

index.js

404.ejs

header.ejs

Folder structure:

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

app.js

index.js

404.ejs

header.ejs

Folder structure:

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related