При запуске этот сервер будет использовать приведенный ниже файл HTML в своем каталоге для отображения простого веб-сайта. Все типы статических файлов, такие как CSS, JS или изображения (и другие), будут автоматически загружаться без дополнительной настройки.

Вот сервер, используемый для прослушивания статических ресурсов с именем server.js:

const connect = require('connect');
const serveStatic = require('serve-static');
connect().use(serveStatic(__dirname)).listen(process.argv[2]);
console.log('Now listening on port', process.argv[2]);

При этом используется промежуточное программное обеспечение подключения для автоматического обслуживания любых статических файлов в каталоге, в котором находится этот серверный файл (__dirname — это глобальный Node.js для текущего каталога). Node.js принимает аргументы из индекса, основанного на 0, считая самую первую команду. Таким образом, node server.js 8000 создаст process.argv из ['node', 'server.js', '8000']. Вот почему используется process.argv[2].

Затем установите библиотеки connect и server-static с помощью NPM:

npm install —-save-exact connect serve-static

Наконец, теперь просто добавьте HTML-файл шаблона с именем index.html:

<!DOCTYPE html>
<html>
  <head>
  </head>
  
  <body>
    Hello World!
  </body>
</html>

Теперь сервер можно запустить с помощью:

node server.js 8000

При посещении http://localhost:8000/ вы получите Hello World! сообщение из файла выше. Следует еще раз отметить, что это не лучший способ создания рабочего сервера, он предназначен для отладки и быстрого опробования новых концепций, недоступных напрямую в веб-консоли браузера (или легко проверяемых в онлайн-редакторах).

Демонстрация стилей и изображений

Как уже упоминалось, любой статический файл может быть загружен. Таким образом, приведенный ниже HTML-код загрузит изображение (из верхнего заголовка) и немного CSS для центрирования изображения:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
<body>
    <img class="server-image" src="abstract-server.png"/>
  </body>
</html>

А вот и CSS:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.server-image {
  width: 200px;
}

Теперь перезагрузите браузер, и изображение появится по центру по вертикали и горизонтали (или снова запустите сервер, если вы его остановили).