1

I'm quite new to web dev so apologies if this is a newbie question. I've been stuck on this for several hours now and I can't seem to be getting this to work. I've also looked at many different areas to see what the issue was

For context, I am running this with just node js. My stylesheet is getting interpreted as a text/html file though I loaded it as a text/css file.

below is my server.js file.

var http = require("http");
var url = require("url");
var fs = require('fs');

fs.readFile('./main_page.html', (err, html) => {
//fs.readFile('About_Me/about_me.html', (err, html) => {

    console.log(html);

    if(err)
        throw err;
    
    http.createServer((req, res) => {
        res.writeHeader(200, {'Content-Type': 'text/html' });
        res.write(html);
        res.end();
    }).listen(8000);
});

This is my html file

<!DOCTOYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Personal blog for all the work he keeps track of">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <title>Aaron's Blog</title>
    <link rel="stylesheet" href="/main_page_style.css" type="text/css">
</head>

...

</html>

and my CSS file

@charset "UTF-8";

h1 {
    color: red;
}

It would be greatly appreciated if someone could help me with this.

Aaron
  • 11
  • 2
  • What happens if you try to visit your CSS file in your browser directly? Do you see the code you provided? Or do you see a 404 page? – Chris Aug 11 '20 at 14:41
  • @Chris For some reason it's the same as the html file – Aaron Aug 11 '20 at 15:23
  • I'm not great with Node, but I think your current `server.js` is programmed only read and return your `main_page.html` file. A more common pattern is to see what the user requested, then return the matching file. The mime-type is set by `server.js`, not by the `` code. Try using the first code block from this answer: https://stackoverflow.com/a/29046869/1451957 (swap the part that says `index.html` with `main_page.html`) – Chris Aug 11 '20 at 15:37

0 Answers0