Создание простого веб-сервера с помощью Node.js и Express

Node.js с Express  —  это популярный дуэт, используемый многими приложениями во всем мире. Данный урок познакомит вас с функциональностью этих инструментов на примере сборки простого веб-сервера.

Создаваемый сервер будет обслуживать HTML-страницу, доступную другим людям. К концу статьи вы усвоите базовые знания о:

• Node.js;
• Express;
• npm;
• создании маршрутов Express;
• обслуживании HTML;
• настройке статических ресурсов Express.

Совет: не копируйте код урока, а напишите его сами. Это позволит вам лучше его понять и усвоить.

Создание и инициализация проекта

Первым шагом будет создать пустой каталог для проекта. Это можно сделать обычным способом либо из терминала с помощью следующих команд:

mkdir express-server
cd express-server

После создания проекта нужно его инициализировать:

npm init -y

Эта команда создает файл package.json и инициализирует его с предустановленными значениями. Если вы захотите сами заполнить его поля, удалите флаг -y и следуйте инструкциям. 

Добавление Express

После инициализации проекта Node.js мы переходим к следующему шагу  —  добавлению Express. Установка пакетов в Node.js выполняется командой npm install packageName.

Для добавления последней стабильной версии Express выполните:

npm install express

После установки Express файл package.json будет выглядеть так:

{

  "name": "express-server",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "dependencies": {

    "express": "^4.17.1"

  }

}

Express перечислен среди dependencies, значит, он установился успешно. Переходим к третьему шагу  —  созданию сервера.

Создание сервера Express

Прежде чем продолжать, нужно создать для сервера JS-файл. Выполните в терминале следующую команду:

touch index.js

Теперь откройте этот файл и пропишите в нем:

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

Что эти строки делают?

1. Первая импортирует Express в проект, чтобы его можно было использовать. При каждом добавлении в проект пакета необходимо импортировать его туда, где он будет использоваться.
2. Вторая строка вызывает функцию express, которая создает новое приложение, после чего присваивает результат константе app.

Создание маршрутов и прослушивание порта

Говоря простым языком, маршрут представляет конечную точку, к которой могут обращаться пользователи. Он ассоциируется с HTTP-глаголом (например, GET, POST и пр.) и получает путь URL. Кроме того, он получает функцию, которая вызывается при обращении к этой конечной точке.

Пропишите в файле следующий код:

app.get('/', (req, res) => {

    res.send({ message: 'Hello WWW!' });

});

Разберем его согласно приведенной ранее структуре:

• Он связан с HTTP-глаголом  —  в данном случае GET.
• Он получает URL  —  здесь это домашняя страница (/).
• Он получает функцию, которая будет вызываться при обращении к конечной точке.

Следовательно, когда пользователь выполняет запрос GET к домашней странице, т.е. localhost:3333, вызывается стрелочная функция и отображается фраза “Hello WWW!”

Последним шагом подготовки сервера к работе будет настройка слушателя. Понадобится указать для приложения конкретный порт. Напишите нижеприведенный код в конец JS-файла.

app.listen(3333, () => {

    console.log('Application listening on port 3333!');

});

Чтобы иметь возможность запускать сервер, вам нужно будет вызывать метод listen. При этом вы также можете изменить номер порта (3333) на любой другой.

Доступ к приложению в браузере

Для запуска приложения выполните в терминале node index.js. Имейте в виду, что index.js  —  это произвольное имя, которое я выбрал для данного урока, так что можете назвать его app.js или как-угодно иначе.

Теперь, когда сервер запущен, можно обратиться к нему в браузере. Перейдите по адресу http://localhost:3333/, перед вами должно отобразиться следующее сообщение:

Вы отлично справились с настройкой веб-сервера Node.js + Express. В следующем разделе мы настроим статическое содержимое, а именно JavaScript, CSS, HTML, изображения и т.д.

Статические файлы

Наше приложение пока что выглядит не очень. Почему бы не добавить ему структуру и стилизацию? Но куда все это нужно добавлять?

В этом разделе вы узнаете, как настраивать и передавать статические ресурсы, такие как HTML, JavaScript, CSS и изображения.

Импорт модуля path

Первым делом нужно импортировать в приложение модуль path. Устанавливать ничего не нужно, потому что path предустановлен в Node изначально.

Пропишите в начале файла эту строку:

const path = require('path');

Зачем вообще этот модуль? Он позволяет генерировать абсолютные пути, которые необходимы для передачи статических файлов. Добавьте следующую строку в приложение перед определением маршрутов:

app.use(express.static(path.join(__dirname, 'public')));

path.join получает два аргумента:

• Текущую рабочую директорию (cwd).
• Вторую директорию, которую нужно объединить с cwd.

В качестве упражнения попробуйте вывести в консоль path.join(__dirname, 'public') и посмотрите, что получится.

На данный момент сервер должен выглядеть так:

const path = require('path');

const express = require('express');

const app = express();



app.use(express.static(path.join(__dirname, 'public')))



app.get('/', (req, res) => {

    res.send({ message: 'Hello WWW!' });

});



app.listen(3333, () => {

    console.log('Application listening on port 3333!');

});

Создание каталога public и добавление ресурсов

Создайте каталог и перейдите в него с помощью следующих команд:

mkdir public
cd public

Теперь создадим пустые файлы, куда затем добавим HTML, CSS и JavaScript. Выполните в терминале следующие команды:

touch app.js

touch index.html

touch styles.css

Мы оставим app.js максимально простым, добавив только сообщение, подтверждающее, что он работает: 

alert('it works');

То же и с styles.css. Для проверки его работоспособности мы установим цвет фона на синий:

html {

    background-color: blue;

}

В завершении нужно написать HTML, чтобы отображать все это на домашней странице. Откройте index.js и добавьте следующий HTML-код:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="/app.js"></script>

    <link rel="stylesheet" href="/styles.css">

    <title>My server</title>

</head>

<body>

    <h1>My server</h1>

    <p>Server built with Node.js and Express</p>

</body>

</html>

Теперь остается всего один шаг. 

Передача HTML-файла

Мы почти закончили. Осталось только обработать HTML-код. Для этого нужно перейти в файл index.js и прописать в нем следующее:

app.get('/', (req, res) => {
    res.sendFile(`${__dirname}/public/index.html`);
});

Если вы уже ранее работали с Node.js и Express, то можете спросить: “Что здесь делает метод sendFile и почему мы не используем render?” Метод render мы использовать не можем, так как не задействуем никакой движок (например, Pug, EJS и т.д.). Следовательно, когда кто-либо обращается к домашней странице, мы отправляем назад HTML-файл.

Итоговый код сервера должен выглядеть так:

const path = require('path');

const express = require('express');

const app = express();



app.use(express.static(path.join(__dirname, 'public')))



app.get('/', (req, res) => {

    res.sendFile(`${__dirname}/public/index.html`);

});



app.listen(3333, () => {

    console.log('Application listening on port 3333!');

});

COPY

Если теперь вы перейдете по http://localhost:3333, то увидите домашнюю страницу с синим фоном. Естественно, сначала нужно будет закрыть надоедливое всплывающее окошко.

Заключение

К завершению статьи у вас должно получиться простое веб-приложение.

В этом уроке мы узнали:

• о Node.js;
• об Express и о том, как использовать его для создания небольшого веб-приложения;
• как создавать маршруты;
• как настраивать статическое содержимое в приложении Node.js + Express;
• как передавать простой HTML-файл в Express.