1

Console always says : GET http://localhost:8000/public/stylesheets/mystyle.css.

Of course, as you will see in the attached below image, apparently it refers to an incorrect path. I used WebStorm itself to generate the href attribute of CSS.

app.js

var     express = require("express"),
            app = express(),
     bodyParser = require("body-parser"),
       mongoose = require ("mongoose");

app.use(express.static("public"));
app.set("view engine","ejs");
app.use(bodyParser.urlencoded({extended:true}));

header.ejs

<html>
<head>
    <title>My Blog</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="../public/stylesheets/mystyle.css" >
</head>

Project path : enter image description here

LazyOne
  • 158,824
  • 45
  • 388
  • 391
John K
  • 65
  • 7

3 Answers3

3

You have a static relative path in (what I assume is) a HTML snippet/fragment shared by multiple pages in multiple directories in differing depths. I also assume "public" is the name given to the non-exposed root directory of your website. For this reason you should generally avoid the use of ../ relative paths in href="" and src="" attributes and instead use root-relative / or server-generated application-root URLs, also known as "base" URLs. (In ASP.NET this is done with ~/. Node.js does not currently have a built-in base URL feature, but there are third-party packages available that do this).

change this:

<link rel="stylesheet" type="text/css" href="../public/stylesheets/mystyle.css" >

to this:

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

As an aside, if your styleseheets directory contains only *.css files you should consider instead using a directory named styles which contains both .css files and other associated assets, like images and fonts that are referenced by the .css files, as this makes URLs in CSS shorter and without parent-relative paths, e.g.

foo#bar { background-image: url("../images/fooBg.png"); }

becomes:

foo#bar { background-image: url("fooBg.png"); }
Community
  • 1
  • 1
Dai
  • 141,631
  • 28
  • 261
  • 374
  • No unfortunately. the console now says: X GET localhost:8000/stylesheets/mystyle.css. Why? – John K Feb 24 '17 at 23:30
  • Please see the image again. Your solution doesn't solve the problem yet although I'm going to choose your answer as the best answer. – John K Feb 24 '17 at 23:54
  • 1
    @NorwayLover I see you have your static files under your `Views` directory. I'm not too familiar with Node.js Express and how it exposes static files, so I cannot provide further assistance, sorry. – Dai Feb 25 '17 at 00:34
  • Oh, your answer was great and instructive. Nice to meet a precise dev like you! – John K Feb 25 '17 at 00:38
2

Express static directs your app to your static files for you (you have already taken care of that), try removing the public from your view url, like this:

<html>
<head>
<title>My Blog</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.css" type="text/css">
<link rel="stylesheet" type="text/css" href="stylesheets/mystyle.css" >
</head>
1

If the other answers don't work, it might have something to do with the way you set the static directory with express. As mentioned in the express docs:

However, the path that you provide to the express.static function is relative to the directory from where you launch your node process. If you run the express app from another directory, it’s safer to use the absolute path of the directory that you want to serve:

That said, you may need to specify the absolute path to the public directory like so:

var path = require('path');
...


app.use('/static', express.static(path.join(__dirname, 'public')))

...
<link rel="stylesheet" type="text/css" href="/stylesheets/mystyle.css" >
Brian
  • 1,873
  • 16
  • 25