Создание простого веб-сервера с помощью Node.js и Express
Node.js с Express — это популярный дуэт, используемый многими приложениями во всем мире. Данный урок познакомит вас с функциональностью этих инструментов на примере сборки простого веб-сервера.
Создаваемый сервер будет обслуживать HTML-страницу, доступную другим людям. К концу статьи вы усвоите базовые знания о:
Совет: не копируйте код урока, а напишите его сами. Это позволит вам лучше его понять и усвоить.
Создание и инициализация проекта
Первым шагом будет создать пустой каталог для проекта. Это можно сделать обычным способом либо из терминала с помощью следующих команд:
После создания проекта нужно его инициализировать:
Добавление Express
Для добавления последней стабильной версии Express выполните:
После установки Express файл package.json будет выглядеть так:
Создание сервера Express
Прежде чем продолжать, нужно создать для сервера JS-файл. Выполните в терминале следующую команду:
Теперь откройте этот файл и пропишите в нем:
Что эти строки делают?
Создание маршрутов и прослушивание порта
Говоря простым языком, маршрут представляет конечную точку, к которой могут обращаться пользователи. Он ассоциируется с HTTP-глаголом (например, GET, POST и пр.) и получает путь URL. Кроме того, он получает функцию, которая вызывается при обращении к этой конечной точке.
Пропишите в файле следующий код:
Разберем его согласно приведенной ранее структуре:
Последним шагом подготовки сервера к работе будет настройка слушателя. Понадобится указать для приложения конкретный порт. Напишите нижеприведенный код в конец JS-файла.
Доступ к приложению в браузере
Вы отлично справились с настройкой веб-сервера Node.js + Express. В следующем разделе мы настроим статическое содержимое, а именно JavaScript, CSS, HTML, изображения и т.д.
Статические файлы
Наше приложение пока что выглядит не очень. Почему бы не добавить ему структуру и стилизацию? Но куда все это нужно добавлять?
В этом разделе вы узнаете, как настраивать и передавать статические ресурсы, такие как HTML, JavaScript, CSS и изображения.
Импорт модуля path
Пропишите в начале файла эту строку:
Зачем вообще этот модуль? Он позволяет генерировать абсолютные пути, которые необходимы для передачи статических файлов. Добавьте следующую строку в приложение перед определением маршрутов:
path.join получает два аргумента:
В качестве упражнения попробуйте вывести в консоль path.join(__dirname, ‘public’) и посмотрите, что получится.
На данный момент сервер должен выглядеть так:
Создание каталога public и добавление ресурсов
Создайте каталог и перейдите в него с помощью следующих команд:
Теперь создадим пустые файлы, куда затем добавим HTML, CSS и JavaScript. Выполните в терминале следующие команды:
Мы оставим app.js максимально простым, добавив только сообщение, подтверждающее, что он работает:
В завершении нужно написать HTML, чтобы отображать все это на домашней странице. Откройте index.js и добавьте следующий HTML-код:
Теперь остается всего один шаг.
Передача HTML-файла
Мы почти закончили. Осталось только обработать HTML-код. Для этого нужно перейти в файл index.js и прописать в нем следующее:
Итоговый код сервера должен выглядеть так:
Заключение
К завершению статьи у вас должно получиться простое веб-приложение.
Создаём своё первое десктопное приложение при помощи HTML, JS и Node-WebKit
В наше время при помощи JavaScript и HTML можно сделать практически всё. А благодаря Node-WebKit (недавно переименован в NW.js) можно делать даже десктопные приложения, которые выглядят, как нативные и имеют доступ ко всем частям ОС. Сегодня мы покажем, как создать простое десктопное приложение при помощи Node-WebKit, используя jQuery и несколько модулей для Node.js.
Node-WebKit — комбинация Node.js и встроенного браузера WebKit. Код JavaScript выполняется в особом окружении, из которого есть доступ и к стандартному API браузеров, и к Node.js.
Устанавливаем Node-WebKit
Для разработки нужно скачать исполняемый файл node-webkit и вызывать его из командной строки. Позже всё вместе упакуется в одну программу, которая будет запускаться пользователем.
Скачайте файлы, подходящие для вашей системы, и распакуйте их в подходящее место. Запускать их нужно так:
Откроется новое окно node-webkit, в которое будет выведено множество отладочных сообщений.
Первое приложение
Мы подготовили для вас тестовое приложение для примера. Оно скачивает последние статьи с Tutorialzine и делает из них карусельку при помощи jQuery Flipster.
структура каталогов
В архиве содержатся вышеуказанные файлы. Выглядят они как статический сайт, но работать в браузере при запуске index.html не будут – им нужны модули Node.js. Для запуска воспользуйтесь командой
Она и запустит наше превосходное приложение.
Как это сделано
Всё начинается с файла package.json, который node-webkit ищет при запуске. Там описано, что нужно загружать и даны разные настройки окна.
package.json
В свойстве window описана необходимость открыть окно размера 800 х 500 пикселей и спрятать у него тулбар. В него загрузится файл из свойства main. У нас это
index.html
И наконец, наш файлик с JavaScript. Вот где самое интересное.
В браузере нельзя получить доступ к информации на другом домене через jQuery. Но node-webkit убирает эти ограничения.
Использованные модули:
Также есть jQuery и плагин jQuery-flipster. И всё!
Пакуем и распространяем
Конечно, для удобства пользователя нужно запаковать всё это в отдельную программу, которую можно будет запускать простым двойным кликом.
Вручную это довольно муторно делать, особенно если вы хотите подготовить приложение для разных платформ. Но есть для этого и автоматические библиотеки.
Запуск HTTP-сервера и выдача HTML-файла
Запуск HTTP-сервера с Node
Код для этого примера вы можете найти здесь.
Node не только содержит возможность обрабатывать JS-файлы, как мы только что сделали, он также может создать HTTP-сервер. Мы собираемся рассмотреть создание HTTP-сервера с Node-фреймворком Express для обработки HTML-файла.
В первом приложении мы только выводили что-то в консоль. Двигаясь вперёд, мы учтём чему уже научились для следующего шага, в котором мы можем организовать веб-сайт для наших пользователей. На один шаг мы станем ближе к полноценному веб-приложению.
Давайте придерживаться того же приложения, добавив фреймворк Express с выдачей HTML-файла. Нам понадобятся те же файлы (package.json, server.js) и к ним мы добавим новый файл index.html.
Express: Node-фреймворк
Одним из самых больших преимуществ Node является то, что он содержит поддержку множества пакетов. Сообщество отправляет много пакетов в npm и на момент написания в нём хранится 129257 пакетов, которые загрузили свыше 17694831 раз за последний день. Это большое достижение!
Пакеты расширяют функциональность нашего приложения и найдутся пакеты для многих разных случаев применения.
Вы, возможно, слышали о Grunt, Gulp или даже препроцессорах CSS вроде Less — всё это может быть пакетом.
Express — лёгкая платформа для создания веб-приложений с использованием Node.js. Express помогает организовать веб-приложение на стороне сервера. Сайт ExpressJS описывает его как «минимальной и гибкий Node-фреймворк для веб-приложений».
Express скрывает много внутренней работы Node, которая позволяет вам погрузиться в код приложения, получать всякие штуки и работать намного быстрее. Он прост для изучения и ещё даёт вам немного гибкости с его структурой.
Существует причина, почему в настоящее время это самый популярный фреймворк для Node. Вот несколько больших имён использующих Express:
Для просмотра полного списка зайдите на эту страницу.
Express поставляется с несколькими замечательными возможностями, которые добавят лёгкости в вашу разработку:
Не волнуйтесь, если эти термины являются для вас новыми. Просто знайте, что Express делает разработку намного проще и работать с ним в радость.
Установка Express
Пакеты для конкретного приложения Node определяются в package.json. Для получения установленных пакетов вы можете использовать один из двух методов:
Мы собираемся использовать второй метод. Перейдите в командную строку и наберите:
Меняться проектами между разработчиками и сотрудниками очень легко. Просто отправьте другим пользователям ваш проект и они запустят npm install чтобы установить всё из раздела dependencies.
Поскольку у нас уже есть Node и готов Express, используем их для создания HTTP-сервера и выдачи HTML-файла нашим пользователям.
Создание HTTP-сервера и отправка HTML-файла
Начнём с лёгкой части на нашем пути — с HTML-файла. В проекте создайте новый файл index.html и поместите внутрь следующее:
Мы будем ссылаться на CSS из фреймворка Bootstrap через Bootstrap CDN, это поможет нам быстро сделать стилизацию для этой демонстрации.
Двинемся вперёд и создадим наш HTTP-сервер в Node с помощью Express. Удалите всё из файла server.js и добавьте то что нам понадобится:
Кроме этого файла больше ничего не требуется, чтобы использовать Express для запуска HTTP-сервера и отправки HTML-файла!
Сервер запускается через app.listen() и туда же передаётся желаемый порт 8080.
Чтобы убедиться что всё работает, перейдите в командную строку, чтобы обработать этот файл и запустить сервер.
Теперь мы можем посмотреть на наш сайт в браузере по адресу http://localhost:8080.
Всякий раз, когда мы запускаем сервер с Node, он будет размещён по адресу http://localhost:НОМЕР_ПОРТА.
Это очень лёгкий и быстрый способ создать HTTP-сервер и начать разработку. Node и Express могут применяться для создания удивительных приложений или при необходимости они просто запускают простой сервер для работы.
Отлично! Мы уже много сделали с Node:
Давайте сделаем следующий шаг и создадим приложение, которое на самом деле показывает соответствующие данные.
Как установить Node.js
Устанавливаем программную платформу Node.js, для того чтобы дать JavaScript возможность взаимодействовать с устройствами ввода-вывода через свой API и подключать разные внешние библиотеки.
Установка Node.js на Windows
Для начала необходимо установить правильную консоль для WIndows.
После этого можно переходить к установке Node.js. Для Windows есть только один способ.
Необходимо перейти на официальный сайт https://nodejs.org и на главной странице скачать последнюю стабильную версию.
Официальный сайт https://nodejs.org.
После загрузки инсталлятор следует запустить и установить Node.js, как любую другую программу.
Проверка версии и установка пакета.
Установка Node.js на OS X
Заходим на сайт https://nodejs.org и на главной странице скачиваем последнюю стабильную версию, нажав на соответствующую кнопку.
Официальный сайт https://nodejs.org.
После скачивания достаточно установить пакет через инсталлятор и можно начинать пользоваться.
Как запустить JavaScript с помощью Node.js
Если вы только сели за изучение JavaScript, то у вас очень быстро возникнет вопрос: а как запустить код?
Простой скрипт можно запустить прямо в браузере. Большинство из них сегодня позволяют сделать это в пару кликов. Но возможностей браузера не хватит, если задача — разработка сложного приложения, работающего с базами данных и файлами. Здесь на помощь приходит Node.js.
Node.js — среда выполнения JavaScript-кода. Она создана на базе движка V8, который крутится в сердце браузера Chrome. Эта среда позволяет запускать JavaScript-сценарии в окружении операционной системы, а не браузера.
Кроме стандартных возможностей JavaScript, Node.js даёт инструменты для работы с сетью, вводом и выводом, файловой системой и не только. В придачу к среде идёт и пакетный менеджер npm, который позволяет разработчикам ставить сторонние пакеты в одну строку.
Разобраться с базовыми функциями будет просто, если вы уже знаете JavaScript или другой скриптовый язык.
Давайте попробуем
Сначала установим среду с сайта разработчиков и проверим в консоли, что всё прошло нормально.
Введём простую команду:
Результат, который мы получили:
Рассмотрим пару простых примеров. По традиции выведем Hello world! :
Hello world!
Попробуем пример сложнее, например, цикл выводов. Как консоль отреагирует на него?
Цикл выводов.
Node.js отлично справляется и с более сложными конструкциями, даже самостоятельно выстраивая лесенку. В случае обнаружения ошибки, он тут же сообщит об этом, остановив скрипт.
Например, случайно пропустим букву в команде:
Упс, ошибка.
Ну вот, всё необходимое для написания простых и компактных приложений есть. Но писать большое приложение на десятки строк кода в консоли будет не слишком-то удобно. Да и такой подход не сработает, если приложение разбито на несколько скриптов, лежащих в разных файлах.
Усложняем задачу
Попробуем перейти к чуть более продвинутому использованию среды.
Создайте на жёстком диске папку для проекта и положите туда ваш готовый скрипт. Назовите его index.js — так принято. Если под рукой скрипта нет, то возьмите цикл с выводом простого значения, с которого мы начали.
Второй способ — самостоятельно создать текстовый файл, назвать его package.json и заполнить все необходимые поля. Файл будет представлением приложения, в котором содержится его имя, версия, авторы и зависимости. На данном этапе может выглядеть так:
Но вводить команду постоянно — не слишком рациональное расходование времени. Давайте упростим себе жизнь.
Скопируйте в файл следующий код:
Подробнее про команды можно прочитать здесь.
Что мы сделали
Теперь при вводе команды npm start будет запускаться наш сервер, который будет обрабатывать всё содержимое нашего приложения.