Question

150

Using node.js to serve up basic web page with CSS and JS includes

rated 0 times [ 157] [ 7] / answers: 1 / hits: 40897 / 11 Years ago, thu, july 4, 2013, 12:00:00

I am coming from a (traditional) server side scripting (PHP) background and am trying to experiment with Node to see what the fuss is all about.

Objective: serve up a simple web document with some style sheets and scripts on it.

My node.js script:

var http = require('http');

var fs = require('fs');



fs.readFile('index.html', function (err, html) {

    if (err) {

        throw err; 

    }       

    http.createServer(function(request, response) { 

        response.writeHeader(200, {Content-Type: text/html});  

        response.write(html);  

        response.end();  

    }).listen(1337, '127.0.0.1');

});

index.html:

<!DOCTYPE html>

<html>

    <head>

        <meta charset='utf-8'> 

        <title>Node.js test</title>

        <link rel=stylesheet media=screen type=text/css href=css/plugin.css />

        <link rel=stylesheet media=screen type=text/css href=css/xGrid.css />

        <link rel=stylesheet media=screen type=text/css href=css/jquery-ui/jquery-ui-1.10.1.custom.min.css />

        <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js></script>

        <script src=https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js></script>

        <script src=js/slate.js></script>

        <script src=js/slate.portlet.js></script>

        <script src=js/slate.message.js></script>

        <script src=js/plugin.js></script>

    </head>

    <body>

        <h1 class=styled-h1>Test</h1>

    </body>

</html>

The problem I am facing:

The two script includes coming from the Google CDN are loaded on to the document fine. However, every other style sheet or script being called from my local file system get interpreted as text/html and so don't have the intended effect. Here is a screenshot from Google Chrome console:

enter

I want to understand why this is happening.

PS: I know I can use a framework like Express to make things easier but I want to get a hold of the fundamentals first.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tyreese

Add To Favorites

Follow

Total Points: 739

Total Questions: 95

Total Answers: 98

Location: Belize

Member since Mon, Jun 20, 2022

2 Years ago

tyreese questions

1 React: Changed state in Child component. How to see the change in parent component?

Thu, May 12, 22, 00:00, 2 Years ago

1 Webpack module federation and react-router-dom

Sun, Jan 9, 22, 00:00, 2 Years ago

1 Avoid rerendering every component in list while updating only one in React

Sat, Dec 11, 21, 00:00, 3 Years ago

1 How to use Datatable in Reactjs when the data from API

Wed, Sep 2, 20, 00:00, 4 Years ago

1 JavaScript heap out of memory while build react app in docker container

Sat, Jul 11, 20, 00:00, 4 Years ago

View All

answered 11 Years ago jananauticat · Accepted Answer

Simple: you're setting the Content-Type header to text/html, always. Also, it will always serve your index.html file. Look:

fs.readFile('index.html', function (err, html) {

    if (err) {

        throw err; 

    }       

    http.createServer(function(request, response) { 

        response.writeHeader(200, {Content-Type: text/html});  // <-- HERE!

        response.write(html);  // <-- HERE!

        response.end();  

    }).listen(1337, '127.0.0.1');

});

You should parse the URL, look up what file you want to require, read its contents and write them to the response if it exists, otherwise serve an 404 error. Also, you'll need to set the correct headers.

So, do you still want to do it at your own?

At least, try something like send, which is a basic static file server.