0

Пытаюсь начать разрабатывать на 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 (желательно четкое и понятное для новичка)?

5
  • Простите, но телепатией я не владею и код вашего сервера не вижу. Без него я не смогу ответить на вопрос. Хотя есть подозрения, что вы просто не отсылаете эти файлы браузеру.
    – T0xee.n17
    Commented 28 нояб. 2020 в 13:42
  • К тому же вам бы сначала лучше научиться обычному браузерному js, однако это лишь моё мнение.
    – T0xee.n17
    Commented 28 нояб. 2020 в 13:44
  • Не понял при чем тут код сервера. С сервера адресация на index происходит, страница загружается. На сколько я понимаю именно index и должен автоматически подгружать стили через link. Я видел информацию о том, что node не возвращает статические файлы из коробки, но в данном случае index являющийся статическим файлом вернулся Commented 30 нояб. 2020 в 8:00
  • Добавил код файла запускающий сервер и загружающий основную страницу Commented 30 нояб. 2020 в 8:05
  • Я понял в чем моя ошибка, не правильно указан путь в переменной filePath. Осталось понять как правильно его исправить. Commented 30 нояб. 2020 в 8:57

1 ответ 1

0

На точке входа в приложение происходит формирование пути до открываемого файла. Данный скрипт вызывается при всех подключениях новых файлов к странице, следовательно у меня не правильно формировался путь до открываемого файла. Изначально я предполагал, что если у меня загрузилась файл 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'
}

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.