1

I was trying to use a CSS file in my node.js server, but it never show up on the webpage. I'm doing this on Visual Studio Code 2019.

'use strict';
var http = require("http");
var express = require("express");
var app = express();
var path = require("path");
var fs = require("fs");
var port = process.env.PORT || 1337;

http.createServer(function (req, res) {
    res.writeHead(200, { "Content-Type": "text/html" });
    fs.readFile("index.html", function (error, data) {
        if (error) {
            res.writeHead(404)
            res.write("Error: File Not Found")
        }
        else {
            app.use(express.static(path.join(__dirname, "/public")));
            res.write(data)
        }
        res.end();
    })
}).listen(port);

And on my HTML file I did:

<link rel="stylesheet" href="/main.css">

The webpage only shows my HTML, but it pretended my CSS code never existed, so it's just a bunch of plain text. I'm still relatively new to node.js so I might just be missing a few simple things.

Directory:

  • public (folder)
    • main.css
  • index.html
  • server.js
Patrick Roberts
  • 49,224
  • 10
  • 102
  • 153
Dysrakescence
  • 62
  • 6
  • 1
    Probably should put `index.html` in your `public` folder, then you can just do `var express = require("express"); var app = express(); var path = require("path"); var port = process.env.PORT || 1337; app.use(express.static(path.join(__dirname, "/public"))); app.listen(port);` – Patrick Roberts Apr 05 '20 at 23:47
  • Does this answer your question? [Express-js can't GET my static files, why?](https://stackoverflow.com/questions/5924072/express-js-cant-get-my-static-files-why) – Get Off My Lawn Apr 05 '20 at 23:57
  • @PatrickRoberts That doesn't seem to work, still a plain text webpage. Thanks for helping out though. – Dysrakescence Apr 06 '20 at 00:50
  • @Thunderous have you restarted the server since you edited the code? The server will continue using the old source until it's stopped and restarted. – Patrick Roberts Apr 06 '20 at 00:51
  • @PatrickRoberts Yeah I restart the server every time when I make an edit to the code. – Dysrakescence Apr 06 '20 at 00:52
  • @PatrickRoberts I've also noticed something weird when I used the "inspect" on my webpage. I checked the source and when I looked in the main.css file, the content inside is the exact same as the index.html. Not sure if this information would help. – Dysrakescence Apr 06 '20 at 00:57
  • @Thunderous [edit] your question with your current attempt. Maybe you have an error somewhere else in your HTML file or CSS file? It's basically a guessing game on our part unless you provide a [mcve]. **edit** ah, now that's useful information. – Patrick Roberts Apr 06 '20 at 00:57
  • @Thunderous not sure if it was clear, but the code I provided above was intended to replace your entire `server.js` file. – Patrick Roberts Apr 06 '20 at 00:58
  • @PatrickRoberts Woah that actually worked! Thank you! This took me 3 hours and it could've been longer without you! How do I post your response as an answer? – Dysrakescence Apr 06 '20 at 01:06
  • If you give me a few minutes I can add an answer with a short explanation. – Patrick Roberts Apr 06 '20 at 01:08

1 Answers1

0

Typically when you use express, you don't need to use the http module directly yourself. app.use() calls shouldn't be placed inside a callback function that is invoked for every HTTP request the server receives, they should be placed somewhere that is run once when the server starts up, like at the top level of your module.

If you move the index.html file into your public folder, your server.js source should be as simple as this:

var express = require("express");
var app = express();
var path = require("path");
var port = process.env.PORT || 1337;

app.use(express.static(path.join(__dirname, "/public")));

app.listen(port);

If you're just trying to run a completely static file server, there's something even simpler you can do. Install serve globally and run it on the directory you want to serve files from:

npm i -g server
npx serve public -p 1337
Patrick Roberts
  • 49,224
  • 10
  • 102
  • 153