How to reference css and script files into a node.js app?

Question

I've read this link Node.js - external JS and CSS files (just using node.js not express) and comprehended somewhat but still do not know where to plug them in, in my case. Consider a 'Hello World' node.js app bellow, 2 lines, link and script, in the head section would not work. I guess because they are not web-reference yet. So, how do I include them in? If I do like the link suggests, would they be outside of the head section?

var http = require('http');
var html = 
    '<html>'+
        '<head>'+
            '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">'+
            '<link rel="stylesheet" type="text/css" href="./mystyle.css">'+
            '<script src="./myscript.js"></script>'+
        '</head>'+
        '<body>'+
            '<p>Hello World!</p>'+
        '</body>'+
    '</html>';

http.createServer(function(request, response) {
    response.writeHead(200, {'Content-Type': 'text/html'});
    response.write(html);
    response.end();
}).listen(80);

As it is, you program only knows how to server the exact same HTML no matter what the request looks like. Here is an example of how to handle most common files gist.github.com/hectorcorrea/2573391 (or as the answer suggested use a module like connect static or express static) — Hector Correa
– Hector Correa, Commented Apr 5, 2014 at 1:01

amay0048 · Accepted Answer · 2014-04-05 17:35:33Z

1

You should be using response.writeHead, not request.writeHead.

Also, the current code will return the same file regardless of the js or css request.

edited Apr 5, 2014 at 17:35

answered Apr 5, 2014 at 17:00

amay0048

1,09110 silver badges11 bronze badges

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

1 Comment

ngungo Over a year ago

Is it stupid of me, or what? :) Well, it would return with the words 'hello world' properly formatted id the .css file correctly served. Thanks! I'll keep working on it

ploutch · Accepted Answer · 2014-04-05 00:47:58Z

0

Basically, you need the server to deliver your public files. Now the easiest way to do this would be to use express, and set up the static middleware.

However, if you really don't want to use express, I still think the easiest way to do this would be to use the connect static middleware.

Something along the lines of :

var http = require('http');
var static = require('static')('/');

http.createServer(static).listen(80);

This would create a basic web server delivering the files in your / directory.

answered Apr 5, 2014 at 0:47

ploutch

1,21410 silver badges12 bronze badges

Comments

ngungo · Accepted Answer · 2014-04-05 19:49:33Z

I got it, finally! Like I said it would help me to understand the basic structure and interaction between node.js and browser. Thank you everyone. Here is the code.

var http = require('http');
var fs = require('fs');
var i = 0;

var html = 
    '<html>'+
        '<head>'+
            '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">'+
            '<link rel="stylesheet" type="text/css" href="./mystyle.css">'+
            '<script src="./myscript.js"></script>'+
        '</head>'+
        '<body>'+
            '<p>Hello World!</p>'+
        '</body>'+
    '</html>';

http.createServer(function(request, response) {
    i++;
    console.log('Request #'+i+': '+request.url);
    if (request.url.indexOf('.js') != -1) {
        fs.readFile(__dirname + '/misc/myscript.js', function (err, data) {
            if (err) console.log(err);
            else {
                console.log('/misc/myscript.js: fs.readFile is successful');
                response.setHeader("Content-Length", data.length);
                response.setHeader("Content-Type", 'text/javascript');
                response.statusCode = 200;
                response.end(data);
            }
        });
    }
    else if (request.url.indexOf('.css') != -1) {
        fs.readFile(__dirname + '/misc/mystyle.css', function (err, data) {
            if (err) console.log(err);
            else {
                console.log('/misc/mystyle.css: fs.readFile is successful');
                response.setHeader("Content-Length", data.length);
                response.setHeader("Content-Type", 'text/css');
                response.statusCode = 200;
                response.end(data);
            }
        });
    }
    else {
        response.writeHead(200, {'Content-Type': 'text/html'});
        response.write(html);
        response.end();
    }
}).listen(80);

Collectives™ on Stack Overflow

How to reference css and script files into a node.js app?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related