CODEWITHSUNDEEP
node.jsexpress
user7516386
user7516386

Reputation:

Express only serving css file in main page

I am learning node and using expressjs the problem is that the css file is only working on the main page and not any other page following is the code for the app:

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

// assets
 app.use(express.static("public"));

// simple file testing
app.get("/anything/:stuff", function(req, res){
var stuff = req.params.stuff;
res.render("love.ejs", {stuff: stuff});
});

// posts page
var books = [
{title:"Harry Potter",author:"JK Rowling",editions:7},
{title:"Peere Kamil",author:"Humaira Saeed",editions:4},
{title:"Mushaf",author:"Abdullah khan",editions:2}
];

app.get("/books", function(req, res){
res.render("books.ejs",{books:books});
});

app.listen(3000, process.env.IP, function(){
console.log("Serving Now!");
});

The following is the code for the page where it is not working.

    <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="app.css" />
<title>demo app</title>
</head>
<body>

<h1>You fell in love with : <%= stuff %> </h1>

<%
if(stuff.toUpperCase() === "WAQAS"){ %>
    <P>GOOD CHOICE HE IS THE BEST</p>
<% } %>



<p>P.S This is the love.ejs file</p>
</body>
</html>

The file is under public directory.

Upvotes: 0

Views: 79

Answers (1)

robertklep
robertklep

Reputation: 203359

Use an absolute URL for the CSS file, so the browser doesn't look for it relative to the current URL:

<link rel="stylesheet" href="/app.css" />

Explanation: say that you open the URL /anything/helloworld in your browser. When your HTML contains just app.css, without the leading slash in front of it, the browser will try and load /anything/app.css (because without that slash it's relative to the current URL), which doesn't point to your CSS file.

When you add the leading slash, express.static will be able to find the CSS file in public/.

Upvotes: 1

Related Questions