CODEWITHSUNDEEP
express
React
React

Reputation: 9

Css file not being sent to express/socket.io server

I just need a way to link the css to the html without directly applying the styling into the <head></head> of my index file. On the socket.io homepage, they have put it into the <head></head>, but no one wants that of course.

I have used <link rel="stylesheet" type="text/css" href="front.css" /> in my index.html file, but it doesn't work at all. How do I make it work?

res.sendFile(__dirname + '/front.css'); Doesn't work either.

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

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

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

http.listen(3000, function(){
  console.log('listening on *:3000');
});

io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    console.log('message: ' + msg);
  });
});

io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
});
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>global chat app</title>
    <link rel="stylesheet" href="front.css" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  </head>
  <body>
    <h1>global</h1>

    <div class="profile">
      <h3 class="name">_React</h3>
      <div class="status"></div>
    </div>


    <div class="container">
          <!-- sidebar for displaying online users -->
          <div class="online-users">
            <h3>Online users</h3>
            <ul class="user-list"></ul>
          </div>
          <!-- chat div -->
          <div class="chat-area">
            <ul class="chat"></ul>
            <!-- messaging form -->
            <form class="message-form">
              <textarea placeholder="write message" class="form-control" id="message"></textarea>
              <br />
              <input type="submit" class="submit" value="send message" />
            </div>
      </div>
    </div>

    <script src="/socket.io/socket.io.js"></script>
    <script>
      var socket = io();
      
      $('.message-form').submit(function(){
        socket.emit('chat message', $('.form-control').val());
        $('.form-control').val('');
        return false;
      });
      // display message
      socket.on('chat message', function(msg){
        $('.chat').append($('<li>').text(msg));
      });
    </script>

  </body>
</html>

Upvotes: 0

Views: 2411

Answers (1)

Matt Fletcher
Matt Fletcher

Reputation: 9220

Please see Serving static files in Express

Put your css file into a folder called public and use the following:

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

Then yoursite.com/front.css will link to yourdirectory/public/front.css

Upvotes: 1

Related Questions