Unable to access CSS File in Node JS

Question

i am a beginner in node.js i have 3 files

cal.js
cal.html
style.css

neither my node.js is accessing css file nor html is accessing it . earlier when i used internal css html file was perfect but node was not . help me in refrence to this below code

const express= require("express");
 const bodyparser =require("body-parser");

 const app=express();
 app.use(bodyparser.urlencoded({extended:true}))



   app.get("/",function(req,res){
    res.sendFile( __dirname+"/cal.html");
    console.log(__dirname); 

     });
   app.post("/",function(req,res)
   {
     var n1=Number(req.body.num1);
     var n2=Number(req.body.num2);
    var n=n1+n2;

    res.write('<h1 class="result">sum is='+n+'</h1>'); 
    res.send();


      })
   app.listen(2000,function()
    {
    console.log("server is running");
     });

html file

<!DOCTYPE html>
 <html>
 <head>
  <title>server </title>
   <link rel="stylesheet" type="text/css" href="style.css">


   </head>
   <body>
    <form action="/" method="post">
    <input type="text" name="num1" placeholder="number1">
    <input type="text" name="num2" placeholder="number2">
    <button type="submit" name="button">calculate</button>
    </form>

   <script src="cal.js"></script>

   </body>
   </html>

css file

body{
    width: 100%;
    height: 100%;font-family: cursive;
    background-color: pink;


}
.result{
    color: green;
    background-color: yellow;
}

Can you tell, where CSS and JS files are located with respect to project root? — Pranav
– Pranav, Commented Jul 18, 2020 at 10:55
@KPranavRam i have a folder named calculator in side which i have 3 files cal.html -style.css -cal.js — Pallavi Vohra
– Pallavi Vohra, Commented Jul 18, 2020 at 11:08

Leibale Eidelman · Accepted Answer · 2020-07-18 11:07:00Z

1

You need to use express.static middleware in order to serve static files.

I see in you code that the HTML file is located in __dirname, so this line should work for you:

app.use(express.static(__dirname));

answered Jul 18, 2020 at 11:07

Leibale Eidelman

3,2951 gold badge20 silver badges31 bronze badges

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

Comments

Hassan Al Najjar · Accepted Answer · 2020-07-18 10:59:23Z

0

try to add a dot in here

res.sendFile( __dirname+"./cal.html");

and in here

   <link rel="stylesheet" type="text/css" href="./style.css">

answered Jul 18, 2020 at 10:59

Hassan Al Najjar

3841 gold badge4 silver badges14 bronze badges

1 Comment

Pallavi Vohra Over a year ago

No it says the following error no such file or directory

Pranav · Accepted Answer · 2020-07-18 11:48:42Z

0

This is the standard way of doing it:
CSS and JS file should be placed in folder in the following structure:

project_root
|
----index.js(or)app.js {node.js file}
|
----shared
    |
    ----css
    |   |
    |   ----<CSS Files>
    ----js
        |
        ----<JS Files>

in your express app file, after app.use(bodyparser.urlencoded({extended:true})), add app.use(express.static('shared'))
Access necessary CSS and JS files from html by using /css/<filename> /js/filename
Example

edited Jul 18, 2020 at 11:48

answered Jul 18, 2020 at 11:08

Pranav

987 bronze badges

5 Comments

Pallavi Vohra Over a year ago

sorry !! what does this shared means??

Pranav Over a year ago

@PallaviVohra shared is folder inside project root and css and jss are sub-folders of shared. It's just a convention.

Pranav Over a year ago

No, it should be inside the project root directory

Pallavi Vohra Over a year ago

sorry i have sorted css file just like you said but its not working .. calculator/shared/css/style.css and after this app.use(express.static('shared')); exactly this i have written.. but its seems not

Pranav Over a year ago

Please use the link to example in my post to see above example

Collectives™ on Stack Overflow

Unable to access CSS File in Node JS

3 Answers 3

Comments

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related