Node.js server app not showing CSS

Question

I have the following code on my node.js server (I'm using express):

app.get('/appointment/:id',function(req,res){
  res.writeHead(200,{'Content-Type':'text/html'});
  res.write('<link href="public/css/style.css" rel="stylesheet" type="text/css">');
  res.write('<form name="accept" action="http://localhost:8080/appointment/'+ req.params.id+'/1" method="post">');
  res.write('<input id="accept" type="submit" value="Accept">');
  res.write('</form><br>');
  res.write('<form name="decline" action="http://localhost:8080/appointment/'+ req.params.id+'/0" method="post">');
  res.write('<input id="decline" type="submit" value="Decline">');
  res.write('</form><br>');
  res.end();
});

In my root folder I have folder appointment/public/css/style.css.
When I open the web page it just displays 2 form buttons but without CSS applied.
The CSS code is:

#accept {
  width:50px;
  height:30px;
  background-color:#00FF00;
  color:#FFFFFF;
  font-weight:bold;
  font-size:120%;
}

#decline {
  width:50px;
  height:30px;
  background-color:#FF0000;
  color:#FFFFFF;
  font-weight:bold;
  font-size:120%;
}

What is the problem and how can I fix it?

EDIT: The hierarchy is as follows:
-server_files
--nodeServer.js
--public
---css
----style.css

As I understood you use express, so you need add this line to you code app.use(express.static(__dirname + '/public'));, and add / before public/css/style.css — Oleksandr T.
– Oleksandr T., Commented Feb 24, 2015 at 16:22
@RienNeVaPlu͢s no I'm not. When I click on the link it says that it can't execute the GET request. Do I need to add app.get and "serve" the CSS file? — Amer Hukic
– Amer Hukic, Commented Feb 24, 2015 at 16:24
Yes, you need to serve your static files as Alexander has described. Good luck :) — RienNeVaPlu͢s
– RienNeVaPlu͢s, Commented Feb 24, 2015 at 16:25
@remaker If /public is your static root directory, then http://localhost/foo.css maps to the file public/foo.css. (The name of the static root directory never appears in static HTTP paths; the filesystem's public becomes the server's / (the root)) You need to use /css/style.css in your <link>. — apsillers
– apsillers, Commented Feb 24, 2015 at 16:35

NarendraSoni · Accepted Answer · 2015-02-25 01:43:45Z

I feel it's important to share with you the reason of why this problem occurred. Just like other web frameworks, ExpressJs has it's own way of serving static files.

express.static middleware is based on serve-static, and is responsible for serving the static assets of an Express application.

How it works:

Serve static content for the app from the "public" directory in the application directory

// GET /style.css etc

app.use(express.static(__dirname + '/public'));
Mount the middleware at "/static" to serve static content only when their request path is prefixed with "/static"

// GET /static/style.css etc.

app.use('/static', express.static(__dirname + '/public'));
Serve static files from multiple directories, but give precedence to "./public" over the others

app.use(express.static(__dirname + '/public'));

app.use(express.static(__dirname + '/files'));

app.use(express.static(__dirname + '/uploads'));

I checked your folder structure, i suggest you to keep your public directory in the same level as server_files directory and also nodeServer.js file outside of your server_files because it's the main file using which you are using to start your application.

Then in your nodeServer.js you can do this:

app.use('/public', express.static(__dirname + '/public'));

After doing this, all your static assets in public directory can be accessed in html templates or any other templating engine that you might be using. For example :

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

Please note the order of your middle wares in nodeServer.js. I hope this helps.

Collectives™ on Stack Overflow

Node.js server app not showing CSS

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