CSS doesn't load into my HTML code using Node.js

Question

I'm trying to add CSS to my HTML using express() function in localhost:3000 by Node.js. Unfortunately, something is weird. I followed the steps from tutorial step by step but still my css doesn't load. My style.css is in css folder (css/style.css). Here is my code:

app.js (note that I used app and app1)

var app = require('http').createServer(handler);
var io = require('socket.io').listen(app);
var fs = require('fs');

var express = require('express');
var app1 = express();

var mySocket = 0;

app1.use(express.static('/css'));


app.listen(3000); //Which port are we going to listen to?

function handler (req, res) {

  fs.readFile(__dirname + '/index.html', //Load and display outputs to the index.html file
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }
    res.writeHead(200);
    res.end(data);
  });

}



io.sockets.on('connection', function (socket) {
  console.log('Webpage connected'); //Confirmation that the socket has connection to the webpage
  mySocket = socket;
});

//UDP server on 41181
var dgram = require("dgram");
var server = dgram.createSocket("udp4");

server.on("message", function (msg, rinfo) {
  console.log("Broadcasting Message: " + msg); //Display the message coming from the terminal to the command line for debugging
  if (mySocket != 0) {
     mySocket.emit('field', "" + msg);
     mySocket.broadcast.emit('field', "" + msg); //Display the message from the terminal to the webpage
  }
});

server.on("listening", function () {
  var address = server.address(); //IPAddress of the server
  console.log("UDP server listening to " + address.address + ":" + address.port);
});

server.bind(41181);

style.css (css/style.css)

.test
{
    color:red;
}

index.html

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script src="/socket.io/socket.io.js"></script>
        <link rel="stylesheet" type="text/css" href="/css/style.css" />

    </head>
    <body>
        <script>
            var socket = io.connect('http://localhost:3000');
            socket.on('field', function (data) {
                console.log(data);
                $("#field").html(data);
            });
        </script>
        <div class='test'>Data from C#: </div><div id="field"></div>
    </body>
</html>

Have you any error in the console? Like a 404 for the style.css for example. — Salketer
– Salketer, Commented Sep 13, 2017 at 8:29
The URL of your css file starts with a /. Ensure that the root of your localhost contains the cssfolder. — ADreNaLiNe-DJ
– ADreNaLiNe-DJ, Commented Sep 13, 2017 at 8:30

Prinzhorn · Accepted Answer · 2017-09-13 09:16:45Z

4

You set the root of the static module to /css here

app1.use(express.static('/css'));

but then you request /css/style.css which means express looks for the file in /css/css/style.css (note that this path is absolute and not relative to your project).

Put everything in a public folder, e.g. public/css/style.css and then

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

Edit: Here's a minimal working example which serves the index.html and the style.css (in public/css/style.css)

var express = require('express');
var app = express();

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

app.get('/index.html', function(req, res, next) {
    res.sendFile(__dirname + '/index.html');
});

app.listen(3000);

edited Sep 13, 2017 at 9:16

answered Sep 13, 2017 at 8:40

Prinzhorn

22.6k7 gold badges65 silver badges69 bronze badges

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

6 Comments

Mehdi Over a year ago

thanks and should I change somthing in my html code?

Prinzhorn Over a year ago

I don't think so. When express gets the /css/style.css request it will check the public folder for public/css/style.css and serve it, if the file exists.

Mehdi Over a year ago

It didn't work.. again the css is not loaded. don't u think it depends on my var app = require('http').createServer(handler);

Prinzhorn Over a year ago

I missed that part. Why are you creating a http server? You express app doesn't even listen on any port. Express extends the built in http server, you don't need to create one manually. You are mixing two things together.

Prinzhorn Over a year ago

I've added a minimal express example. Don't try to do three things at once when they do not work. One thing after the other.

|

Collectives™ on Stack Overflow

CSS doesn't load into my HTML code using Node.js

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related