Как настроить локальный сервер и запустить приложение с помощью Node.js

В этом кратком руководстве вы узнаете, как настроить локальный сервер с помощью Node.js. К концу вы сможете запускать базовую версию приложения на собственном виртуальном сервере.

Давайте начнем! 🚀

Зачем вам нужен веб-сервер и что это вообще такое?

Виртуальный веб-сервер работает на вашем собственном компьютере с использованием серверного программного обеспечения. Если вы начинающий разработчик, вам наверняка захочется его создать, поскольку он позволяет тестировать функции любого созданного вами веб-приложения.

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

Установите Node.js

Для начала нам нужно установить Node.js, который представляет собой среду выполнения для JavaScript (👉 на английском языке: Node поможет вам выполнить код JavaScript).

Многие разработчики приходят в восторг, когда говорят о Node. До Node только веб-браузеры, такие как Google Chrome, имели движок JavaScript, который мог читать и отображать код, написанный на JavaScript. Для Chrome этот интерпретатор называется V8. Особенность, которая сделала Node настолько популярным, заключается в том, что он позволяет запускать JavaScript практически на всех машинах, а это означает, что браузер больше не является ограничением для выполнения JavaScript.

Можно с уверенностью сказать, что Node - лучший выбор при создании простого сервера для всех видов веб-приложений. Итак, давайте установим его. Давайте рассмотрим два способа: один быстрый способ установки и другой вариант, который сначала будет немного сложнее, но позже будет намного удобнее.

(1) Быстрый способ установки Node.js

  1. Перейдите на официальную страницу Node.js и скачайте установочный пакет для своей операционной системы. Используйте версию LTS, а не текущую.
  2. После завершения загрузки установите пакет, как любое другое приложение на свой Mac или ПК.
  3. Затем вы можете перейти к выбранной вами программе Терминала. Если у вас не установлено приложение Терминал, такое как iTerm2 или Hyper, просто откройте Терминал, который предустановлен на каждом Mac. Если вы пользователь Windows, отметьте здесь.
  4. Вы можете ввести следующую команду в свой Терминал, чтобы проверить, все ли было установлено правильно: $ node -v. Если все работает нормально, вы должны увидеть номер версии узла. Также проверьте, был ли npm установлен с $ npm -v . Npm - это диспетчер пакетов узла, который поставляется вместе с узлом при установке. Мы будем использовать его в следующих шагах, чтобы установить Express и запустить наш виртуальный сервер.

(2) Лучший способ установить Node.js

Вместо описанного выше способа я предпочитаю использовать Homebrew, менеджер пакетов для macOS. Это позволяет очень быстро устанавливать недостающие приложения через Терминал. Пользователи Windows должны использовать другой менеджер пакетов, например Scoop. Они очень похожи, и в демонстрационных целях я покажу вам, как установить Node через Homebrew.

  1. Снова \ перейдите в Терминал и вставьте туда следующее приглашение (без знака $). Если вам интересно: он просто проверяет репозиторий GitHub из Homebrew и устанавливает приложение оттуда.
    $ /usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)
  2. Если Homebrew был установлен правильно, теперь мы будем готовы установить Node с помощью этой простой команды: $ brew install node
  3. Вы можете проверить, все ли в порядке, набрав: $ node -v и $ npm -v (которые должны дать вам номер версии вашего установленного узла).

Но зачем прилагать все усилия для установки Node с помощью диспетчера пакетов, такого как Homebrew? Это хорошая идея по нескольким причинам:

  • Если вы используете диспетчер установки Node, возможно, у вас возникнут проблемы с доступом, требующие внесения изменений в вашу систему с помощью команды $ sudo.
  • Кроме того, если вы когда-нибудь захотите удалить программу без Node, это будет очень беспорядочно, так как вам нужно будет отслеживать все файлы, которые были созданы.
  • Наконец, при использовании Homebrew гораздо проще поддерживать актуальную версию Node.

Настройте свое первое приложение

Ты все еще со мной, правда? Отлично, давайте, наконец, приступим к созданию настоящего веб-приложения и локального сервера!

Чтобы сделать это довольно удобно, мы можем использовать express-generator, отличный инструмент командной строки, который создает для нас скелет приложения. В противном случае вам потребуется написать более сложный код, такой как настройка экземпляра сервера, настройка механизма просмотра и т. Д. Хотя это полезно знать, нет необходимости запускать ваше первое приложение на веб-сервере.

Express-generator прост. Просто возьмите следующую команду и введите ее в свой терминал: $ npm install express-generator -g. С -g мы устанавливаем Express глобально, что означает, что вы можете получить доступ к пакету из любого каталога.

Находясь в Терминале, вы можете создать новое приложение с express-generator, набрав: $ express -v ejs -c sass myapp. В этом примере myapp будет именем вашего проекта. И угадай что? Вы только что создали свое первое приложение! Чтобы перейти в только что созданный myapp каталог, введите $ cd myapp.

Полюбуйтесь только что созданным приложением

Взгляните на только что созданный myapp проект. Чтобы увидеть свои файлы в редакторе кода, просто используйте эту строку: $ code ., находясь в папке myapp на вашем Терминале.

Чтобы это работало, вы, конечно, должны установить редактор кода, например Visual Studio Code или Atom.

При открытии редактора вы можете увидеть проект и все файлы, которые были автоматически созданы для вас с помощью экспресс-генератора. В index.ejs вы можете вносить изменения и создавать на их основе сложное веб-приложение. А пока оставим все как есть и продолжим сборку нашего сервера.

Мы почти на месте.

И последнее: мы должны установить различные дополнительные сторонние пакеты (которые указаны как зависимости в файле package.json). Обычно они требуются Express для запуска сервера, как и следовало ожидать. Хорошая новость в том, что это будет довольно просто, так как вы можете установить все это через npm одновременно. Откройте свой терминал и используйте эту подсказку:

$ npm install. Вы можете проверить, прошла ли установка успешно, снова зайдя в редактор кода. Вы увидите новую папку с именем node_modules, как в моем примере выше (подсказка: исключите ее, если вы загружаете на GitHub).

Запустите свое приложение на виртуальном веб-сервере

Наконец, давайте запустим наше приложение на веб-сервере. Большая часть необходимого уже была сделана на предыдущих этапах! Два простых шага и вот вы:

  1. Находясь в Терминале, введите следующую команду: $ npm start. Это запустит виртуальный сервер.
  2. Перейдите в адресную строку своего интернет-браузера и введите localhost:3000. Localhost - это домен верхнего уровня (TLD), такой же, как .com или .org. Однако он зарезервирован для документации и тестирования. С помощью :3000 вы вызываете порт по умолчанию для доступа к только что построенному серверу.

Куда пойти отсюда

Поздравляю! Вы создали свое первое приложение и запустили его на своем собственном сервере. Отсюда вы можете начать создавать свое собственное приложение. Каркас приложения уже настроен таким образом, чтобы вы могли создавать свой сайт в index.ejs. Если вы хотите создать что-то более продвинутое, чем простой сайт, вам следует рассмотреть возможность использования частичных файлов. Это означает, что вы создаете свое приложение из компонентов, на которые вы можете ссылаться из своего index.ejs. Удобно, что мы уже установили EJS-движок представления, который поможет вам при построении определенных частей вашего приложения в компонентах.

Спасибо за чтение. Я очень надеюсь, что вы нашли этот урок полезным.