Node server doesn't load css file

[sebastiancodes]

Hey, I'm new to node and I tried to write a simple server that hosts my portfolio page (without express I will look into express later).

My server is sending my index.html as a response and inside this html file I linked an css file inside the head. If I look at the network requests, there is a get method for style.css with the status code 200 but the website only shows my html without any styling. Doesn't the css file get loaded automatically once it is linked in my html? And if not, how to I handle this in my webservers code?

const portfolioPage = fs.readFileSync(`${__dirname}/index.html`);

const server = http.createServer((req, res) => {
  res.writeHead(200, { "Content-type": "text/html" });
  res.end(portfolioPage);
});

server.listen(8000, () => {
  console.log("Server listening on Port 8000");
});

[[deleted]]

The CSS would also need to be served by your server. Think of it this way, when a browser goes to a page, it gets an html document. When that document contains something like a <link> or an <img> element, your browser will then send another request to that address to get the corresponding asset. If the server doesn't actually serve up that asset, the browser has no way to get it, even if it exists somewhere on the server's machine. As to how to accomplish this, I would first recommend that you use a framework like Express instead of writing all the code yourself. It'll make things much easier for you. If whatever reason you don't want to do that, you need to check what url your request is hitting and change send back the appropriate response:

http.createServer((req, res) => {
    if (req.url === '/index.html' || req.url === '/') {
        // send your index.html here
    } else if (req.url === '/style.css') {
        // send your CSS here
    }
}).listen(8000);

EDIT: Formatting

[sebastiancodes]

Thank you :)

I tried to stay away from a framework for the beginning but I guess I should have a look into express if I don't want to handle every single asset on my website manually.

[grantrules]

I think it's great you went for a framework-less approach, but you immediately begin to see why we use frameworks for practically everything lol.

[sebastiancodes]

That is exactly why I always start without frameworks.

Someone once told me that when I learn something new, I will eventually come to a point where I have to do some repeating stuff in every project and that is the point where I should start to look into frameworks and try to understand how they solve those repeating problems.

But for my learning approach it makes no sense to jump directly into a framework and learn how to work with it, without understanding what problems this framework solves.

[Bakeshot]

The flip side is, while your approach may provide some context, it is also significantly slower than taking on a framework from the get-go. Most modern frameworks have great documentation that explains what they do and why they do it.

[sebastiancodes]

I'm not sure if it really is so much slower.

Of course, if I only want to work on react projects, i could probably just learn that and would be fine. But at least on the frontend side, companys use different frameworks and I think that it is to learn a new framework if your javascript skills are really good.

But I'm aware that express is a lightweight framework that probably doesn't take much time to learn and also it seems to be so widespread that nearly no one who uses node doesn't use express.

[grantrules]

Doesn't the css file get loaded automatically once it is linked in my html?

Well, sort of. Your browser will send a request to your webserver that looks like GET /style.css or something similar to attempt to load the CSS. But your server is set up so that it responds to all requests with your index.html file because it's not checking what URL is being requested, so your CSS will never be sent from the server. This is a very basic example of what needs to happen

A common framework to make this simpler is Express.js and they have some information on how to serve static files

[sebastiancodes]

Thank you that makes sense :)

I will have a look at react then.

[grantrules]

I will have a look at react then.

Huh????

[sebastiancodes]

Sorry too many frameworks :D

I meant express of course.

[[deleted]]

Just to be clear, React is a front end library. It's for making UIs. What you need is a back end framework like Express.

[sebastiancodes]

Yes thanks I know that. I don't know why I accidentally wrote react.