1

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.

Lesha Ogonkov
  • 1,218
  • 8
  • 20
ashok kumar
  • 49
  • 5

1 Answers1

1

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;
});
Marcos Casagrande
  • 37,983
  • 8
  • 84
  • 98
  • When I use avove code, in browser no page opens. It gives message - This localhost page can’t be foundNo webpage was found for the web address: http://localhost:4000/ HTTP ERROR 404 – ashok kumar Jun 10 '20 at 02:38
  • what's the error code? Without stack trace it's impossible to help you. – Marcos Casagrande Jun 10 '20 at 22:31