Vanilla App Template

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

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

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

Файли і папки

• Файли розмітки компонентів сторінки повинні лежати в папці src/partials та імпортуватись до файлу index.html. Наприклад, файл з розміткою хедера header.html створюємо у папці partials та імпортуємо в index.html.
• Файли стилів повинні лежати в папці src/css та імпортуватись до HTML-файлів сторінок. Наприклад, для index.html файл стилів називається index.css.
• Зображення додавай до папки src/img. Збирач оптимізує їх, але тільки при деплої продакшн версії проекту. Все це відбувається у хмарі, щоб не навантажувати твій комп'ютер, тому що на слабких компʼютерах це може зайняти багато часу.

Деплой

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

"build": "vite build --base=/<REPO>/",

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

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

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

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

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

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

Через якийсь час, зазвичай кілька хвилин, живу сторінку можна буде подивитися за адресою, вказаною на вкладці Settings > Pages в налаштуваннях репозиторію. Наприклад, ось посилання на живу версію для цього репозиторію

https://goitacademy.github.io/vanilla-app-template/.

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

Як це працює

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