Не подключается внешний css файл

370
04 июля 2022, 10:10

Пытаюсь начать разрабатывать на node.js. Практически не шарю ни в нём, ни в js, но хочу разобраться. При запуске сервера произвожу переадресацию на главную страницу, но к ней не подключаются стили. Код ниже

const http = require('http')
const fs = require('fs')
const path = require('path')
const server = http.createServer((req, res)=>{
    
    let filePath = path.join(__dirname, 'html', req.url === '/' ? 'index.html' : req.url)
    const ext = path.extname(filePath)
    
    let contentType = 'text/html'
    switch (ext){
        case '.css':
            contentType = 'text/css'
            break
        case '.js':
            contentType = 'text/javascript'
            break
        default:
            contentType = 'text/html'
    }
    
    if(!ext){
        filePath += '.html'
    }
    fs.readFile(filePath, (err, content) => {
        if(err){
            fs.readFile(path.join(__dirname, 'html', 'error.html'), (err, data)=>{
                if(err){
                    res.writeHead(500)
                    res.end('Error')
                } else{
                    res.writeHead(200, {
                        'Content-Type': contentType
                    })
                    res.end(data)
                }
            })
        } else{
            res.statusCode = 200;
            res.setHeader('Content-Type', contentType);
            res.end(content)
        }
    })
    
})
const PORT = process.env.PORT || 3000
server.listen(PORT, ()=>{
    console.log(`Server has been started on ${PORT} ...`)
})
body{
    background: rgb(223, 12, 12);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <title>Home page</title>
</head>
<body>
    <nav>
        <a href="/">Home</a>
        <a href="/contact">Contact</a>
    </nav>
    <h1>Home page</h1>
</body>
</html>
<!-- begin snippet: js hide: false console: true babel: false -->

Структура папок следующая:

Пробовал подключать стили по разному и с одной точкой и с двумя и без них. Всегда белый фон и черный текст. Если запихнуть css в папку html, то стили подключаются, но так будет наверное не правильно. Изначально в браузере было предупреждение, что стили опознаны как type="text/html", но сейчас такого сообщения нет.

Хотелось бы узнать как сделать, чтобы все работало?

PS: вопрос не по теме: что стоит почитать, чтобы стало понятно как нужно разрабатывать под node.js (желательно четкое и понятное для новичка)?

Answer 1

На точке входа в приложение происходит формирование пути до открываемого файла. Данный скрипт вызывается при всех подключениях новых файлов к странице, следовательно у меня не правильно формировался путь до открываемого файла. Изначально я предполагал, что если у меня загрузилась файл index.html, то через путь указанный в нем сервер спокойно найдет и подключит требуемый файл стилей. Оказывается это не так. Решение следующее:

// определение дефолтного пути до открываемого файла
let filePath = path.join(__dirname, 'html', req.url === '/' ? 'index.html' : req.url)
const ext = path.extname(filePath) // определяем расширение открываемого файла
// определяем тип открываемого файла
let contentType = 'text/html'
switch (ext){
    case '.css':
        contentType = 'text/css'
        filePath = path.join(__dirname, req.url) // формируем новый путь до файла
        break
    case '.js':
        contentType = 'text/javascript'
        filePath = path.join(__dirname, req.url)
        break
    default:
        contentType = 'text/html'
}

Возможно есть более правильное решение данной проблемы, но пока что я его не знаю.

READ ALSO
Изменение лого в шапке сайта
HTML

Изменение лого в шапке сайта

Есть фиксированная прозрачная шапка, белое лого и менюПри скроле вниз от половины высоты 1 блока, шапка становится белой, а логотип должен...

 295
Вывести значении mysql колонок (столбцов), которые отличаются только цифрами в имени
MySQL

Вывести значении mysql колонок (столбцов), которые отличаются только цифрами в имени

Нужно вывести значении mysql колонок (столбцов), которые отличаются только цифрами в имениПример имени колонок:

 457
Что значит &quot;Connect to MySQL from the MySQL command line client&quot;?
MySQL

Что значит "Connect to MySQL from the MySQL command line client"?

Объясните пожалуйста попроще (только начинаю изучать Docker), что значит "Connect to MySQL from the MySQL command line client" (Подключитесь к MySQL из клиента командной...

 468
Как посчитать количество элементов COUNT(*) если есть HAVING и GROUP BY?
MySQL

Как посчитать количество элементов COUNT(*) если есть HAVING и GROUP BY?

Есть 3 таблицы product, product_to_category, product_to_filter

 380