Развертывание приложения create-response-app с маршрутизацией на страницы GitHub

Резюме

В этой статье мы развернем create-react-app (с маршрутизацией) на действующий URL-адрес, размещенный на страницах GitHub, мы настроим приложение так, чтобы оно служило из подпапки, а наша маршрутизация работала должным образом. Некоторые предварительные условия перед тем, как мы начнем;

• Аккаунт GitHub
• Узел ≥ 6 нм ≥ 5,2

Примечание. Пожалуйста, замените мое имя пользователя GitHub 8eni своим собственным на протяжении всей статьи.

Мы добьемся своей цели за 3 простых шага:

1. Создайте репозиторий GitHub и добавьте create-react-app приложение (перейдите к шагу 2, если у вас уже есть)
2. Добавьте маршрутизацию в наше приложение
3. Добавить страницы GitHub и развернуть приложение

Прежде чем мы углубимся, давайте разберемся, что такое GitHub Pages.

Веб-сайты для вас и ваших проектов, размещенные непосредственно в вашем репозитории GitHub. Просто отредактируйте, нажмите, и ваши изменения будут опубликованы.

Создайте репозиторий GitHub и добавьте приложение React

Перейдите в свою учетную запись GitHub и создайте новый репозиторий. Я назвал свое приложение my-react-app.

Клонируйте наш репозиторий локально и запустите create-react-app из того же каталога, который вы также клонировали.

$: git clone https://github.com/8eni/my-react-app.git
$: npx create-react-app my-react-app

Примечание. npx - это средство запуска пакетов, входящее в состав npm 5.2+.

Добавьте маршрутизацию в наше приложение

Для маршрутизации воспользуемся пакетом react-router-dom. Перейдите в наш новый каталог и установите пакет

$: cd my-react-app
$: npm install react-router-dom

Затем импортируйте HashRouter, Route и Link из react-router-dom в наше приложение. Важно отметить, что мы используем здесь HashRouter, так как без его обновления при обновлении браузера мы получили бы 404 на нашем текущем URL-адресе страниц GitHub.

// App.js
import React, { Component } from 'react';
import { HashRouter, Route, Link } from "react-router-dom";

Затем замените метод render() в App.js следующим.

// App.js
render() {
 return (
  <HashRouter basename='/'>
   <div>
    <ul>
     <li><Link to="/">Home</Link></li>
     <li><Link to="/about">About</Link></li>
    </ul>
    <hr />
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
   </div>
  </HashRouter>
 );
}

Поскольку мы будем обслуживать приложение из подкаталога /my-react-app на нашем URL-адресе страниц GitHub, мы захотим добавить свойство basename в наш <HashRouter>. Это будет нашим базовым URL для всех наших маршрутов.

Затем мы добавим несколько видов для наших маршрутов. Добавьте следующие функции в App.js непосредственно перед экспортом компонента.

// App.js
...
const Home = () => <div><h2>Home</h2></div>
const About = () => <div><h2>About</h2></div>
export default App;

Теперь наш файл App.js должен выглядеть следующим образом:

Это все, что нам нужно для работающего приложения React с маршрутизацией. Обслуживайте приложение локально через npm start и убедитесь, что маршрутизация работает должным образом.

Добавление страниц GitHub и развертывание приложения

Для этого нам потребуется установить пакет gh-pages.

$: npm install gh-pages

Прежде чем мы создадим наше приложение для развертывания, нам нужно добавить свойство homepage в наш package.json файл. Это устанавливает базовый URL-адрес для всех наших маршрутов, а также позволяет GitHub Pages знать, где их развернуть. Нам также необходимо обновить свойство scripts, чтобы мы могли запускать deploy из командной строки.

// package.json
{
  "name": "my-react-app",
  "homepage": "https://8eni.github.com/my-react-app"
   ....
  "scripts": {
     ...
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
     ...
}

Сценарий predeploy запускается после того, как мы запускаем наш deploy сценарий, он объединяет наше приложение для развертывания. Развернем наше приложение на страницах GitHub;

$: npm run deploy

Если наша сборка и развертывание прошли успешно, вы должны увидеть Published в последней строке вашего терминала, а если вы перейдете в свой репозиторий на GitHub и увидите новую созданную ветку с именем gh-pages.

На вкладках настроек вашего репозитория вы также должны увидеть подтверждение развертывания на ваш новый URL

Перейдя по нашему URL-адресу, мы должны увидеть наше приложение в действии «https://8eni.github.io/my-react-ap Факp.

Примечание. Вы можете увидеть страницу с ошибкой 404 при просмотре URL-адреса после успешного развертывания / публикации. Это нормально, дайте ему 30–60 секунд, обновите браузер, и ваше приложение должно присутствовать.

Заключение

Мы успешно развернули приложение create-response-app с маршрутизацией на действующий URL-адрес на страницах GitHub. Используя HashRouter react-router-dom, нам не нужно беспокоиться об ошибке 404 при обновлении страницы. Поскольку мы размещаем приложение в подкаталоге, это означает, что мы можем развернуть несколько приложений в разных подкаталогах на нашем URL-адресе страниц GitHub.

Надеюсь, вам понравилась эта статья. Если у вас есть предложения по улучшению, связанные с содержанием этой статьи или вопросы, пожалуйста, оставьте их в комментариях.