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?

Answer 1

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.

Answer 2

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 .

Answer 3

您需要有一个处理程序来处理诸如node-paperboy或node-static之类的资产，或者使您自己的资产。

Answer 4

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

Answer 5

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>