How to load CSS file in node.js?

Question

I can't understand WHY css file can't be loaded.

my directory and files are...

/nodejsExample  
   /css  
     intro.css     
   home.html  
   main.js

and codes below...

main.js

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

    function templateHTML(description, queryDataid){
        var _template=`
    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>11</title>   
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.css">

    </head>
    <body>
        ${description}
    </body>
    </html>
    `;
        return _template;
    }

    var app = http.createServer(function(request, response){
        var path = require('path');
        var _url = request.url; //
        var queryData = url.parse(_url, true).query;
        var pathname = url.parse(_url, true).pathname;
        console.log("1. "+pathname);
        console.log("2. "+queryData.id);

        if(pathname === '/'){

            if(queryData.id === undefined){ //홈화면일때

                    var title = 'Welcome to esseltree';
                    var description = fs.readFileSync("home.html","utf-8"); // home.html을 description에 대입한다.

                    var template = templateHTML(description, queryData.id);
                    response.writeHead(200);
                    response.end(template);

            }
            else{ // 홈화면이 아닐때
                var title = queryData.id;
                fs.readFile(`html/${queryData.id}`, 'utf-8', function(err, description){
                    var template = templateHTML(description, queryData.id);
                    response.writeHead(200);
                    response.end(template);

                });             

            }
        }
        else{
            response.writeHead(404);
            response.end('end.....');

        }
    });
    app.listen(80);

home.html

 <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.css">
        <link rel="stylesheet" href="../css/intro.css" type="text/css" > 
    </head>
    <body>
            <div class="ui inverted vertical masthead center aligned segment" id="catalina">
                <div class="ui text container">
                    <h1 class="ui inverted header">에셀나무그룹홈</h1>
                    <h3 class="ui inverted header">누구보다 빛날 아이들의 공간</h1>
                    <div class="huge ui inverted button">자세히 알아보기<i class="angle right icon"></i>    </div>
                </div>

            </div>




            <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.js"></script>
        </body>
    </html>

intro.css

.ui.masthead.segment .ui.header{
    text-color: red;
}

I'd like to open home.html in which css file is applied. It doesn't work in these code. I also checked chrome inspect (F12) and tabbed Network tab, but I found that status of intro.css is 404. Any advice would be help!

p.s. I think below code may be related to the solution.

if(path.extname(url)==='.css'){
    console.log('run');
    response.writeHead(200,{"Content-type" : "text/css"});
}
else
    response.writeHead(200);

<link rel="stylesheet" href="/css/intro.css" type="text/css" > Dont think you need '..'' — Paddymac
– Paddymac, Commented Sep 19, 2019 at 14:32
href="../css/intro.css" is the problem here. You're searching for your file outside your nodejsExample directory. — Furkan Poyraz
– Furkan Poyraz, Commented Sep 19, 2019 at 14:32
@FurkanPoyraz then How to change the code? I change that to href="css/intro.css" and it also doen't work! — Yoonjong Lee
– Yoonjong Lee, Commented Sep 19, 2019 at 14:36
@YoonjongLee Changing it to href="/css/intro.css" should work if your file structure is like in your post. — Furkan Poyraz
– Furkan Poyraz, Commented Sep 19, 2019 at 14:39
@FurkanPoyraz I tried but doesn't work :( Can you check javascript code whether css file can be loaded in the my code? I think my js file doesn't have any code to import css file. — Yoonjong Lee
– Yoonjong Lee, Commented Sep 19, 2019 at 14:44

tifla · Accepted Answer · 2019-09-19 15:00:34Z

var server = http.createServer(function (request, response) {
    fs.readFile('./' + request.url, function(err, data) {
        if (!err) {
            var dotoffset = request.url.lastIndexOf('.');
            var mimetype = dotoffset == -1
                            ? 'text/plain'
                            : {
                                '.html' : 'text/html',
                                '.ico' : 'image/x-icon',
                                '.jpg' : 'image/jpeg',
                                '.png' : 'image/png',
                                '.gif' : 'image/gif',
                                '.css' : 'text/css',
                                '.js' : 'text/javascript'
                                }[ request.url.substr(dotoffset) ];
            response.setHeader('Content-type' , mimetype);
            response.end(data);
            console.log( request.url, mimetype );
        } else {
            console.log ('file not found: ' + request.url);
            response.writeHead(404, "Not Found");
            response.end();
        }
    });
}

Collectives™ on Stack Overflow

How to load CSS file in node.js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related