Налаштування фронтенд-розробки

Ця сторінка описує кроки, необхідні для початку фронтенд-розробки.

Попередні вимоги

Рекомендоване налаштування розробки використовує Visual Studio Code з devcontainers. Цей підхід створить попередньо налаштоване середовище розробки з усіма необхідними інструментами.

Дивіться Налаштування бекенд-розробки для необхідних попередніх вимог.

Як почати

1. Відкрийте репозиторій Gramps Web frontend і натисніть "fork"
2. Клонуйте свій форкнутий репозиторій на свій локальний комп'ютер за допомогою Git
3. Відкрийте клонований репозиторій у Visual Studio Code. Коли з'явиться запит, виберіть "Reopen in Container" або вручну відкрийте палітру команд (Ctrl+Shift+P або Cmd+Shift+P) і виберіть "Dev Containers: Rebuild and Reopen in Container".
4. Зачекайте, поки dev-контейнер побудується та запуститься. Це може зайняти кілька хвилин, особливо вперше.

Запуск сервера фронтенд-розробки

Щоб запустити сервер фронтенд-розробки та переглянути вплив ваших змін у браузері, ви можете використовувати заздалегідь визначені завдання в dev-контейнері.

Для цього спочатку потрібно запустити екземпляр бекенду Gramps Web API. Найпростіший спосіб зробити це - використати dev-контейнер бекенду та запустити завдання "Serve Web API" в окремому вікні VS Code.

Коли бекенд запущений, ви можете запустити сервер фронтенд-розробки, вибравши "Tasks: Run Task" з палітри команд (Ctrl+Shift+P або Cmd+Shift+P), а потім вибравши "Serve Gramps Web frontend".

Це запустить сервер фронтенд-розробки на порту 8001, до якого ви можете отримати доступ у браузері за адресою http://localhost:8001. Браузер автоматично перезавантажиться, коли ви внесете зміни у фронтенд-код, що дозволить вам відразу побачити вплив ваших змін.