https://github.com/valery-chumak/goit-react-hw-03-phonebook
Phonebook with localstorage
https://github.com/valery-chumak/goit-react-hw-03-phonebook
Last synced: 3 months ago
JSON representation
Phonebook with localstorage
- Host: GitHub
- URL: https://github.com/valery-chumak/goit-react-hw-03-phonebook
- Owner: valery-chumak
- Created: 2022-09-22T13:52:47.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-09-22T14:12:17.000Z (over 2 years ago)
- Last Synced: 2025-01-11T18:47:32.616Z (4 months ago)
- Language: JavaScript
- Homepage: https://valery-chumak.github.io/goit-react-hw-03-phonebook/
- Size: 2.19 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.en.md
Awesome Lists containing this project
README
# React homework template
Этот проект был создан при помощи
[Create React App](https://github.com/facebook/create-react-app). Для знакомства
и настройки дополнительных возможностей
[обратись к документации](https://facebook.github.io/create-react-app/docs/getting-started).
## Подготовка нового проекта
1. Убедись что на компьютере установлена LTS-версия Node.js.
[Скачай и установи](https://nodejs.org/en/) её если необходимо.
2. Клонируй этот репозиторий.
3. Измени имя папки с `react-homework-template` на имя своего проекта.
4. Создай новый пустой репозиторий на GitHub.
5. Открой проект в VSCode, запусти терминал и свяжи проект с GitHub-репозиторием
[по инструкции](https://docs.github.com/en/get-started/getting-started-with-git/managing-remote-repositories#changing-a-remote-repositorys-url).
6. Установи базовые зависимости проекта командой `npm install`.
7. Запусти режим разработки, выполнив команду `npm start`.
8. Перейди в браузере по адресу [http://localhost:3000](http://localhost:3000).
Эта страница будет автоматически перезагружаться после сохранения изменений в
файлах проекта.
## Деплой
Продакшн версия проекта будет автоматически проходить линтинг, собираться и
деплоиться на GitHub Pages, в ветку `gh-pages`, каждый раз когда обновляется
ветка `main`. Например, после прямого пуша или принятого пул-реквеста. Для этого
необходимо в файле `package.json` отредактировать поле `homepage`, заменив
`your_username` и `your_repo_name` на свои, и отправить изменения на GitHub.
```json
"homepage": "https://your_username.github.io/your_repo_name/"
```
Далее необходимо зайти в настройки GitHub-репозитория (`Settings` > `Pages`) и
выставить раздачу продакшн версии файлов из папки `/root` ветки `gh-pages`, если
это небыло сделано автоматически.
### Статус деплоя
Статус деплоя крайнего коммита отображается иконкой возле его идентификатора.
- **Желтый цвет** - выполняется сборка и деплой проекта.
- **Зеленый цвет** - деплой завершился успешно.
- **Красный цвет** - во время линтинга, сборки или деплоя произошла ошибка.
Более детальную информацию о статусе можно посмотреть кликнув по иконке, и в
выпадающем окне перейти по ссылке `Details`.
### Живая страница
Через какое-то время, обычно пару минут, живую страницу можно будет посмотреть
по адресу указанному в отредактированном свойстве `homepage`. Например, вот
ссылка на живую версию для этого репозитория
[https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template).
Если открывается пустая страница, убедись что во вкладке `Console` нет ошибок
связанных с неправильными путями к CSS и JS файлам проекта (**404**). Скорее
всего у тебя неправильное значение свойства `homepage` в файле `package.json`.
### Маршрутизация
Если приложение использует библиотеку `react-router-dom` для маршрутизации,
необходимо дополнительно настроить компонент ``, передав в пропе
`basename` точное название твоего репозитория. Слеши в начале и конце строки
обязательны.
```jsx
```
## Как это работает
1. После каждого пуша в ветку `main` GitHub-репозитория, запускается специальный
скрипт (GitHub Action) из файла `.github/workflows/deploy.yml`.
2. Все файлы репозитория копируются на сервер, где проект инициализируется и
проходит линтинг и сборку перед деплоем.
3. Если все шаги прошли успешно, собранная продакшн версия файлов проекта
отправляется в ветку `gh-pages`. В противном случае, в логе выполнения
скрипта будет указано в чем проблема.