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);
3 answers
solution1
1 2014-04-05 17:00:15
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.
solution2
0 2014-04-05 00:47:58
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.
solution3
0 ACCPTED 2014-04-05 19:03:08
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);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.