Как бесплатно развернуть приложение React с помощью страниц GitHub

Узнайте, как развернуть перенаправленное приложение React на страницах GitHub, выполнив несколько простых шагов.

Если у вас есть проект и вы хотите разместить его бесплатно, не покупая домен, использование GitHub Pages — отличный выбор. GitHub Pages преобразует ваши репозитории в веб-сайты и позволяет размещать неограниченное количество сайтов проектов.

Развертывание сайта React с навигацией требует дополнительной настройки по сравнению с развертыванием статического сайта. В этом руководстве вы пройдете весь процесс от создания репозитория GitHub до размещения размещенного сайта.

Создайте приложение React

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

В терминале запустите команду create-react-app, чтобы быстро создать проект React:

npx create-react-app react-gh

Перейдите в созданную папку и запустите приложение.

npm run start

Затем откройте папку проекта с помощью предпочитаемого вами редактора кода. В папке src удалите все, кроме App.js и index.js. Замените содержимое App.js следующим:

function App() {
  return (
    <div>
     <h2>Github Pages</h2>
     <h3>Deploying React to Github</h3>
    </div>
  );
}
export default App;

Добавить маршрутизацию

Чтобы добавить маршрутизацию в ваше приложение, сначала установите react-router-dom:

npm install react-router-dom

В App.js добавьте ссылку на страницу «О программе»:

import { Link } from "react-router-dom";
function App() {
  return (
    <div>
      <Link to="/about">About</Link>
     <h2>Github Pages</h2>
     <h3>Deploying React to Github</h3>
    </div>
  );
}
export default App;

Поскольку App.js будет выступать в качестве домашней страницы, вам нужно всего лишь создать компонент О программе:

const About = () => {
    return ( 
        <div>
          <Link to="/">Home</Link>
          <h2>About Page</h2> 
        </div>
        );
}
export default About;

Теперь вам нужно создать маршруты и настроить маршрутизатор React.

Измените index.js, чтобы URL-адрес соответствовал соответствующим компонентам:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { HashRouter, Routes, Route } from "react-router-dom";
import About from "./About";
ReactDOM.render(
  <React.StrictMode>
    <HashRouter>
      <Routes>
        <Route path="/" element={<App/>} />
        <Route path="/about" element={<About/>}/>
      </Routes>
    </HashRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

Обратите внимание, как вы использовали HashRouter вместо BrowserRouter. Использование BrowserRouter приведет к ошибке 404. Это связано с тем, что маршрутизация на страницах GitHub работает по-другому. Hashrouter не выдает ошибку, поскольку он использует хэш-часть URL-адреса для синхронизации пользовательского интерфейса с URL-адресом.

Последний шаг — фиксация всех новых изменений в Git:

git add .
git commit -m "Create React app"

Создать репозиторий GitHub

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

Затем добавьте репозиторий GitHub в свой локальный репозиторий в качестве удаленного:

git remote add origin <https://github.com/><username>/<repository name>.git

Наконец, отправьте локальный репозиторий на GitHub:

git branch -M main
git push --set-upstream origin main

Развертывание приложения React на страницах GitHub

Чтобы использовать GitHub Pages, вам необходимо сначала установить его:

npm install gh-pages

gh-pages позволит вам создать ветку gh-pages, в которой вы будете развертывать свой код.

Затем перейдите в файл package.json и добавьте домашнюю страницу, которая будет домашним URL-адресом приложения:

"homepage": "https://<username>.github.io/<repository-name>/",
"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

Теперь ваше приложение развернуто на GitHub, и вы можете посетить его по адресу https://.github.io/.

Делайте больше со страницами GitHub