Как вы можете использовать lite-server для простой разработки веб-сервера

1656629891 kak vy mozhete ispolzovat lite server dlya prostoj razrabotki veb servera

Тодд Палмер

1*m6fftYKAvqCzHI0Zx_4FGQ
Северное сияние над рукой, Финляндия, Тимо Ньютон-Симс.

Если вам нужна простой и легкий веб-сервер только для того, чтобы немного разработать, lite-server является отличным выбором.

В этой статье я буду:

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

Хотя это статья вводного уровня, я ожидаю:

  • Вы немного знаете о командной строке, например о создании и переключении каталогов.
  • Вы установили npm и понимаете, как использовать его для установки пакетов.
  • Вы знаете, как создавать простые веб-страницы с помощью HTML.

Что такое lite-server?

lite-сервер – это a легкий веб-сервер разработки с поддержкой Single Page Apps (SPA). На самом деле это чуть-чуть более технически. Но для наших целей этого достаточно.

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

1*nV5CbqhIJg22vVQnOA9dKw
Джон Папа

Джон создал lite-сервер потому что он хотел простой веб-сервер, который мог бы использовать для тестирования развертывания Одностраничные программы которые используют URL-маршруты. Возможно, вы еще не используете JavaScript GUI Frameworks, такие как Angular, React и Vue.js. Но знайте, что когда вы это сделаете, lite-сервер все еще будет рядом с вами.

Итак, давайте воспользуемся преимуществами работы Джона, фактически…

Использование lite-сервера в веб-проекте

Сначала мы создадим небольшой веб-проект с помощью простого index.html. Мы установим lite-сервер. Тогда мы будем использовать lite-сервер для обслуживания нашей веб-страницы.

Создайте проект

В командной строке выполните:

mkdir litecd lite

Это создает новый каталог под названием облегченный и делает его нашим рабочим каталогом.

В нашем облегченный каталог, добавить index.html файл, который выглядит так:

Установить lite-сервер

В командной строке в вашей облегченный каталог, запустите:

npm init -y

Мы используем npm для инициализации пустого проекта. The -y говорит ему просто использовать значение по умолчанию для любых параметров.

Добавить lite-сервер в наш проект мы можем запустить:

npm install --save-dev lite-server

Это устанавливает lite-сервер пакет и добавляет его в devDependencies в нашем проекте package.json файл.

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

Кроме того, вы можете посмотреть на узлы_модули папку и просмотрите это lite-сервер и все его зависимости установлены там.

Запустите lite-server

В вашем package.json файл, измените файл сценарии объект. Замените содержимое записью под названием start бегущий lite-сервернравится это:

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

Итак, теперь ваш package.json файл должен выглядеть так:

Бежать lite-сервер и служить своим index.html веб-страницу, запустите:

npm start

Обратите внимание на это lite-сервер запускает ваш браузер по умолчанию и отображает ваш index.html:

1*qAp97i9vMP7N5nC6z95Bjw

Кроме того, lite-сервер построен на Browsersync. Итак, когда мы обновляем наш index.html, lite-server обновится автоматически. Давайте попробуем!

В вашем index.html, непосредственно перед <;a>, добавьте тег заголовка к странице:

<h1>lite-server</h1>

Сохраните файл и следите за обновлением браузера автоматически-магически!

1*7OY0E-v8l2vZZxNjHKK14Q

Некоторая простая конфигурация

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

Мы создадим a lite-сервер файл конфигурации и измените его, чтобы изменить:

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

Файл конфигурации lite-server

The конфигурационный файл для lite-сервер это: bs-config.json

Почему bs-конфигурация? Ну, lite-сервер построен на Browsersync, который поддерживает наличие файла конфигурации JSON или JavaScript bs-конфигурация.

Добавить a bs-config.json файл в корень вашего проекта. Это должно выглядеть так:

Этот пример файла настройки просто дублирует значение по умолчанию. Но мы используем его в качестве основы для объяснения того, как изменить некоторые более полезные параметры конфигурации.

Указание порта HTTP

По умолчанию, lite-сервер использует порт 3000. Но если вы хотите использовать другой порт, вы можете легко изменить его.

К примеру, давайте переключим его на использование порта 3001. В вашем bs-config.json файл, измените порт выглядеть так:

"port": 3001,

Перезагрузите lite-сервер использование npm start.

lite-сервер снова запускает наш браузер по умолчанию. Но на этот раз URL выглядит так:
http://localhost:3001/

Указание Web Root

По умолчанию, lite-сервер обслуживает страницы из текущего каталога, где он установлен. Использование сервер элемент в bs-config.json, мы можем указать другой веб-корень или «базовый каталог» как lite-сервер называет это.

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

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

Перезапустите Lite-сервер. Вы можете увидеть в исходных данных, что это:
Обслуживание файлов из: ./test

1*Gc6nHvtkISSEKhehhLggJg

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

Когда он запускается, lite-сервер запускает браузер по умолчанию для отображения веб-страницы. Но, возможно, вы хотите, чтобы ваш проект поддерживал оба IE и Chrome. Ну, мы можем сказать lite-сервер чтобы запустить оба.

Обратите внимание, что запись браузера в файле конфигурации является массивом. Итак, мы можем предоставить ему список строк.

Давайте развлечемся с этим и заставим lite-server запускать кучу браузеров. На моей машине установлено три браузера: Chrome, IE и Firefox. Сделать lite-сервер запустить все три, я просто изменю запись браузера на:

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

И теперь, когда я бегаю npm start Я вижу это:

1*OXA9XEMm6zFc2VvrWiMaMg

Потому что привет! Вы никогда не можете иметь также открыто много браузеров.

www-lite-server: установите один раз и используйте где угодно

Поскольку мы можем настроить сервер Базовый каталог в нашем bs-config.jsonмы можем установить lite-сервер в одном месте и указывайте на любой другой проект.

Я создал вам простой проект под названием www-lite-server, который делает именно это. Вы можете использовать это так:

git clone  www-lite-servernpm installnpm start

Это будет служить местным index.html, который выглядит так:

1*1XEsYGi6EatSvZ4KmxL-VQ

Сменив baseDir запись в bs-config.json, ты можешь иметь www-lite-сервер обслуживать веб-страницы для любых ваших проектов. Например, если у вас есть проект в:
C:\dev\my-project
просто измените свой bs-config.json выглядеть примерно так:

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

Затем используйте npm start для работы с веб-страницами.

Некоторые технические примечания

lite-сервер это только обертка вокруг Broswersync. На самом деле, именно Browsersync выполняет большую часть «тяжелой работы». однако, Одностраничные программы обычно используют маршруты, не обрабатываемые Browsersync. Дополнительные сведения см. в разделе Почему на упрощенном сервере GitHub README.

Ресурсы

Следите за Джоном Папой на Medium: https://medium.com/@John_Papa

Отметьте сервер lite на GitHub: https://github.com/johnpapa/lite-server

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

Синхронизация браузеров:

Добавить комментарий

Ваш адрес email не будет опубликован.