CODEWITHSUNDEEP
templatesdenooak
ashok kumar
ashok kumar

Reputation: 49

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:4000/style.css"

I am using deno, oak and denjucks. The file structure is as below - 

index.html
index.ts
style.css

the code I have used are as below - index.ts is-

import {Application, send} from "https://deno.land/x/oak/mod.ts";
import denjucks from "https://deno.land/x/denjucks/mod.js";
const app = new Application();
const HOST = "http://localhost";
denjucks.configure('', { autoescape: true });
const PORT = 4000;
let res = denjucks.render("index.html", {txt: "World"});
app.use(async (context) => {
  context.response.body = res;
  });

console.log(`Server started at: ${HOST}:${PORT}`);
await app.listen({ port: PORT });

index.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="./style.css" type="text/css">
    <title>Document</title>
</head>
<body>
    <h1>{{txt}}</h1>
    <h1>Hello World</h1>
</body>
</html>

style.css - 

body{
    background: tomato;   
}

when i execute code deno run --allow-all index.ts, in chrome developer tools console a warning message is coming - Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:4000/style.css". and css code is not applying. The reason behind this fault is not clear.

Upvotes: 1

Views: 191

Answers (1)

Marcos Casagrande
Marcos Casagrande

Reputation: 40414

All your routes are serving text/html, since you're always responding with denjucks.render("index.html", {txt: "World"});, so when you request style.css you're' responding with index.html

You need to set up a static file middleware so ./style.css can be served correctly.

app.use(async (context) => {
  await send(context, context.request.url.pathname, {
    root: `${Deno.cwd()}`
  });
});

app.use(async (context) => {
   context.response.body = res;
});

Upvotes: 1

Related Questions