My nodeJS project uses an external CSS file to style the HTML page. Here is how my file structure looks:
ProjectFolder
----server.js
----index.html
----style.css
This is how my server.js file looks like:
var http = require('http');
var fs = require('fs');
var $ = require('jquery');
function onRequest(request, response) {
response.writeHead(200,{'Content-Type':'text/html'});
fs.readFile('./index.html',null, function (error,data) {
if(error){
response.writeHead(404);
response.write('File not found')
} else {
response.write(data);
}
response.end();
});
}
http.createServer(onRequest).listen(8081);
Below is the structure of my HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href='style.css'>
<script src="https://ajax..."></script>
<script>
........
</script>
</head>
<body>
<div id="inputDiv">
<h1>User Details</h1>
</div>
</body>
</html>
Here is a snippet from my CSS file:
div {padding-bottom: 10px}
label {float: left; width: 6em; text-align: right;padding-right: 4px}
input {text-align: left;}
textarea {alignment: right;}
When I run node server.js and access index.html, the page loads without any CSS styling. However, when I open the HTML page directly in the browser, the styles are applied correctly. What could be causing this issue?