Why my css file is not loading when deployed in heroku? P.S: I'm using ejs-CodePudding

I have deployed my app on heroku. Using Node.js Express ejs.

But for some reason it is not loading my css.

Errors :

Unchecked runtime.lastError: The message port closed before a response was received.
Refused to apply style from 'https://**.herokuapp.com/public/css/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Failed to load resource: the server responded with a status of 404 (Not Found)

These are the errors I'm getting. When I inspect the page.

My file structure : File Structure

app.js code

const express = require("express");
const bodyParser = require("body-parser");
const date=require(__dirname  "/date.js");

const app = express();

app.set("view engine", "ejs");

app.use(express.static("public"));
app.use(bodyParser.urlencoded({extended: true}));

header.ejs code

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>TO-DO LIST</title>
  <link href="css/styles.css" rel="stylesheet" type="text/css" >
</head>

Please someone help me with this issue.

Edit :

The above mentioned errors (1 and 3) are not due to the code. They are due to the added extensions to my browser.
After removing the extensions error 1 and error 3 were gone. But error 2 still present.

CodePudding user response：

After rigorous research and trying so many ways finally I'm able to resolve my issue by myself.

I have done some major changes, and my issue was resolved.

I have changed my file structure a little bit.
From this to this
I have created a new directory called partials in the views directory and moved my header.ejs and footer.ejs files to that directory.
In header.ejs file I have changed the code from this

<link href="css/styles.css" rel="stylesheet" type="text/css" >

<link href="/css/styles.css" rel="stylesheet" type="text/css" >

In other .ejs files I have included the header.ejs and footer.ejs as follows:
```
<%- include("partials/header"); -%>
<%- include("partials/footer"); -%>
```

And that's how I am able to solve my issue.

Hakuna Matata