Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/innaanatoliivna/frontend-startup
https://github.com/innaanatoliivna/frontend-startup
Last synced: about 9 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/innaanatoliivna/frontend-startup
- Owner: InnaAnatoliivna
- Created: 2024-01-02T16:46:49.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-02T16:52:57.000Z (about 1 year ago)
- Last Synced: 2024-12-30T06:23:38.157Z (about 2 months ago)
- Language: JavaScript
- Homepage: https://innaanatoliivna.github.io/frontend-startup/
- Size: 1.39 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React + Vite template
Цей проєкт було створено за допомогою [Create Vite](https://vitejs.dev/). Для
знайомства і налаштування додаткових можливостей
[звернися до документації](https://vitejs.dev/guide/).## Створення репозиторію за шаблоном
Використовуй цей репозиторій організації 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. Перейди в браузері за адресою, що зазначено в терміналі.## Деплой
Продакшн версія проєкту буде автоматично збиратися і деплоїтися на GitHub Pages,
у гілку `gh-pages`, щоразу, коли оновлюється гілка `main`. Наприклад, після
прямого пушу або прийнятого пул-реквесту. Для цього необхідно у файлі
`vite.config.js` відредагувати поле `base`, замінивши `react_vite` на свою назву
репозиторію `"/your_repo_name"`, і відправити зміни на GitHub.Далі необхідно зайти в налаштування GitHub-репозиторію (`Settings` > `Pages`) і
виставити роздачу продакшн версії файлів із папки `/root` гілки `gh-pages`, якщо
це не було зроблено автоматично.
### Статус деплоя
Статус деплою крайнього коміту відображається іконкою біля його ідентифікатора.
- **Жовтий колір** - виконується збірка і деплой проєкту.
- **Зелений колір** - деплой завершився успішно.
- **Червоний колір** - під час збирання або деплою сталася помилка.Детальнішу інформацію про статус можна подивитися, клікнувши на іконку, і в
випадаючому вікні перейти за посиланням `Details`.
### Жива сторінка
Через якийсь час, зазвичай кілька хвилин, живу сторінку можна буде подивитися за
адресою, вказаною в налаштуваннях GitHub-репозиторію (`Settings` > `Pages`).
Якщо відкривається порожня сторінка, переконайся що у вкладці `Console` немає
помилок пов'язаних із неправильними шляхами до CSS і JS файлів проекту
(**404**). Швидше за все найімовірніше, у тебе неправильне значення поля `base`
у файлі `vite.config.js`.### Маршрутизація
Якщо додаток використовує бібліотеку `react-router-dom` для маршрутизації,
необхідно додатково налаштувати компонент ``, передавши в пропе
`basename` точну назву твого репозиторію. Слеш на початку рядка обов'язковий.```jsx
```
### Додавання змінних в .env
Для зберігання конфігураційних даних, таких як API ключі, адреси серверів, порти та інші змінні використовуйте файл `.env`. Для цього необхідно з назви файлу `.env.template` видалити зайві ".template",після чого файл відповідатиме умовам файлу `.ignore` і буде зберігатися лише локально, не публікуючись на віддаленому репозиторії з метою безпеки. Задля використання змінних на GitHub-pages усі змінні, передбачені файлом .env, слід додати до файлу `.github/workflows/deploy.yml`, а також до налаштувань репозиторію. Для цього слід перейти (`Settings` > `Secrets and variables` > `Actions`)
## Як це працює
1. Після кожного пушу в гілку `main` GitHub-репозиторію, запускається
спеціальний скрипт (GitHub Action) з файлу `.github/workflows/deploy.yml`.
2. Усі файли репозиторію копіюються на сервер, де проєкт ініціалізується і
проходить збірку перед деплоєм. 3 Якщо всі кроки пройшли успішно, зібрана
продакшн-версія файлів проєкту відправляється в гілку `gh-pages`. В іншому
випадку, в логах виконання скрипта буде вказано в чому проблема.