Створення та запуск проєкту React у локальному середовищі macOS за допомогою ServBay

Що таке React?

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

Основні особливості та переваги React

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

Використовуючи React, розробники можуть швидко й ефективно створювати сучасні, продуктивні веб-застосунки.

Налаштування середовища розробки і продакшн-деплою React за допомогою ServBay

ServBay — це потужне локальне середовище для веб-розробки, що надає користувачам macOS автоматизовану підтримку різних стеків, включаючи Node.js. У цьому посібнику докладно пояснюється, як використовувати Node.js та функцію "Websites" у ServBay для поступового створення, конфігурування й запуску вашого проєкту React з реверс-проксі для дев-серверу та обслуговування статичних файлів у продакшн.

Перед початком роботи

Переконайтеся, що виконали такі підготовчі кроки:

1. Встановили ServBay: Ви маєте встановлений та запущений ServBay на вашому комп’ютері під macOS.
2. Встановили Node.js через ServBay: Додали Node.js-пакет через графічний інтерфейс або консоль ServBay (детальніше див. інструкцію щодо додавання Node.js у ServBay). ServBay самостійно керує версіями Node.js та змінними оточення.

Створення нового проекту React

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

1. Відкрийте термінал і перейдіть до кореневого каталогу сайтів

   Відкрийте Terminal. Стандартний каталог для сайтів у ServBay — /Applications/ServBay/www. Перейдіть до цього каталогу:

   cd /Applications/ServBay/www

2. Створіть новий React-проєкт через Vite

   Виконайте таку команду, щоб створити новий проєкт, наприклад, з ім’ям servbay-react-demo на шаблоні react:

   npx create-vite servbay-react-demo --template react

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

   Дотримуйтесь інструкцій у терміналі для завершення ініціалізації проєкту.

3. Зайдіть у каталог проєкту та встановіть залежності

   Перейдіть у створений каталог і встановіть залежності через npm:

   cd servbay-react-demo
   npm install

   • Ви також можете скористатися yarn install або pnpm install, якщо віддаєте перевагу цим менеджерам пакетів.

(Необов’язково) Редагуємо головну сторінку

Щоб впевнитися, що налаштування працює, спробуйте трохи змінити головну сторінку проєкту.

1. Відкрийте файл src/App.jsx чи src/App.tsx

   Відкрийте у будь-якому редакторі кодів файл src/App.jsx (для JS) або src/App.tsx (для TypeScript).

2. Внесіть зміни

   Знайдіть центральну частину рендеру та змініть її, наприклад, ось так:

   // ... інші імпорти ...
   import './App.css';
   
   function App() {
     // ... інший код ...
     return (
       <>
         {/* ... інші елементи ... */}
         <h1>Hello ServBay!</h1>
         {/* ... інші елементи ... */}
       </>
     );
   }
   
   export default App;

   Збережіть зміни.

Режим розробки (Dev Mode)

Під час розробки запускається локальний dev-сервер із підтримкою HMR (гарячого перезавантаження модулів). Щоб працювати через домен та SSL навіть у дев-середовищі, налаштуємо реверс-проксі за допомогою ServBay.

1. Запустіть dev-сервер у терміналі

   У каталозі servbay-react-demo виконайте команду для запуску Vite на певному порту (наприклад, 8585):

   npm run dev -- --port 8585

   • npm run dev запускає скрипт dev із вашого package.json (активує Vite dev-сервер).
   • -- --port 8585 задає порт запуску дев-серверу.

   Dev-сервер виведе в термінал адресу для локального доступу, наприклад, http://localhost:8585. Не закривайте це вікно під час розробки!

2. Налаштуйте реверс-проксі (Reverse Proxy) у ServBay

   Відкрийте вікно ServBay. У зоні Websites натисніть "Додати", щоб створити новий сайт:

   • Name (Назва): ServBay React Dev (будь-яка зручна назва)
   • Domain (Домен): servbay-react-dev.servbay.demo
   • Site Type (Тип сайту): оберіть Reverse Proxy (Реверс-проксі)
   • Proxy IP (IP проксі): 127.0.0.1 (сервер працює локально)
   • Proxy Port (Порт проксі): 8585 (збігається з портом dev-сервера)

   Збережіть налаштування. ServBay автоматично сконфігурує вбудований веб-сервер (Caddy або Nginx) для передачі трафіку з servbay-react-dev.servbay.demo на http://127.0.0.1:8585.

   Докладніше про додавання сайтів у ServBay див. у документації щодо керування сайтами.

3. Відвідайте dev-сайт

   Відкрийте браузер і перейдіть за адресою: https://servbay-react-dev.servbay.demo.

   • Завдяки функціям ServBay ваш локальний сайт отримає автоматичний SSL-сертифікат (Self-signed CA або Public CA), і ви одразу отримаєте доступ через HTTPS. Більше про SSL — у документації по SSL.
   • Тепер, коли ви змінюєте код і зберігаєте його, сторінка в браузері оновиться автоматично — це працює HMR.

Збірка продуктивної версії (Production)

Коли проект готовий до публікації, потрібно зібрати оптимізовану продакшн-версію.

1. Зберіть продакшн-версію в терміналі

   У папці servbay-react-demo виконайте:

   npm run build

   Це запустить скрипт build з package.json. Vite збере ваш код у статичні файли (HTML, CSS, JS, ресурси), які розмістяться у папці dist у корені проєкту. Після завершення збірки отримаєте повідомлення про успіх.

2. Налаштуйте статичний хостинг у ServBay

   Створена папка dist містить повний статичний сайт для продакшн. У ServBay додайте окремий сайт такого типу:

   • Name (Назва): ServBay React Prod
   • Domain (Домен): servbay-react.servbay.demo
   • Site Type (Тип сайту): оберіть Static (Статичний)
   • Website Root Directory (Коренева папка сайту): /Applications/ServBay/www/servbay-react-demo/dist

   Збережіть налаштування — тепер ServBay напряму обслуговує статичні файли з вашої папки dist.

3. Відвідайте продакшн-сайт

   У браузері відкрийте: https://servbay-react.servbay.demo.

   Тепер ви бачите оптимізований продакшн-сайт із React. Так само цей сайт захищений SSL-сертифікатом, автоматично виданим ServBay.

Підсумок

Виконавши ці кроки, ви створили сучасний проект React у локальному середовищі на macOS з допомогою ServBay, налаштували реверс-проксі для зручності розробки та хостинг статичних файлів для продакшн. ServBay значно спрощує повсякденну роботу фронтенд-розробника завдяки вбудованій підтримці Node.js, гнучкому керуванню сайтами (реверс-проксі та статичний хостинг) і автоматичному SSL. Ви можете безпечно продовжувати розробку, тестування й деплой свого React-застосунку у комфортному локальному середовищі.