https://github.com/ynazymko12/goit-advancedjs-hw-01
Homework for the course JavaScript📒 ---NPM / Vite / JSON / Web storage---
https://github.com/ynazymko12/goit-advancedjs-hw-01
css3 goit goit-advancedjs-hw-01 html5 javascript json npm vite webstorage
Last synced: about 1 month ago
JSON representation
Homework for the course JavaScript📒 ---NPM / Vite / JSON / Web storage---
- Host: GitHub
- URL: https://github.com/ynazymko12/goit-advancedjs-hw-01
- Owner: YNazymko12
- Created: 2023-11-03T12:18:04.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-05T10:50:18.000Z (over 1 year ago)
- Last Synced: 2025-02-05T12:53:50.453Z (3 months ago)
- Topics: css3, goit, goit-advancedjs-hw-01, html5, javascript, json, npm, vite, webstorage
- Language: JavaScript
- Homepage: https://ynazymko12.github.io/goit-advancedjs-hw-01/
- Size: 1.93 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vanilla App Template
Цей проект було створено за допомогою Vite. Для знайомства та налаштування
додаткових можливостей [звернись до документації](https://vitejs.dev/).
## Створення репозиторію за шаблоном
Використовуй цей репозиторій організації GoIT як шаблон для створення
репозиторію свого проекту. Для цього натисни на кнопку `«Use this template»` і
обери опцію `«Create a new repository»`, як показано на зображенні.
На наступному етапі відкриється сторінка створення нового репозиторію. Заповни
поле його імені, переконайся, що репозиторій публічний, після чого натисни
кнопку `«Create repository from template»`.
Після того, як репозиторій буде створено, необхідно перейти в налаштування
створеного репозиторію на вкладку `Settings` > `Actions` > `General` як показано
на зображенні.
Проскроливши сторінку до самого кінця, в секції `«Workflow permissions»` обери
опцію `«Read and write permissions»` і постав галочку в чекбоксі. Це необхідно
для автоматизації процесу деплою проекту.
Тепер у тебе є особистий репозиторій проекту, зі структурою файлів та папок
репозиторію-шаблону. Далі працюй з ним, як з будь-яким іншим особистим
репозиторієм, клонуй його собі на комп'ютер, пиши код, роби коміти та відправляй
їх на GitHub.
## Підготовка до роботи
1. Переконайся, що на комп'ютері встановлено LTS-версію Node.js.
[Скачай та встанови](https://nodejs.org/en/) її якщо необхідно.
2. Встанови базові залежності проекту в терміналі командою `npm install`.
3. Запусти режим розробки, виконавши в терміналі команду `npm run dev`.
4. Перейдіть у браузері за адресою
[http://localhost:5173](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=//`, для команди `build`,
замінивши `` на назву свого репозиторію, та відправити зміни на GitHub.
```json
"build": "vite build --base=//",
```
Далі необхідно зайти в налаштування GitHub-репозиторію (`Settings` > `Pages`) та
виставити роздачу продакшн версії файлів з папки `/root` гілки `gh-pages`, якщо
це не було зроблено автоматично.
### Статус деплою
Статус деплою крайнього коміту відображається іконкою біля його ідентифікатора.
- **Жовтий колір** - виконується збірка та деплой проекту.
- **Зелений колір** - деплой завершився успішно.
- **Червоний колір** - під час лінтингу, збірки чи деплою сталася помилка.
Більш детальну інформацію про статус можна переглянути натиснувши на іконку, і в
вікні, що випадає, перейти за посиланням `Details`.
### Жива сторінка
Через якийсь час, зазвичай кілька хвилин, живу сторінку можна буде подивитися за
адресою, вказаною на вкладці `Settings` > `Pages` в налаштуваннях репозиторію.
Наприклад, ось посилання на живу версію для цього репозиторію
[https://goitacademy.github.io/vanilla-app-template/](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`. В іншому випадку, у лозі виконання скрипта
буде вказано в чому проблема.