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

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 ing from the terminal to the mand 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=".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>

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 ing from the terminal to the mand 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./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>

Share Improve this question edited Sep 13, 2017 at 8:27 Amiga500 6,14111 gold badges70 silver badges119 bronze badges asked Sep 13, 2017 at 8:25 Mehdi 191 gold badge1 silver badge7 bronze badges

Have you any error in the console? Like a 404 for the style.css for example. – 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 Commented Sep 13, 2017 at 8:30

Add a ment |

1 Answer 1

Sorted by: Reset to default 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);

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - CSS doesn't load into my HTML code using Node.js - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)