Код CSS не отображается на моем сервере node.js

Question

Я пытался использовать файл CSS на моем node.js сервере, но он никогда не показывался на веб-странице. Я делаю это на 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);

И на моем HTML файле я сделал:

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

На странице отображается только мой HTML, но это сделал вид, что мой CSS код никогда не существовал, так что это просто набор простого текста. Я все еще относительно новичок в node.js, поэтому я могу просто упустить несколько простых вещей.

Directory:

• publi c (папка)
  • main. css
• index. html
• server. js

Answer 1

Как правило, когда вы используете express, вам не нужно использовать модуль http непосредственно самостоятельно. app.use() вызовы не должны помещаться в функцию обратного вызова, которая вызывается для каждого HTTP-запроса, который получает сервер, их следует размещать в том месте, которое запускается один раз при запуске сервера, как на верхнем уровне вашего модуля.

Если вы переместите файл index.html в папку public, ваш источник server.js должен быть таким простым:

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);

Если вы просто пытаетесь запустить полностью stati c file server, есть кое-что еще более простое, что вы можете сделать. Установите serve глобально и запустите его в каталоге, из которого вы хотите отправить файлы:

npm i -g server
npx serve public -p 1337