GitHub — популярная платформа для размещения и обмена репозиториями кода. В этом руководстве мы рассмотрим, как развернуть приложение React на GitHub с помощью GitHub Pages.

Вот краткое изложение шагов, которые мы рассмотрим:

  1. Создайте новый репозиторий на GitHub и инициализируйте его файлом README.
  2. Перейдите в корневой каталог вашего приложения React в терминале.
  3. При необходимости создайте файл package.json, запустив npm init.
  4. Установите пакет gh-pages, запустив npm install --save gh-pages.
  5. Добавьте необходимые сценарии в файл package.json.
  6. Замените «my-app» в поле homepage вашего файла package.json на имя вашего репозитория.
  7. Зафиксируйте свой код и отправьте его в репозиторий GitHub.
  8. Запустите npm run deploy, чтобы развернуть приложение на страницах GitHub.

Давайте углубимся в детали каждого шага.

1. Создайте новый репозиторий на GitHub

Для начала войдите в свою учетную запись GitHub и создайте новый репозиторий. Дайте вашему репозиторию имя и инициализируйте его файлом README.

2. Перейдите в корневой каталог вашего приложения React.

Затем откройте терминал и перейдите в корневой каталог вашего приложения React. Здесь находится файл package.json.

3. Создайте файл package.json (при необходимости)

Если в вашем приложении React нет файла package.json, вы можете создать его, выполнив следующую команду в своем терминале:

npm init

Вам будет предложено ввести некоторую информацию о вашем проекте, такую ​​как имя и версия. Вы можете нажать Enter, чтобы принять значения по умолчанию для большинства этих полей.

4. Установите пакет gh-pages

Чтобы развернуть ваше приложение React на страницах GitHub, нам понадобится пакет gh-pages. Вы можете установить этот пакет, выполнив следующую команду в своем терминале:

npm install --save gh-pages

Это добавит пакет gh-pages в зависимости вашего проекта в файле package.json.

5. Добавьте необходимые скрипты в файл package.json

Чтобы упростить развертывание приложения, вы можете добавить следующие сценарии в файл package.json:

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build",
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

Эти сценарии позволяют развернуть приложение, выполнив команду npm run deploy. Сценарий predeploy запускает сценарий build, который создает готовую к работе версию вашего приложения в каталоге build. Затем сценарий deploy использует пакет gh-pages для развертывания содержимого каталога build на страницах GitHub.

6. Обновите поле homepage в файле package.json.

Затем вам нужно обновить поле homepage в файле package.json, чтобы оно соответствовало URL-адресу вашего сайта GitHub Pages. Замените «мое приложение»

"homepage": "https://{your_username}.github.io/{your_repository_name}"

Это сообщает сценарию сборки, где найти развернутое приложение.

7. Зафиксируйте свой код и отправьте его в свой репозиторий GitHub

Прежде чем вы сможете развернуть свое приложение, вам необходимо зафиксировать свой код и отправить его в свой репозиторий GitHub. Вы можете сделать это, выполнив следующие команды в своем терминале:

git add .
git commit -m "Initial commit"
git push origin master

8. Разверните свое приложение на страницах GitHub

Наконец, чтобы развернуть приложение на страницах GitHub, выполните в терминале следующую команду:

npm run deploy

Это запустит сценарии predeploy и deploy, которые мы ранее добавили в файл package.json. Когда развертывание будет завершено, вы должны увидеть сообщение о том, что ваше приложение опубликовано.

Теперь ваше приложение React должно быть доступно по адресу https://{your_username}.github.io/{your_repository_name}.

Вот и все! Вы успешно развернули свое приложение React на GitHub. Всего за несколько простых шагов вы можете поделиться своим приложением со всем миром и продолжать вносить обновления по мере его дальнейшей разработки.