Issue
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.
Solution
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.
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" >to
<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
Answered By - godofmischief Answer Checked By - Timothy Miller (PHPFixing Admin)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.