Node.JS (веб сервер).Как подключить css-файл к html-файлу при выводе страницы через веб сервер

Question

При создании простенького веб сервера с помощью Node.JS подключаю js-файл с кодом:

let fs = require('fs');
let http = require('http');
const hostname = 'xxx.xxx.x.xxx'; //IP-адрес
const port = 3000;
let server = http.createServer( function(req, res){
res.writeHead(200, {'Content-Type':'text/html; charset=utf-8'});
let myReadShort = fs.createReadStream(__dirname + '/H.C.html','utf-8'); // путь к html-файлу
myReadShort.pipe(res);
});
server.listen(port, hostname);
console.log('Йоу!');

Впоследствии при подключении через IP-адрес на странице отображается вышеуказанный H.C.html без подключения стилей (хотя путь на необходимый для этого css-файл, содержится в коде самого H.C.html и он к нему подключен ). Можно ли сразу же подключить стили (может дополнительно прописать путь к css-файлу в самом js-файле) в вышеуказанном js-файле, чтобы страница (H.C.html) отображалась с подключенными стилями?

Answer 1

увы, но придется отдавать все файлы =)

let server = http.createServer( function(req, res){
  // req . url и путь к файлу у вас может быть другим
  if( req . url === '/H.C.html'){// отдаем html
    res.writeHead(200, {
        'Content-Type':'text/html; charset=utf-8',
    });
    let myReadShort = fs.createReadStream(__dirname + '/H.C.html','utf-8');
    myReadShort.pipe(res);
  } else if( req . url === '/style.css'){// отдаем css
    res.writeHead(200, {
        'Content-Type':'text/css; charset=utf-8',
    });
    let myReadShort = fs.createReadStream(__dirname + '/style.css','utf-8');
    myReadShort.pipe(res);
  } else { // отдаем ошибку
    res.writeHead(404, {
        'Content-Length':'0',
    });
    res.end ();
  }
});

Answer 2

Вообще, как-то так вроде:

http.createServer((req, res)=>{
    if(req.url === '/style.css'){
        res.writeHead(200, {'Content-Type': 'text/css'});
        // res.write(cssFile);
        res.write(fs.readFileSync(__dirname + 'style.css', 'utf8'));
    }else if(req.url === '/'){
        res.writeHead(200, {'Content-Type': 'text/html'});
        // res.write(htmlFile);
        res.write(fs.readFileSync(__dirname + 'index.html', 'utf8'));
    }
    res.end();
});

Но, вообще - не рекомендую, подключи пакет экспресса и жыви как челабек прямоходящий, указав публичную папку

Answer 3

let fs = require('fs');
let http = require('http');
const hostname = 'xxx.xxx.x.xxx';
const port = 3000;

let server = http.createServer((req, res)=>{
    if(req.url === '/C.css'){
        res.writeHead(200, {'Content-Type': 'text/css'});
        res.write(C.css);
    }else{
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.write(H.C.html);
    }
    res.end();
});
server.listen(port, hostname);
console.log('Йоу!');

ТАК???

Answer 4

Допустим, у нас есть проект такого вида и мы хотим из папки public раздавать статические файлы (index.html, стили и скрипты).

Код index.html

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello World</title>

  <link rel="stylesheet" href="/css/style.css">
  <script type="text/javascript" src="/js/main.js"></script>

  <link rel="stylesheet" href="/css/style-noop.css">
  <script type="text/javascript" src="/js/main-noop.js"></script>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

Сделать это используя нативный Server

const http = require('http');
const path = require('path');
const fs = require('fs');
const mime = require('mime');


const FOLDER = `${process.cwd()}/public`;

const server = http.createServer(
  async (req, res) => {
    try {
      let filename = path.normalize(decodeURI(req.url));
      if (filename === '/') {
        filename = '/index.html';
      }
      const filepath = path.join(FOLDER, filename);

      switch (req.method) {
        case 'GET':
          const stream = fs.createReadStream(filepath);
          stream.on('open', () => {
            const mimeType = mime.getType(filepath);
            res.setHeader('Content-Type', mimeType);
          });
          stream.on('error', (err) => {
            console.warn(err);
            let status;
            let message;
            if (err.code === 'ENOENT') {
              status = 404;
              message = 'File not found';
            }

            res.writeHead(status || 500, { 'Content-Type': 'text/plain', Connection: 'close' });
            res.end(message || 'Internal error');
          });

          stream.pipe(res);

          res.on('close', () => {
            stream.destroy();
          });

          break;
        default:
          res.statusCode = 502;
          res.end('Not implemented');
      }
    } catch (err) {
      console.log(err);
      res.writeHead(err.code || 500, { Connection: 'close' });
      res.end(err.message || 'Internal error');
    }
  }
);

const hostname = 'localhost';
const port = 3000;
server.listen(port, hostname);

Сделать это используя node-static

const http = require('http');
const nstatic = require('node-static');

const FOLDER = `${process.cwd()}/public`;
const fileServer = new nstatic.Server(FOLDER);

const server = http.createServer((req, res) => {
  req.addListener('end', () => {

    fileServer.serve(req, res, (err) => {
      if (err && err.status === 404) { // If the file wasn't found
        res.writeHead(404, { 'Content-Type': 'text/plain', Connection: 'close' });
        res.end(err.message || 'Internal error');
      }
    });

  }).resume();
});

const port = 3000;
server.listen(port);

Сделать это используя express и express-static

const express = require('express');

const app = express();

const FOLDER = `${process.cwd()}/public`;
app.use(express.static(FOLDER));

const port = 3000;
const hostname = 'localhost';
app.listen(port, hostname, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

Сделать это используя fastify и fastify-static

const fastify = require('fastify')();

const FOLDER = `${process.cwd()}/public`;
fastify.register(
  require('fastify-static'),
  {
    root: FOLDER,
  }
);

fastify.listen(3000, (err, address) => {
  if (err) {
    throw err;
  }
  fastify.log.info(`server listening on ${address}`);
});

БЛОГ НА HUSL

Node.JS (веб сервер).Как подключить css-файл к html-файлу при выводе страницы через веб сервер

Ответы (4 шт):

Сделать это используя нативный Server

Сделать это используя node-static

Сделать это используя express и express-static

Сделать это используя fastify и fastify-static