React homework template

Π­Ρ‚ΠΎΡ‚ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π±Ρ‹Π» создан ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Create React App. Для знакомства ΠΈ настройки Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… возмоТностСй ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡΡŒ ΠΊ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ рСпозитория ΠΏΠΎ ΡˆΠ°Π±Π»ΠΎΠ½Ρƒ

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉ этот Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΉ ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ GoIT ΠΊΠ°ΠΊ шаблон для создания рСпозитория своСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Для этого Π½Π°ΠΆΠΌΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Use this templateΒ» ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈ ΠΎΠΏΡ†ΠΈΡŽ Β«Create a new repositoryΒ», ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ.

Creating repo from a template step 1

На ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ шагС откроСтся страница создания Π½ΠΎΠ²ΠΎΠ³ΠΎ рСпозитория. Π—Π°ΠΏΠΎΠ»Π½ΠΈ ΠΏΠΎΠ»Π΅ Π΅Π³ΠΎ ΠΈΠΌΠ΅Π½ΠΈ, ΡƒΠ±Π΅Π΄ΠΈΡΡŒ Ρ‡Ρ‚ΠΎ Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΉ ΠΏΡƒΠ±Π»ΠΈΡ‡Π½Ρ‹ΠΉ, послС Ρ‡Π΅Π³ΠΎ Π½Π°ΠΆΠΌΠΈ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Create repository from templateΒ».

Creating repo from a template step 2

ПослС Ρ‚ΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΉ Π±ΡƒΠ΄Π΅Ρ‚ создан, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π² настройки созданного рСпозитория Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡƒ Settings > Actions > General ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ.

Settings GitHub Actions permissions step 1

ΠŸΡ€ΠΎΡΠΊΡ€ΠΎΠ»ΠΈΠ² страницу Π΄ΠΎ самого ΠΊΠΎΠ½Ρ†Π°, Π² сСкции Β«Workflow permissionsΒ» Π²Ρ‹Π±Π΅Ρ€ΠΈ ΠΎΠΏΡ†ΠΈΡŽ Β«Read and write permissionsΒ» ΠΈ ΠΏΠΎΡΡ‚Π°Π²ΡŒ Π³Π°Π»ΠΎΡ‡ΠΊΡƒ Π² чСкбоксС. Π­Ρ‚ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ для Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΠ·Π°Ρ†ΠΈΠΈ процСсса дСплоя ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

Settings GitHub Actions permissions step 2

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Ρƒ тСбя Π΅ΡΡ‚ΡŒ Π»ΠΈΡ‡Π½Ρ‹ΠΉ Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, со структурой Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΈ ΠΏΠ°ΠΏΠΎΠΊ рСпозитория-шаблона. Π”Π°Π»Π΅Π΅ Ρ€Π°Π±ΠΎΡ‚Π°ΠΉ с Π½ΠΈΠΌ ΠΊΠ°ΠΊ с Π»ΡŽΠ±Ρ‹ΠΌ Π΄Ρ€ΡƒΠ³ΠΈΠΌ Π»ΠΈΡ‡Π½Ρ‹ΠΌ Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠ΅ΠΌ, ΠΊΠ»ΠΎΠ½ΠΈΡ€ΡƒΠΉ Π΅Π³ΠΎ сСбС Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€, пиши ΠΊΠΎΠ΄, Π΄Π΅Π»Π°ΠΉ ΠΊΠΎΠΌΠΌΠΈΡ‚Ρ‹ ΠΈ отправляй ΠΈΡ… Π½Π° GitHub.

ΠŸΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΊΠ° ΠΊ Ρ€Π°Π±ΠΎΡ‚Π΅

  1. УбСдись Ρ‡Ρ‚ΠΎ Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅ установлСна LTS-вСрсия Node.js. Π‘ΠΊΠ°Ρ‡Π°ΠΉ ΠΈ установи Π΅Ρ‘ Ссли Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ.
  2. Установи Π±Π°Π·ΠΎΠ²Ρ‹Π΅ зависимости ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ npm install.
  3. Запусти Ρ€Π΅ΠΆΠΈΠΌ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΠ² ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ npm start.
  4. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΠΏΠΎ адрСсу http://localhost:3000. Π­Ρ‚Π° страница Π±ΡƒΠ΄Π΅Ρ‚ автоматичСски ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒΡΡ послС сохранСния ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² Ρ„Π°ΠΉΠ»Π°Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

Π”Π΅ΠΏΠ»ΠΎΠΉ

ΠŸΡ€ΠΎΠ΄Π°ΠΊΡˆΠ½ вСрсия ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π±ΡƒΠ΄Π΅Ρ‚ автоматичСски ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π»ΠΈΠ½Ρ‚ΠΈΠ½Π³, ΡΠΎΠ±ΠΈΡ€Π°Ρ‚ΡŒΡΡ ΠΈ Π΄Π΅ΠΏΠ»ΠΎΠΈΡ‚ΡŒΡΡ Π½Π° GitHub Pages, Π² Π²Π΅Ρ‚ΠΊΡƒ gh-pages, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π· ΠΊΠΎΠ³Π΄Π° обновляСтся Π²Π΅Ρ‚ΠΊΠ° main. НапримСр, послС прямого ΠΏΡƒΡˆΠ° ΠΈΠ»ΠΈ принятого ΠΏΡƒΠ»-рСквСста. Для этого Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π² Ρ„Π°ΠΉΠ»Π΅ package.json ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»Π΅ homepage, Π·Π°ΠΌΠ΅Π½ΠΈΠ² your_username ΠΈ your_repo_name Π½Π° свои, ΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ измСнСния Π½Π° GitHub.

"homepage": "https://your_username.github.io/your_repo_name/"

Π”Π°Π»Π΅Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°ΠΉΡ‚ΠΈ Π² настройки GitHub-рСпозитория (Settings > Pages) ΠΈ Π²Ρ‹ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ€Π°Π·Π΄Π°Ρ‡Ρƒ ΠΏΡ€ΠΎΠ΄Π°ΠΊΡˆΠ½ вСрсии Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΈΠ· ΠΏΠ°ΠΏΠΊΠΈ /root Π²Π΅Ρ‚ΠΊΠΈ gh-pages, Ссли это Π½Π΅Π±Ρ‹Π»ΠΎ сдСлано автоматичСски.

GitHub Pages settings

Бтатус дСплоя

Бтатус дСплоя ΠΊΡ€Π°ΠΉΠ½Π΅Π³ΠΎ ΠΊΠΎΠΌΠΌΠΈΡ‚Π° отобраТаСтся ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ Π²ΠΎΠ·Π»Π΅ Π΅Π³ΠΎ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π°.

  • Π–Π΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ - выполняСтся сборка ΠΈ Π΄Π΅ΠΏΠ»ΠΎΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.
  • Π—Π΅Π»Π΅Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ - Π΄Π΅ΠΏΠ»ΠΎΠΉ Π·Π°Π²Π΅Ρ€ΡˆΠΈΠ»ΡΡ ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎ.
  • ΠšΡ€Π°ΡΠ½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ - Π²ΠΎ врСмя Π»ΠΈΠ½Ρ‚ΠΈΠ½Π³Π°, сборки ΠΈΠ»ΠΈ дСплоя ΠΏΡ€ΠΎΠΈΠ·ΠΎΡˆΠ»Π° ошибка.

Π‘ΠΎΠ»Π΅Π΅ Π΄Π΅Ρ‚Π°Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ статусС ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ»ΠΈΠΊΠ½ΡƒΠ² ΠΏΠΎ ΠΈΠΊΠΎΠ½ΠΊΠ΅, ΠΈ Π² Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅ΠΌ ΠΎΠΊΠ½Π΅ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΏΠΎ ссылкС Details.

Deployment status

Живая страница

Π§Π΅Ρ€Π΅Π· ΠΊΠ°ΠΊΠΎΠ΅-Ρ‚ΠΎ врСмя, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΏΠ°Ρ€Ρƒ ΠΌΠΈΠ½ΡƒΡ‚, ΠΆΠΈΠ²ΡƒΡŽ страницу ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΏΠΎ адрСсу ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌΡƒ Π² ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΌ свойствС homepage. НапримСр, Π²ΠΎΡ‚ ссылка Π½Π° ΠΆΠΈΠ²ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ для этого рСпозитория https://goitacademy.github.io/react-homework-template.

Если открываСтся пустая страница, ΡƒΠ±Π΅Π΄ΠΈΡΡŒ Ρ‡Ρ‚ΠΎ Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Console Π½Π΅Ρ‚ ошибок связанных с Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΌΠΈ путями ΠΊ CSS ΠΈ JS Ρ„Π°ΠΉΠ»Π°ΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° (404). Π‘ΠΊΠΎΡ€Π΅Π΅ всСго Ρƒ тСбя Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства homepage Π² Ρ„Π°ΠΉΠ»Π΅ package.json.

ΠœΠ°Ρ€ΡˆΡ€ΡƒΡ‚ΠΈΠ·Π°Ρ†ΠΈΡ

Если ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ react-router-dom для ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚ΠΈΠ·Π°Ρ†ΠΈΠΈ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ <BrowserRouter>, ΠΏΠ΅Ρ€Π΅Π΄Π°Π² Π² ΠΏΡ€ΠΎΠΏΠ΅ basename Ρ‚ΠΎΡ‡Π½ΠΎΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Ρ‚Π²ΠΎΠ΅Π³ΠΎ рСпозитория. БлСш Π² Π½Π°Ρ‡Π°Π»Π΅ строки обязатСлСн.

<BrowserRouter basename="/your_repo_name">
  <App />
</BrowserRouter>

Как это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚

How it works

  1. ПослС ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΡƒΡˆΠ° Π² Π²Π΅Ρ‚ΠΊΡƒ main GitHub-рСпозитория, запускаСтся ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ скрипт (GitHub Action) ΠΈΠ· Ρ„Π°ΠΉΠ»Π° .github/workflows/deploy.yml.
  2. ВсС Ρ„Π°ΠΉΠ»Ρ‹ рСпозитория ΠΊΠΎΠΏΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π½Π° сСрвСр, Π³Π΄Π΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ инициализируСтся ΠΈ ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π»ΠΈΠ½Ρ‚ΠΈΠ½Π³ ΠΈ сборку ΠΏΠ΅Ρ€Π΅Π΄ Π΄Π΅ΠΏΠ»ΠΎΠ΅ΠΌ.
  3. Если всС шаги ΠΏΡ€ΠΎΡˆΠ»ΠΈ ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎ, собранная ΠΏΡ€ΠΎΠ΄Π°ΠΊΡˆΠ½ вСрсия Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° отправляСтся Π² Π²Π΅Ρ‚ΠΊΡƒ gh-pages. Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС, Π² Π»ΠΎΠ³Π΅ выполнСния скрипта Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠΊΠ°Π·Π°Π½ΠΎ Π² Ρ‡Π΅ΠΌ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°.