React template

Цей проект був створений за допомогою Create React App. Для знайомства і налаштування додаткових можливостей звернися до документації.

Підготовка до роботи

1. Переконайся що на комп'ютері встановлено LTS-версія Node.js. Завантаж і встанови її якщо необхідно.
2. Встанови базові залежності проєкту командою npm install.
3. Запусти режим розробки, виконавши команду npm start.
4. Перейди в браузері за адресою http://localhost:3000. Ця сторінка буде автоматично перезавантажуватися після збереження змін у файлах проєкту.

Деплой

Продакшн версія проєкту буде автоматично проходити лінтинг, збиратися і деплоїтися на GitHub Pages, у гілку gh-pages, щоразу, коли оновлюється гілка main. Наприклад, після прямого пушу або прийнятого пул-реквесту. Для цього необхідно у файлі package.json відредагувати поле homepage, замінивши your_username і your_repo_name на свої, і відправити зміни на GitHub.

"homepage": "https://your_username.github.io/your_repo_name/"

Далі необхідно зайти в налаштування GitHub-репозиторію (Settings > Pages) і виставити роздачу продакшн-версії файлів із папки /root гілки gh-pages, якщо це не було зроблено автоматично.

Статус деплоя

Статус деплою крайнього коміту відображається іконкою біля його ідентифікатора.

• Жовтий колір - виконується збірка і деплой проєкту.
• Зелений колір - деплой завершився успішно.
• Червоний колір - під час лінтингу, сборки або деплою сталася помилка.

Детальнішу інформацію про статус можна подивитися, клікнувши на іконку, і у вікні, що випадає, перейти за посиланням Details.

Жива сторінка

Через якийсь час, зазвичай кілька хвилин, живу сторінку можна буде подивитися за адресою, вказаною у відредагованій властивості homepage. Наприклад, ось посилання на живу версію для цього репозиторію https://goitacademy.github.io/react-homework-template.

Якщо відкривається порожня сторінка, переконайся, що у вкладці Console немає помилок пов'язаних із неправильними шляхами до CSS і JS файлів проєкту (404). Швидше за все у тебе неправильне значення властивості homepage у файлі package.json.

Маршрутизація

Якщо додаток використовує бібліотеку react-router-dom для маршрутизації, необхідно додатково налаштувати компонент <BrowserRouter>, передавши у пропе basename точну назву твого репозиторію. Слеш на початку рядка обов'язковий.

<BrowserRouter basename="/your_repo_name">
  <App />
</BrowserRouter>

Як це працює

1. Після кожного пушу в гілку main GitHub-репозиторія, запускається спеціальний скрипт (GitHub Action) з файла .github/workflows/deploy.yml.
2. Усі файли репозиторію копіюються на сервер, де проект ініціалізується і проходить лінтинг і збірку перед деплоєм.
3. Якщо всі кроки пройшли успішно, зібрана продакшн-версія файлів проєкту відправляється в гілку gh-pages. В іншому випадку, в лозі виконання скрипта буде вказано в чому проблема.