Як ви можете використовувати полегшений сервер для простої розробки веб-сервера

Якщо вам потрібен простий і легкий веб-сервер, щоб лише трохи його розробити, Lite-сервер - чудовий вибір.

У цій статті я буду:

  1. Коротко пояснити , що і чому з полегшеного-сервера .
  2. Покаже вам, як створити простий веб-додаток і обслуговувати його на Lite-сервері .
  3. Поясніть деякі прості конфігурації полегшеного сервера .
  4. Нарешті, якщо ви просто хочете один раз встановити lite-сервер і використовувати його скрізь , погляньте на мій проект www-lite-server у GitHub.

Хоча це написано як вступна стаття, я сподіваюся, що:

  • Ви трохи знаєте про командний рядок, наприклад, про створення та перемикання каталогів.
  • Ви встановили npm і розумієте, як використовувати його для встановлення пакетів.
  • Ви знаєте, як створювати прості веб-сторінки за допомогою HTML.

Що таке полегшений сервер?

lite-server - це легкий веб-сервер для розробки з підтримкою односторонніх програм (SPA) . Насправді, це трохи технічніше. Але для наших цілей це досить добре.

lite-server був створений Джоном Папою. Вам слід піти за ним і прочитати всі його речі, адже він справжній герой спільноти з відкритим кодом !

Джон створив полегшений сервер, тому що він хотів простий веб-сервер, який він міг би використовувати для тестування розгортання односторінкових додатків, які використовують URL-адреси. Можливо, ви ще не використовуєте JavaScript GUI Frameworks, такі як Angular, React та Vue.js. Але знайте, що коли ви це зробите, полегшений сервер все одно буде для вас.

Тож давайте скористаємось роботами Джона насправді ...

Використання Lite-сервера у веб-проекті

Спочатку ми створимо невеликий веб-проект із простим index.html . Ми встановимо полегшений сервер . Потім ми будемо використовувати полегшений сервер для обслуговування нашої веб-сторінки.

Створіть проект

У командному рядку запустіть:

mkdir litecd lite

Це створює новий каталог з назвою lite і робить його нашим робочим каталогом.

У нашому каталозі Lite додайте файл index.html, який виглядає так:

Встановіть Lite-сервер

У командному рядку у вашому Lite- каталозі запустіть:

npm init -y

Ми використовуємо npm для ініціалізації порожнього проекту. Програма -yповідомляє, що просто використовує значення за замовчуванням для будь-яких параметрів.

Щоб додати lite-сервер до нашого проекту, ми можемо запустити:

npm install --save-dev lite-server

Це встановлює пакет lite-server і додає його до devDependencies у файлі package.json нашого проекту .

"devDependencies": { "lite-server": "^2.3.0" }

Крім того, ви можете заглянути в папку node_modules і побачити, що там встановлений полегшений сервер та його залежності.

Запустіть полегшений сервер

У файлі package.json змініть об’єкт сценаріїв . Замініть вміст записом під назвою, startякий запускає полегшений сервер , таким чином:

"scripts": { "start": "lite-server"},

Тож ваш файл package.json повинен виглядати так:

Щоб запустити Lite-сервер і обслуговувати вашу веб-сторінку index.html , запустіть:

npm start

Зверніть увагу, що Lite-сервер запускає ваш браузер за замовчуванням і відображає ваш index.html :

Крім того, полегшений сервер побудований на Browsersync. Отже, коли ми оновлюємо наш index.html , полегшений сервер оновлюється автоматично. Давайте спробуємо!

У своєму index.html, безпосередньо перед <тегом; a>, додайте на сторінку тег заголовка:

lite-server

Збережіть файл і спостерігайте, як браузер автоматично оновлюється !

Деякі прості конфігурації

Lite-сервер підтримує велику гнучкість щодо того, як він налаштований. Але для цієї статті ми будемо робити це просто.

Ми створимо файл конфігурації Lite-сервера і відредагуємо його, щоб змінити:

  • порту HTTP
  • веб-кореневий каталог
  • який браузер запускається

Файл конфігурації Lite-сервера

Файл конфігурації для полегшеного сервера : bs-config.json

Чому bs-config ? Ну, Lite-сервер побудований на Browsersync, який підтримує наявність файлу конфігурації JSON або JavaScript з назвою bs-config .

Додайте файл bs-config.json до кореня вашого проекту. Це повинно виглядати так:

Цей приклад конфігураційного файлу насправді просто дублює значення за замовчуванням. Але ми будемо використовувати його як основу для пояснення того, як змінити деякі більш корисні параметри конфігурації.

Вказівка ​​порту HTTP

За замовчуванням полегшений сервер використовує порт 3000 . Але якщо ви хочете використовувати інший порт, ви можете легко його змінити.

Наприклад, давайте перемкнемо його на використання порту 3001. У вашому файлі bs-config.json змініть порт, щоб виглядати так:

"port": 3001,

Перезапустіть Lite-сервер за допомогою npm start.

lite-сервер знову запускає наш браузер за замовчуванням. Але, цього разу URL-адреса виглядає так:

//localhost:3001/

Вказівка ​​веб-кореня

За замовчуванням Lite-сервер обслуговує сторінки з поточного каталогу, де він встановлений. Використовуючи елемент сервера в bs-config.json, ми можемо вказати інший веб-корінь або “базовий каталог”, як його називає lite-server .

Давайте спробуємо:

  1. У своєму спрощеному проекті створіть каталог із назвою: test
  2. Скопіюйте ваш index.html до тестового каталогу
  3. У bs-config.json змініть елемент сервера, щоб виглядати так:
"server": { "baseDir": "./test"}

Перезапустіть Lite-сервер. З результатів видно, що це:

Обслуговування файлів з: ./test

Запуск браузера

Після запуску Lite-сервер запускає наш браузер за замовчуванням для відображення веб-сторінки. Але, можливо, ви хочете, щоб ваш проект підтримував як IE, так і Chrome . Ну, ми можемо сказати Lite-серверу запустити обидва.

Зверніть увагу, що запис браузера у файлі конфігурації насправді є масивом. Тож ми можемо надати йому список рядків.

Давайте трохи розважимось цим і змусимо полегшений сервер запустити купу браузерів. На моїй машині встановлено три браузери: Chrome, IE та Firefox. Щоб Lite-сервер запускав усі три, я просто змінив запис браузера на:

"browser": ["chrome", "iexplore", "firefox"]

І тепер, коли я біжу, npm startя бачу це:

Бо ей! Ви ніколи не можете відкрити забагато браузерів.

www-lite-server: Встановіть один раз і використовуйте будь-де

Оскільки ми можемо налаштувати базовий каталог сервера в нашому bs-config.json , ми можемо фактично встановити полегшений сервер в одному місці і спрямувати його на будь-який інший проект.

Я створив для вас простий проект під назвою www-lite-server, який робить саме це. Ви можете використовувати його так:

git clone //github.com/t-palmer/www-lite-server.gitcd www-lite-servernpm installnpm start

Це буде обслуговувати локальний index.html, який виглядає так:

Змінюючи BASEDIR запис в Bs-config.json, ви можете мати WWW-полегшена-сервер служать веб - сторінок для будь-якого з ваших проектів. Наприклад, якщо у вас є проект у:

C: \ dev \ my-project

просто змініть свій bs-config.json, щоб виглядати приблизно так:

{ "port": 3000, "server": { "baseDir": "C:\dev\my-project" }}

Потім використовуйте, npm startщоб розпочати обслуговування веб-сторінок.

Деякі технічні примітки

lite-server - це просто обгортка навколо Broswersync. Власне, саме Browsersync робить більшу частину “важкої атлетики”. Однак програми для однієї сторінки зазвичай використовують маршрути, які браузери не синхронізують. Для отримання додаткової інформації див. Розділ "Чому" на полегшеному сервері GitHub README.

Ресурси

Слідкуйте за Джоном Папою на Medium: //medium.com/@John_Papa

Будь ласка, позначте полегшений сервер на GitHub: //github.com/johnpapa/lite-server

www-lite-server: //github.com/t-palmer/www-lite-server

Синхронізація браузера: //www.browsersync.io/