0

How can you load the .js .csv and .css files included within an HTML file, displayed with Node.js? (Without frameworks like Express)

E.g. <script src="clock.js"></script>

In Firefox, it shows that the page, fs.readFile('./index.html'), is requesting clock.js, jquery.js, etc. as html files, probably because of response.writeHead being text/html.

Is there a way to do:

if file included in index.html = .js
set writeHead to application/javascript

if file included in index.html = .css
set writeHead to text/css

Without specifying in advance what files index.html may include? (e.g. if in the future, index.html also uses menu.js, you wouldn't need to update the node.js script)

Is there a way to see what files are being requested by index.html, then modify the headers of those files (e.g. .js has application/javascript)?

Improve this question
5
  • The browser receives your html file, and then requests all the other resources included in that html. What do you mean without frameworks? What is the limit of the modules you want to use, http module ? This is a kind of routing, you can check the requested URL address and if it ends in .js set the headers for JavaScript, etc... Commented Nov 13, 2014 at 16:24
  • @Cristy Yes, I'd like to get a variable containing all the files that index.html requests. Then select the appropriate header for these files, then output them to the client. I am open to using more modules if necessary, but preferably no large frameworks/engines like Express or Socket.IO. How do you check the requested URL address if the URL is included within index.html (instead of in node.js source as fs.readFile(...))? Commented Nov 13, 2014 at 16:37
  • You do not have to "send" the files. You just to listen for the requests. The browser itself will parse the html file and request the other resources included in that file. You just need to deal with requests coming from the browser. nodejs.org/api/http.html Commented Nov 13, 2014 at 16:40
  • Thanks. How do you find the details of the files being requested by index.html? request.url only returns e.g. ?page=index with no reference to the index.html read by fs.readFile. (I have set it up like: if query.page == login fs.readFile(login.html) or if query.page == about fs.readFile(aboutus.html)) Commented Nov 13, 2014 at 16:52
  • @Cristy The problem was solved (my script was structured incorrectly, so request.url did not work). Could you post this as an answer so I can vote up/accept? Commented Nov 14, 2014 at 11:36

1 Answer 1

Reset to default
2

Is this the sort of thing you are looking for?

    var http = require("http");
    var fs = require("fs");
    var path = require("path");
    var server = http.createServer(function(request, response) {
        //typically what will happen here is that you will see
        //see the request for the page (index.html?) first and
        //then the browser's subsequent requests for js, css etc files
        var url = request.url;
        var file = //do something clever to extract the file name from the url ( url.split("/")?)
        var html = fs.readFileSync(file,"utf-8");
        //probably want to check the file extension here to determine the Content-Type
        response.writeHeader(200, {"Content-Type": "text/html"});  
        response.write(html);  
        response.end();  
    });

server.listen(8081);
console.log("Server is listening");

A bit agricultural, and you would probably run in to all sort of problems with routing - but its the idea.

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

4 Comments

Thank you. When I tried request.url before it just answered ?page=index. Would request.url answer with index.html, clock.js, jquery.js, etc. in your code? (The structure is: if query.page = index { readFile(index.html) } same with ?page=login, ?page=status, etc. Inside index.html are <script> tags referencing local JS files.) I will try out your code when I next have access to a machine with node.js.
Remember, calls to the domain root return the default document - usually "index.html". So when processing request.url you need to treat "/" as "index.html". In your case you have a parameter "?page=index". This is effectively a request to "index.html?page=index. If you have clock.js & jquery on your page, then you will see requests for those files following the request for index.html.
var url = request.url; worked. The files now load. I just had request.url in the wrong function before. Thank you.
Chromium's Console and Firefox's Network Analysis were useful for this.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.