CODEWITHSUNDEEP
javascriptnode.js
Igor Cheglakov
Igor Cheglakov

Reputation: 555

How do I send CSS file along with HTML file?

I am trying to figure out a basic Node.js server. I want it to send my index.html and styles.css files when a client tries to connect to the "root" URL (what is the correct term btw?). Here's the code.

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

function send404response(response){
    response.writeHead(404, {"Content-Type":"text/plain"});
    response.write("page not found");
    response.end();
}
function onRequest (request, response) {
    if(request.method == "GET" && request.url == '/'){
        response.writeHead(200, {"Content-Type":"text/html"});
        fs.createReadStream("./index.html").pipe(response);

        response.writeHead(200, {"Content-Type":"text/css"}); 
        fs.createReadStream("./styles.css").pipe(response);


    }else{
        send404response(response);
    }
}
http.createServer(onRequest).listen(8888)

console.log('the server is running...');

The styles.css failes to load. Error on the client side: GET http://localhost:8888/styles.css net::ERR_ABORTED 404 (Not Found)

Upvotes: 0

Views: 5138

Answers (3)

banerjeesouvik
banerjeesouvik

Reputation: 212

function onRequest (request, response) {
    if(request.method == "GET" && request.url == '/'){
        response.writeHead(200, {"Content-Type":"text/html"});
        fs.createReadStream("./index.html").pipe(response);

        response.writeHead(200, {"Content-Type":"text/css"}); 
        fs.createReadStream("./styles.css").pipe(response);


    }else{
        send404response(response);
    }
}

In the above code snippet there is a problem with the if condition. You are only checking / url. When your html file tries to load the css, it makes a GET request to the server and the request url is /cssFileName.css. But in the above code you are not at all allowing the route. You are serving only / url and all other routes are giving 404 error as per your logic. So, you need to consider /cssFileName.css url as well to serve your css file. So ideally your code should be like this...

function onRequest (request, response) {
    if(request.method == "GET" && request.url == '/'){
        response.writeHead(200, {"Content-Type":"text/html"});
        fs.createReadStream("./index.html").pipe(response);
    } else if (request.method == "GET" && request.url == '/cssFileName.css')
        response.writeHead(200, {"Content-Type":"text/css"}); 
        fs.createReadStream("./styles.css").pipe(response);
    }else{
        send404response(response);
    }
}

But ideally for all the css and assets (images, videos), you should serve those from a static folder. So use express instead. For reference https://expressjs.com/en/starter/static-files.html

Upvotes: 0

Igor Cheglakov
Igor Cheglakov

Reputation: 555

The implementation that worked in my particular case I used the swich construct to handle different requests: 

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

function send404response(response){
    response.writeHead(404, {"Content-Type":"text/plain"});
    response.write("page not found");
    response.end();
}
function onRequest (request, response) {
    if(request.method == "GET"){

        console.log("request URL is: " + request.url);
        switch (request.url){
            case "/":
            response.writeHead(200, {"Content-Type":"text/html"});
            fs.createReadStream("./index.html").pipe(response);
            break;
            case "/styles.css":
            response.writeHead(200, {"Content-Type":"text/css"});
            fs.createReadStream("./styles.css").pipe(response);
            break;
        }
    }else{
        send404response(response);
    }
}
http.createServer(onRequest).listen(8888)

console.log('the server is running...');

Upvotes: 0

Gaurav Punjabi
Gaurav Punjabi

Reputation: 153

I think I know what the problem is. So you're sending every request to the function onRequest, even the link tag request goes there. Since the IF condition evaluates to false, it sends a 404 error as you have specified. Try using an express server and creating routes, or add another condition to check if the file exists at the path and if it does, then return that file as a response.

Upvotes: 1

Related Questions