При запуске этот сервер будет использовать приведенный ниже файл 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; }
Теперь перезагрузите браузер, и изображение появится по центру по вертикали и горизонтали (или снова запустите сервер, если вы его остановили).