0

For some reason, I have attached my css file to my html file. And then i open the html file using express in node js. However, the css file does not open when i run the webserver through node js. I thought since the css file is included in html that it should run??

html

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
  <body>
    <h1>Reading in Value</h1>
    <form action="/" method="post" >
    <br/>
    <label>Enter a UDP command in hex</label>
    <br/><br/>
    <input type="number" name="number" id="number">
    <br/><br/>
    <input type="submit" value="Submit" name="submit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </form>
  </body>
</html>

node js

//Sending UDP message to TFTP server
//dgram modeule to create UDP socket
var express= require('express')
var fs= require('fs')

var util = require('util')
var dgram= require('dgram')
var client= dgram.createSocket('udp4')
var bodyParser = require('body-parser')
var app = express()
var app2= express()
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json())

//Reading in the html gile
app.get('/', function(req, res){
    var html = fs.readFileSync('index2.html');
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end(html);
});
//Sends user command utp
app.post('/', function(req, res){
//Define the host and port values
var HOST= '192.168.0.172';
var PORT= 69;
//buffer with hex commands
var message = new Buffer(req.body.number, 'hex');
//Sends packets to TFTP
client.send(message, 0, message.length, PORT, HOST, function (err, bytes) {

        if (err) {
            throw err;
        }
        res.send('UDP message sent to ' + HOST +':'+ PORT);

    });
});

//CREATES ANOTHER PORT
app2.get('/', function(req, res){
 client.on('message', function (message) {
  res.send('received a message: ' + message);
  });
});


app.listen(3000, "192.168.0.136");
app2.listen(8000, "192.168.0.136");
console.log('Listening at 192.168.0.172:3000 and Recieve message will be on 192.168.0.172:8000')

2 Answers 2

4

<link rel="stylesheet" type="text/css" href="style.css" media="screen" /> tells the browser to ask (with GET) the server for the CSS at /style.css.

Look at your server code. You've told it what to do with GET / (app.get('/', function(req, res){ etc), and you've told it what to do for POST /, but you haven't told it what to do for GET /style.css.

The Express manual covers this.

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

3 Comments

TL:DR use express.static to server static files like css, js, etc.
I'm using express.static and have tried everything .. and my browser actually loads the HTML and CSS files (i can see them in F12 tools, under 'Sources') .. but the CSS file that is delivered is BLANK.
@bkwdesign — If you have a new question then you can ask one (and include a link to this answer if it is relevant). Make sure you include a minimal reproducible example, check for caching issues, and report on debugging using the Network tab of your browser's developer tools..
3

Wherever you're serving your files from, you need to set in the express config like this:

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

This would work if you're static files were being stored in a folder called public. Please see this link for more documentation: http://expressjs.com/en/starter/static-files.html

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.