Не работают стили и js на html странице возвращенной с node.js сервера. Что делать?

Question

[Isherath]

Я вчера начал копать node js. Прикольная штука.
В общем, сделал сервер, запустил через консоль.

Код такой:

var fs = require('fs');
var http = require('http');
var server = http.createServer(function(request, response) {
    response.writeHead(200, {'Content-type': 'text/html; charset=utf-8'});
    var page = fs.createReadStream('../index.html', 'utf-8');
    page.pipe(response);
});

server.listen(3000, '127.0.0.1');
console.log('Сервер запущен');

При открытии в браузере отображается голый html, а стили и js в тегах rel и script, соответственно, не работают.
Работает js только когда я пишу код внутри тегов script но не тогда, когда указана просто ссылка на код в атрибуте src этого тега.
Как быть, что читать, что делать, подскажите, пожалуйста.

Comments

[Александр]

Вообще не понятно зачем вам fs модуль. Чтобы отдать страницу вам обработчик файлов точно не нужен.
Если хотите отдать страницу - гуглите про шаблонизаторы.

[Ilia Zhitenev]

У вас на любой запрос возвращается страница ../index.html. Соответственно, файлы стилей и скриптов сервер не отдает. Вот и не работают.

Answer 1

[Роман]

Есть похожий вопрос на тостере: Как в Node.js отдавать статику без Express.js?

Также Вы можете вместо модуля http использовать более высокоуровневый фреймворк Express.

установка
простейший web сервер
раздача статических файлов

пример Express приложения раздающего статику

var express = require('express');
var app = express();
var port = 3000;

// тут надо отметить что роутеры в Express выполняются последовательно 
// и каждый из них имеет возможность прекратить дальнейшую обработку запроса последующими роутерами. 
// express.static в случае нахождения запрашиваемого файла так и поступит.

// любой запрос к http://вашдомен_или_IP/public будет восприниматься как запрос статики
app.use('/public', express.static(__dirname + '/public'));

// любой запрос будет восприниматься как запрос статики.
app.use(express.static(__dirname + '/public'));


app.use((err, request, response, next) => {
    // логирование ошибки, пока просто console.log
    console.log(err)
    response.status(500).send(‘Something broke!’)
})

app.listen(port, function () {
  console.log('Example app listening on port '+port+'!');
});

Comments

[Isherath]

Спасибо, буду пробовать.

[Роман]

Isherath, было бы интересно узнать как Вы решили вопрос)

[Isherath]

Роман, воспользовался ссылками, которые вы мне дали.

var express = require('express');
var app = express();

app.use('/css/', express.static('css'));
app.use('/app/', express.static('app'));

Все прекрасно грузится куда надо. Спасибо за подсказки. Не всегда что-то самому удается найти сразу.

Answer 2

[Сергей В]

если файлы скриптов и стилей лежат рядом с index.html, то какой сервер их должен возвращать?
написанный вами сервер способен обрабатывать только один URL: 127.0.0.1:3000 и возвращать только один ответ - содержимое файла '../index.html'
научите его обрабатывать запрос 127.0.0.1:3000/my_script.js и возвращать содержимое js файла - и скрипт будет подключаться и выполняться.

Comments

[Тимофей Шайко]

Спасибо!