ServBay

Русский

English
简体中文
繁體中文
Español
العربية
Português
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Русский

English
简体中文
繁體中文
Español
العربية
Português
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Appearance

Создание и запуск проекта React с помощью ServBay ​

Что такое React? ​

React — это популярная библиотека JavaScript с открытым исходным кодом, поддерживаемая компанией Meta (ранее Facebook) и крупным сообществом разработчиков. Она предназначена для создания пользовательских интерфейсов (UI) на основе компонентов, позволяя быстро и удобно строить сложные и масштабируемые одностраничные приложения (SPA) и большие веб-проекты. Ключевые преимущества React включают декларативный подход к построению интерфейса, эффективный виртуальный DOM, однонаправленный поток данных и мощную экосистему.

Основные возможности и плюсы React ​

  • Компонентный подход: Сложные интерфейсы разбиваются на независимые и переиспользуемые компоненты, что облегчает поддержку и масштабирование кода.
  • Декларативный стиль UI: Требует лишь описать желаемое состояние интерфейса, а React автоматически обновляет DOM для его соответствия, упрощая логику разработки.
  • Виртуальный DOM: React держит виртуальное представление DOM в памяти и минимизирует количество операций с реальным DOM, повышая производительность интерфейса.
  • Однонаправленный поток данных: Состояние приложения управляется сверху вниз, что делает отслеживание изменений простым и предсказуемым.
  • JSX: Специальное расширение синтаксиса JavaScript, позволяющее писать компоненты с разметкой, похожей на HTML — это повышает читаемость и удобство работы с кодом.
  • Развитая экосистема: Тысячи сторонних библиотек — от роутинга (React Router) и управления состоянием (Redux, Zustand, MobX) до UI-компонентов (Material UI) — позволяют масштабировать любой проект.

React делает процесс создания современных и производительных веб-приложений максимально быстрым и комфортным.

Как развернуть среду разработки и production для React с помощью ServBay ​

ServBay — это мощная локальная среда для веб-разработки, доступная пользователям macOS и Windows. В её состав входят готовые пакеты, включая Node.js. В этом руководстве вы узнаете, как воспользоваться Node.js-окружением ServBay и функцией Websites для пошагового создания, настройки и запуска React-проекта, включая обратный прокси в режиме разработки и публикацию статического сайта для production.

Что понадобится заранее ​

Перед началом убедитесь, что выполнены следующие пункты:

  1. Установлен ServBay: Вы скачали и запустили программу на вашем компьютере.
  2. Установлен пакет Node.js: Через интерфейс ServBay или командную строку поставлен пакет Node.js. Подробную инструкцию смотрите в документации по установке Node.js в ServBay. ServBay сам управляет версией Node.js и переменными окружения.

Создание проекта React ​

Для быстрой и современной инициализации React-проекта мы используем инструмент Vite. Он обеспечивает молниеносный старт и мгновенное обновление модулей (HMR), благодаря чему стал стандартом для новых React-проектов (заменил классический create-react-app).

  1. Откройте терминал и перейдите в корень сайта

    Откройте приложение терминала. ServBay рекомендует стандартные директории для корня сайтов:

    macOS:

    bash
    cd /Applications/ServBay/www

    Windows:

    cmd
    cd C:\ServBay\www

  2. Создайте новый React-проект через Vite

    Выполните команду ниже для создания нового проекта servbay-react-demo с React-шаблоном:

    bash
    npx create-vite servbay-react-demo --template react
    • npx — это инструмент для запуска npm-пакетов без глобальной установки, всегда позволяет использовать свежую версию create-vite.
    • create-vite — официальный генератор проектов Vite.
    • servbay-react-demo — имя папки с вашим проектом.
    • --template react — выбирает React-шаблон для нужной структуры.

    Следуйте интерактивным инструкциям для завершения генерации проекта.

  3. Перейдите в папку проекта и установите зависимости

    Откройте созданную папку и установите npm-зависимости:

    bash
    cd servbay-react-demo
npm install
    • Вместо npm можно воспользоваться yarn install или pnpm install, если предпочитаете Yarn или PNPM.

Изменение содержимого проекта React (опционально) ​

Для проверки корректности настройки можно поменять содержание стартовой страницы.

  1. Откройте файл src/App.jsx или src/App.tsx

    Откройте файл src/App.jsx (для JavaScript-шаблона) или src/App.tsx (для TypeScript-шаблона) в вашем редакторе кода.

  2. Внесите изменения

    Найдите участок, отвечающий за отображение контента, и измените его так, чтобы выводилось "Hello ServBay!":

    javascript
    // ... другие импорты ...
import './App.css';

function App() {
  // ... прочий код ...
  return (
    <>
      {/* ... другие элементы ... */}
      <h1>Hello ServBay!</h1>
      {/* ... другие элементы ... */}
    </>
  );
}

export default App;

    Сохраните изменения.

Запуск проекта в режиме разработки ​

На этапе разработки удобно использовать встроенный сервер с горячей перезагрузкой (HMR), который можно интегрировать с обратным прокси ServBay.

  1. Запустите сервер разработки через терминал

    Находясь в папке servbay-react-demo, используйте команду для запуска Vite-сервера на порту, например 8585:

    bash
    npm run dev -- --port 8585
    • npm run dev запускает dev-скрипт из package.json (обычно это запуск Vite-сервера).
    • -- --port 8585 — передаёт параметр порта для Vite.

    После запуска сервер напишет адрес в консоли, например: http://localhost:8585. Не закрывайте это окно терминала!

  2. Настройте обратный прокси в ServBay

    Откройте интерфейс ServBay, перейдите в раздел Websites (Сайты), нажмите кнопку добавления и заполните:

    • Имя (Name): ServBay React Dev (произвольный информативный заголовок)
    • Домен (Domain): servbay-react-dev.servbay.demo (пример демонстрационного поддомена с брендом ServBay)
    • Тип сайта (Site Type): Выберите Reverse Proxy (Обратный прокси)
    • IP прокси (Proxy IP): 127.0.0.1 (локальный адрес)
    • Порт прокси (Proxy Port): 8585 (тот же, что задан для dev-сервера)

    Сохраните изменения. ServBay автоматически применит настройки, настроив встроенный веб-сервер (Caddy или Nginx) на передачу запросов с вашего домена к http://127.0.0.1:8585.

    Детальную инструкцию по созданию сайта смотрите в документации ServBay по управлению сайтами.

  3. Откройте dev-сайт в браузере

    Введите адрес: https://servbay-react-dev.servbay.demo в вашем браузере.

    • ServBay автоматически выдает SSL-сертификаты (от User CA или Public CA), чтобы вы могли безопасно работать через HTTPS. Подробнее о SSL смотрите в руководстве по защите сайта с помощью SSL.
    • Теперь любые правки в исходных файлах при сохранении моментально отобразятся в браузере благодаря горячей перезагрузке (HMR).

Сборка production-версии ​

Когда проект готов к публикации, вам нужно собрать его оптимизированную production-версию.

  1. Соберите production-версию через терминал

    В каталоге servbay-react-demo выполните:

    bash
    npm run build

    Эта команда запускает build-скрипт из вашего package.json. Vite скомпилирует, объединит и оптимизирует ваш код и статические ресурсы (HTML, CSS, JS и пр.), сохранив их обычно в папку dist. После завершения сборки терминал покажет сообщение об успехе.

  2. Настройте сервис статических файлов в ServBay

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

    В интерфейсе ServBay откройте раздел Websites, нажмите "+" и укажите:

    • Имя (Name): ServBay React Prod (произвольное имя)
    • Домен (Domain): servbay-react.servbay.demo (выделенный домен для production)
    • Тип сайта (Site Type): Выберите Static (Статический сайт)
    • Корневая директория (Website Root Directory): путь к папке dist после сборки:
      • macOS: /Applications/ServBay/www/servbay-react-demo/dist
      • Windows: C:\ServBay\www\servbay-react-demo\dist

    Сохраните настройки. ServBay настроит сервер для обслуживания статичных файлов из данной директории.

  3. Откройте production-сайт через браузер

    Перейдите на обновленный домен: https://servbay-react.servbay.demo.

    Перед вами окажется итоговая production-версия сайта. Он также будет автоматически защищен SSL-сертификатом ServBay.

Итог ​

Следуя этим шагам, вы сможете быстро развернуть React-проект в локальной среде с помощью ServBay, организовав как удобное dev-окружение с горячей перезагрузкой и обратным прокси, так и статическую production-сборку. ServBay упрощает настройку и управление локальной инфраструктурой для macOS и Windows, благодаря встроенной поддержке Node.js, гибкой конфигурации сайтов (прокси и статика) и автоматическим SSL-сертификатам. На этой базе вы дальше можете развивать, тестировать и деплоить свои приложения на React.