Why are the local .css files and .js file not linked to the index.html file?

Question

I am using node.js and trying send the .html file contains these tags:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="This is my personal profile website" />
<link rel="stylesheet" type="text/css" href="profile_design.css" />
<link rel="stylesheet" href="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="profile.js"></script>

Here is the HTTP server in node.js :

var fs = require('fs');
var http =  require ('http');
http.createServer(function (request, response) {

    console.log('request starting...');

    fs.readFile('C:/Users/.../index.html', function(error, content) {
        if (error) {

            response.writeHead(500);
            response.end();
        } else {
            //response.writeHead(200, { 'Content-Type': 'text/html' });
            response.end(content, 'utf-8');
        }

        console.log(error);
    });

}).listen(8080);

The problem is that the index.html file is return in good manner but all the JavaScript files and the CSS are not sent correctly to the client side. The question is how to send those .js and .css files?

Can you be more specific? What do you mean by "doesn't send correctly" ..? Is there an error, can you show us the stack trace.. ?! Anything? — alessioalex
– alessioalex, Commented Dec 11, 2011 at 9:56
i wish i have no debug tool for the node.js... i think i am going back to php :( — 0x90
– 0x90, Commented Dec 11, 2011 at 9:59

halkazzar · Accepted Answer · 2012-05-02 16:11:35Z

5

I faced the same problem, but did not want to use any external modules or frameworks before I understand what's going on under the hood. So, this is how I've solved the issue for CSS file for myself. Hopefully it will be useful for someone.

Whenever I have a request for /style.css I call this simple function:

function style(response) {

  console.log("Request handler 'style' was called.");

  fs.readFile("style.css", function(error, file) {

    if(error) {

        response.writeHead(500, {"Content-Type": "text/plain"});

        response.write(error + "\n");

        response.end();

    } else {

        response.writeHead(200, {"Content-Type": "text/css"});

        response.write(file);

        response.end();

    }

  });

}

Basically, we read our static files and send them back upon request. Note that you have to take care about routing your requests.

answered May 2, 2012 at 16:11

halkazzar

751 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hellslam Over a year ago

I like this answer because it solves the problem without the need for an additional library.

erenon · Accepted Answer · 2011-12-11 09:55:09Z

1

The browser tries to get the .css and .js resource files via port 8080, thorugh your node.js server. However, your server won't serv any of them but the index.html file irrespectively of the request.

Advice: Use the express.js plugin and set up a bit more complex routing.

answered Dec 11, 2011 at 9:55

erenon

19.2k2 gold badges65 silver badges97 bronze badges

Comments

clyfe · Accepted Answer · 2011-12-11 09:56:00Z

1

You need to have a handler that serves assets like node-paperboy or node-static or make your own.

answered Dec 11, 2011 at 9:56

clyfe

23.8k8 gold badges88 silver badges110 bronze badges

1 Comment

clyfe Over a year ago

If you use connect that is :)

Kareem · Accepted Answer · 2014-07-27 14:43:44Z

0

I am not sure that this answer your question or not, but in my case I add all my css and js files in view folder, then I added the following in my server.js

server.use(express.static(__dirname+'/view/'));

this solved the issue for me

answered Jul 27, 2014 at 14:43

Kareem

8999 silver badges11 bronze badges

Comments

user3408091 · Accepted Answer · 2014-08-25 17:42:34Z

0

easy fix for this issue, is to add your style.css code at the end of your html doc (index.html), right before the ending body tag. This actually worked in my case. Just add:

<style type="text/css"> "your css code goes here" </style>

answered Aug 25, 2014 at 17:42

user3408091

1911 silver badge6 bronze badges

Collectives™ on Stack Overflow

Why are the local .css files and .js file not linked to the index.html file?

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related