Parcel template

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

Підготовка нового проекту

Переконайтеся, що на комп'ютері встановлено LTS-версію Node.js. Скачай та встанови її якщо необхідно.
Клонуй цей репозиторій git clone https://github.com/zenya385/parcel-project-template
Зміни ім'я папки з parcel-project-template на ім'я свого проекту.
Створи новий порожній репозиторій на GitHub.
Відкрий проект у VSCode, запусти термінал та зв'яжи проект з GitHub-репозиторієм за інструкцією.
Встанови залежності проекту в терміналі командою npm install.
Запусти режим розробки, виконавши команду npm start.
Перейдіть в браузері за адресою http://localhost:1234. Ця сторінка автоматично перезавантажуватиметься після збереження змін у файли проекту.

Файли та папки

Усі паршали файлів стилів повинні лежати в папці src/sass та імпортуватись у файли стилів сторінок. Наприклад, для index.html файл стилів називається index.scss.
Зображення додай до папки src/images. Складальник оптимізує їх, але тільки при депло продакшн версії проекту. Все це відбувається у хмарі, щоб не навантажувати твій комп'ютер, тому що на слабких машинах це може зайняти багато часу.

Деплой

Для налаштування деплою проекту необхідно виконати кілька додаткових кроків з налаштування твого репозиторію. Зайди у вкладку Settings та в підсекції 'Actions' вибери вибери пункт 'General'.

Прогортай сторінку до останньої секції, в якій переконайся, що вибрані опції як на наступному зображенні та натисніть Save. Без цих налаштувань у збірки буде недостатньо прав для автоматизації процесу деплою.

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

json "homepage": "https://your_username.github.io/your_repo_name/", "scripts": { "build": "parcel build src/*.html --public-url /your_repo_name/" },

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

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

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

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

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

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

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

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

Як це працює

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