Why does node.js app CSS load in my IDE but not on a localhost?

Question

I am making a nodejs application using LightTable, and the css seems to be loading fine when I indicate a relative path to the file in my <link href=""> tag. When I run node index.js, however, the server starts up and the page loads fine, but I get a console error and my own 404 saying the CSS file could not be found at the path specified. I tried using Heroku's Foreman Start as well, but no dice. Here is the html:

<!DOCTYPE html>
<html>
    <head>
        <title>
            Home
        </title>
        <link href="../../styles/master.css" rel="stylesheet" type="text/css" />
    </head>
...

Here is my directory tree structure:

.
├── Procfile
├── README.md
├── index.js
├── package.json
├── resources
│   └── images
│       └── tokyo.jpg
├── styles
│   └── master.css
└── views
    ├── get
    │   ├── home.html
    │   └── posts.html
    └── post
        └── new.html

EDIT: after finding the answer to the question, the below information became relevant. I have commented out the new code that makes the CSS and background image load as desired.

Here is my routing and server code. I am not using Express, on purpose:

    // routes
    var homeREGEX = new RegExp('^/?$');
    var newREGEX = new RegExp('^/posts/new/?$');
    var postsREGEX = new RegExp('^/posts/?$');
 // var cssREGEX = new RegExp('^/styles/master.css/?$');             <--| static resources also
 // var tokyoREGEX = new RegExp('^/resources/images/tokyo.jpg/?$');  <--| need routes. 

    // server
    var server = http.createServer(function(request, response){
      var pathname = url.parse(request.url).pathname;

      if (homeREGEX.test(pathname)) {
        renderHome(request, response);

      } else if (newREGEX.test(pathname)) {
        renderPostForm(request, response);
      } else if (postsREGEX.test(pathname)) {
        addNewPost(request, response);
   // } else if (cssREGEX.test(pathname)) {           <--| and they need to get
   //   sendCSS(request, response);                   <--| served individually as
   // } else if (tokyoREGEX.test(pathname)) {         <--| they are requested
   //   sendTokyo(request, response);
      } else {
        error404(request, response);
      }
    });

What's the URL you see in your browser when you're looking at the page and it doesn't work? — Matti Virkkunen, Sep 24 '14 at 06:39
localhost:3000, but if I navigate over to localhost:3000/styles/master.css, I get a 404 not found, error. — kurofune, Sep 24 '14 at 06:51

Pierre Rust · Accepted Answer · 2014-09-24T10:35:41.130

1

What's the url you use in your browser when viewing the page ? My guess is that is does not contains the views/get part, which means that you don't need the ..\.. in your link href attributes.

Also, make sure your are actually serving these static files (it seems you're not). If you're using express (with nodejs ) for example, you'll need something like this :

app.use(express.static('resources'));
app.use(express.static('style'));

See express.static documentation.

edited Sep 24 '14 at 10:35

answered Sep 24 '14 at 06:40

Pierre Rust

2,474
18
15

I've tried removing and adding "../"s in every combination I can think of. Not working yet! – kurofune Sep 24 '14 at 06:46
ok, but please give your url, otherwise there's nothing we can do. – Pierre Rust Sep 24 '14 at 06:51
I posted it above: localhost:3000. In the console it says `x-GET localhost:3000/styles/master.css`, and confirmed a 404 not found error when I navigated there. – kurofune Sep 24 '14 at 06:57
are you sure you're actually serving the file ? see my updated answer. – Pierre Rust Sep 24 '14 at 10:36
This might be my issue, actually. I am not using Express, because I want to understand the internals and then build my way up to the framework. How can I do something like app.use without Express? – kurofune Sep 24 '14 at 17:09
Okay, I figured this out! It was that I didn't have route handler for the path to the css file. I included the necessary details into my server and voila. It worked. I guess that the other technologies that I have been using do all that under the hood, or something. I have accepted your answer, but I would appreciate it if you could update it explaining this fact. It is a beginner error, but easy to fall into nonetheless. I will add my old routing code in an edit to my question too. – kurofune Sep 24 '14 at 18:03

score 1 · Answer 2 · answered Sep 24 '14 at 06:45

1

Maybe you can try to put the exact path instead of ../../

<link href="/Procfile/styles/master.css" rel="stylesheet" type="text/css" />

answered Sep 24 '14 at 06:45

user3835327

570
1
5
19

Why does node.js app CSS load in my IDE but not on a localhost?

2 Answers2