I have been trying to fix this for over 4 hours now, and I have read through all of the related questions/answers here on StackOverflow, as well as other websites. Right now I have a router and server that displays the correct .html according to what URL path I visit. However, no matter what I try to do to get the requested .css in the .html to apply, it does not work. When I try to go to the specified path, it doesn't load anymore. I have tried using path.extname(), switch statements and if/else statements to change the ContentType, and several other things.
Here is my code that displays .html fine. This is the code without any of my attempts to get .css / .js to run. Like I said earlier, I tried using path.extname() and other things.(Note - I've never posted here before so the code formatting isn't tabbed or indented like how I have it, I don't know how to do that here so I'm sorry about that):
Router.js
var url = require('url'),
fs = require('fs'),
reqURL,
pathname;
var router = function(req, res) {
reqURL = url.parse(req.url, true);
pathname = reqURL.pathname;
res.status = 200;
res.contentType = 'text/plain';
res.send = function(sentItem) {
if (sentItem) {
res.writeHead(res.status, {'Content-Type': res.contentType});
res.write(sentItem);
res.end();
} else {
throw new Error('No parameter passed to res.send()');
}
};
res.render = function(filename) {
//My local folder that contains my .html and .css files
var path = './views';
if (filename) {
fs.readdir(path, function(error, files) {
if (error) {
throw error;
} else {
if (files.indexOf(filename) !== -1) {
var file = files[files.indexOf(filename)];
fs.readFile(path + '/' + file, function(error, data) {
if (error) {
throw error;
} else {
res.writeHead(res.status, {'Content-Type': 'text/html'});
res.write(data);
res.end();
}
});
} else {
throw new Error("res.render() could not find the specified file.");
}
}
});
} else {
throw new Error('No parameter passed to res.render()');
}
};
if (pathname === '/') {
res.send("Welcome to the home page.");
}
if (pathname === '/test') {
res.render('website7.html');
}
else if (pathname === '/alex') {
res.render('alex.html');
}
else {
res.status = 404;
res.send("Sorry, but I could not find that!");
}
}
//Exporting custom module to be used in app.js
module.exports = router
App.js
var http = require('http');
var router = require('./router');
var server = http.createServer(function(req, res) {
router(req, res);
});
server.listen(5000, function() {
console.log('Listening on http://localhost:5000');
});
A good friend of mine helped me solve this. At the bottom of the code, I replaced the if statement with a switch statement that had some changes in it.
switch (pathname) {
case '/':
res.send("Welcome to my site. This is the home page.");
break;
case '/alex':
res.render("alex.html");
break;
default:
if (/\.(css)$/.test(pathname)) {
res.writeHead(res.status, {'Content-Type': 'text/css'});
res.write(fs.readFileSync(__dirname + '/views/css' + pathname, 'utf8'));
res.end();
break;
}
}
}
**Note, the alex.html is the page that has the .css applied to it.
So, when the /alex URL pathname is requested and it calls a GET request for the .css, it applies the default switch statement code which applies the .css and makes sure the Content-Type is set to text/css.