-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6e3f592
commit 946324d
Showing
1 changed file
with
33 additions
and
95 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,113 +1,51 @@ | ||
| # React homework template | ||
| This project was made by Create React App for educational purposes. For dating | ||
| and setting additional features | ||
| [refer to documentation](https://create-react-app.dev/). | ||
|
|
||
| Этот проект был создан при помощи | ||
| [Create React App](https://github.com/facebook/create-react-app). Для знакомства | ||
| и настройки дополнительных возможностей | ||
| [обратись к документации](https://facebook.github.io/create-react-app/docs/getting-started). | ||
| ## Project Description | ||
|
|
||
| ## Создание репозитория по шаблону | ||
| This React App is a single-page web application with authorization for storing contacts, | ||
| where you can add, filter and remove information. | ||
| The app implements features such as routing, auth, working with state, | ||
| storing and changing data. | ||
|
|
||
| Используй этот репозиторий организации GoIT как шаблон для создания репозитория | ||
| своего проекта. Для этого нажми на кнопку `«Use this template»` и выбери опцию | ||
| `«Create a new repository»`, как показано на изображении. | ||
| ## Features | ||
|
|
||
|  | ||
| - Authorization. | ||
|
|
||
| На следующем шаге откроется страница создания нового репозитория. Заполни поле | ||
| его имени, убедись что репозиторий публичный, после чего нажми кнопку | ||
| `«Create repository from template»`. | ||
| - Contacts adding and removing. | ||
|
|
||
|  | ||
| - Data filtering. | ||
|
|
||
| После того как репозиторий будет создан, необходимо перейти в настройки | ||
| созданного репозитория на вкладку `Settings` > `Actions` > `General` как | ||
| показано на изображении. | ||
| ## Getting Started | ||
|
|
||
|  | ||
| Follow these instructions to get the project up and running on your local | ||
| machine. | ||
|
|
||
| Проскролив страницу до самого конца, в секции `«Workflow permissions»` выбери | ||
| опцию `«Read and write permissions»` и поставь галочку в чекбоксе. Это | ||
| необходимо для автоматизации процесса деплоя проекта. | ||
| ### Basic | ||
|
|
||
|  | ||
| Before running the app, you need to have Node.js and npm installed on your | ||
| machine. | ||
| [You can download them from the official Node.js website here](https://nodejs.org/en/download). | ||
|
|
||
| Теперь у тебя есть личный репозиторий проекта, со структурой файлов и папок | ||
| репозитория-шаблона. Далее работай с ним как с любым другим личным репозиторием, | ||
| клонируй его себе на компьютер, пиши код, делай коммиты и отправляй их на | ||
| GitHub. | ||
| ### Installing | ||
|
|
||
| ## Подготовка к работе | ||
| 1. Clone the repository to your local machine. | ||
| 2. Open a terminal window and navigate to the project directory. | ||
| 3. Run npm install to install the project dependencies. | ||
| 4. Running In the project directory, run npm start. | ||
| 5. Open http://localhost:3000 in your browser to view the app. | ||
|
|
||
| 1. Убедись что на компьютере установлена LTS-версия Node.js. | ||
| [Скачай и установи](https://nodejs.org/en/) её если необходимо. | ||
| 2. Установи базовые зависимости проекта командой `npm install`. | ||
| 3. Запусти режим разработки, выполнив команду `npm start`. | ||
| 4. Перейди в браузере по адресу [http://localhost:3000](http://localhost:3000). | ||
| Эта страница будет автоматически перезагружаться после сохранения изменений в | ||
| файлах проекта. | ||
| ## Usage | ||
|
|
||
| ## Деплой | ||
| First, the user must register, and then log in. The main functionality of the app takes place on the Contacts page, | ||
| where the user can add, delete and filter contacts. | ||
|
|
||
| Продакшн версия проекта будет автоматически проходить линтинг, собираться и | ||
| деплоиться на GitHub Pages, в ветку `gh-pages`, каждый раз когда обновляется | ||
| ветка `main`. Например, после прямого пуша или принятого пул-реквеста. Для этого | ||
| необходимо в файле `package.json` отредактировать поле `homepage`, заменив | ||
| `your_username` и `your_repo_name` на свои, и отправить изменения на GitHub. | ||
| ## Contributing | ||
|
|
||
| ```json | ||
| "homepage": "https://your_username.github.io/your_repo_name/" | ||
| ``` | ||
| To contribute to the project, create a pull request and wait for the project | ||
| owner to review it. | ||
|
|
||
| Далее необходимо зайти в настройки GitHub-репозитория (`Settings` > `Pages`) и | ||
| выставить раздачу продакшн версии файлов из папки `/root` ветки `gh-pages`, если | ||
| это небыло сделано автоматически. | ||
| ## Author | ||
|
|
||
|  | ||
|
|
||
| ### Статус деплоя | ||
|
|
||
| Статус деплоя крайнего коммита отображается иконкой возле его идентификатора. | ||
|
|
||
| - **Желтый цвет** - выполняется сборка и деплой проекта. | ||
| - **Зеленый цвет** - деплой завершился успешно. | ||
| - **Красный цвет** - во время линтинга, сборки или деплоя произошла ошибка. | ||
|
|
||
| Более детальную информацию о статусе можно посмотреть кликнув по иконке, и в | ||
| выпадающем окне перейти по ссылке `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` для маршрутизации, | ||
| необходимо дополнительно настроить компонент `<BrowserRouter>`, передав в пропе | ||
| `basename` точное название твоего репозитория. Слеш в начале строки обязателен. | ||
|
|
||
| ```jsx | ||
| <BrowserRouter basename="/your_repo_name"> | ||
| <App /> | ||
| </BrowserRouter> | ||
| ``` | ||
|
|
||
| ## Как это работает | ||
|
|
||
|  | ||
|
|
||
| 1. После каждого пуша в ветку `main` GitHub-репозитория, запускается специальный | ||
| скрипт (GitHub Action) из файла `.github/workflows/deploy.yml`. | ||
| 2. Все файлы репозитория копируются на сервер, где проект инициализируется и | ||
| проходит линтинг и сборку перед деплоем. | ||
| 3. Если все шаги прошли успешно, собранная продакшн версия файлов проекта | ||
| отправляется в ветку `gh-pages`. В противном случае, в логе выполнения | ||
| скрипта будет указано в чем проблема. | ||
| Ihor Leonov. |