'CSS Not Linking To HTML Replit

I am using replit to host a chat server using Node.js and Socket.io. I used the getting started guide provided by socket.io (https://socket.io/get-started/chat), and saw that the HTML code used internal CSS. I attempted to change this and have the following code:

index.js

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server);

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

io.on('connection', (socket) => {
  console.log('a user connected');
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

io.on('connection', (socket) => {
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
  });
});

server.listen(3000, () => {
  console.log('Site is up and running!');
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
    </head>

  <body>
    <ul id="messages"></ul>
    <form id="form" action="">
      <input id="input" autocomplete="off" /><button>Send</button>
    </form>
        <script src="/socket.io/socket.io.js"></script>
        <script>
          var socket = io();
        
          var messages = document.getElementById('messages');
          var form = document.getElementById('form');
          var input = document.getElementById('input');
        
          form.addEventListener('submit', function(e) {
            e.preventDefault();
            if (input.value) {
              socket.emit('chat message', input.value);
              input.value = '';
            }
          });
        
          socket.on('chat message', function(msg) {
            var item = document.createElement('li');
            item.textContent = msg;
            messages.appendChild(item);
            window.scrollTo(0, document.body.scrollHeight);
          });
        </script> 
  </body>
</html>

styles.css

body {
    margin : 0;
    padding-bottom : 3rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
#form {
    background : rgb(0, 0, 0, 0.15);
    padding : 0.25rem;
    position : fixed;
    bottom : 0;
    left : 0;
    right : 0;
    display : flex;
    height : 3rem;
    box-sizing : border-box;
    backdrop-filter : blur(10px);
}
#input {
    border : none;
    padding : 0 1rem;
    flex-grow : 1;
    border-radius : 2rem;
    margin : 0.25rem;
}
#input:focus {
    outline : none;
}
#form > button {
    background : #333;
    border : none;
    padding : 0 1rem;
    margin : 0.25rem;
    border-radius : 3px;
    outline : none;
    color : #fff;
}
#messages {
    list-style-type : none;
    margin : 0;
    padding : 0;
}
#messages > li {
    padding : 0.5rem 1rem;
}
#messages > li:nth-child(odd) {
    background : #efefef;
}

However, when I run the repl the expected result does not show up and the CSS does not apply to the HTML. Could anyone tell me what is going on?

htmlcssnode.jssocket.ioreplit


Solution 1:[1]

I think you should use the express.static() method in the index.js file. This method allows us to serve static files. releated documentation

To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.

The function signature is:

express.static(root, [options]) The root argument specifies the root directory from which to serve static assets.

For example, use the following code to serve images, CSS files, and JavaScript files in a directory named public:

 app.use(express.static('public'))

Now, you can load the files that are in the public directory:

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png http://localhost:3000/hello.html

Express looks up the files relative to the static directory, so the name of the static directory is not part of the URL. To use multiple static assets directories, call the express.static middleware function multiple times:

app.use(express.static('public'))` 
app.use(express.static('files'))

Express looks up the files in the order in which you set the static directories with the express.static middleware function.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions