Ako bezplatne nasadiť aplikáciu React so stránkami GitHub

Naučte sa, ako nasadiť smerovanú aplikáciu React na stránky GitHub v niekoľkých jednoduchých krokoch.

Ak máte projekt a chcete ho hostiť zadarmo bez toho, aby ste si kúpili doménu, používanie stránok GitHub je skvelá voľba. GitHub Pages konvertuje vaše úložiská na webové stránky a umožňuje vám hostiť neobmedzený počet stránok projektov.

Nasadenie lokality React s navigáciou si vyžaduje dodatočnú konfiguráciu v porovnaní s nasadením statickej lokality. Tento tutoriál vás prevedie celým procesom od vytvorenia úložiska GitHub až po hosťovanú stránku.

Vytvorte aplikáciu React

Na demonštračné účely musíte vytvoriť projekt React so smerovaním, ktoré nasadíte neskôr. Ak však máte existujúci projekt React, pokojne tento krok preskočte.

V termináli spustite príkaz create-react-app na rýchle vytvorenie projektu React:

npx create-react-app react-gh

Prejdite do vytvoreného priečinka a spustite aplikáciu.

npm run start

Potom otvorte priečinok projektu pomocou preferovaného editora kódu. V priečinku src odstráňte všetko okrem App.js a index.js. Nahraďte obsah v App.js nasledujúcim:

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

Pridať smerovanie

Ak chcete do svojej aplikácie pridať smerovanie, najprv nainštalujte react-router-dom:

npm install react-router-dom

V App.js pridajte odkaz na stránku s informáciami:

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;

Keďže App.js bude fungovať ako vaša domovská stránka, stačí vytvoriť komponent O:

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

Teraz musíte vytvoriť trasy a nakonfigurovať smerovač React.

Upravte index.js tak, aby sa adresa URL zhodovala s príslušnými komponentmi:

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")
);

Všimnite si, ako ste použili HashRouter namiesto BrowserRouter. Použitie BrowserRouter by vyvolalo chybu 404. Je to preto, že smerovanie na stránkach GitHub funguje inak. Hashrouter nevyvoláva chybu, pretože používa hash časť adresy URL na synchronizáciu používateľského rozhrania s adresou URL.

Posledným krokom je odovzdanie všetkých nových zmien v Git:

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

Vytvorte úložisko GitHub

Keďže stránky GitHub budú hostiť vašu aplikáciu konvertovaním úložiska na webovú lokalitu, musíte si vytvoriť úložisko GitHub. Prejdite do svojho účtu GitHub a vytvorte nové úložisko s rovnakým názvom ako váš projekt.

Potom pridajte úložisko GitHub do svojho lokálneho úložiska ako vzdialené:

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

Nakoniec presuňte lokálne úložisko na GitHub:

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

Nasaďte aplikáciu React na stránky GitHub

Ak chcete používať stránky GitHub, musíte si ich najskôr nainštalovať:

npm install gh-pages

gh-pages vám umožní vytvoriť vetvu gh-pages, do ktorej nasadíte svoj kód.

Potom prejdite do súboru package.json a pridajte domovskú stránku, ktorá bude domovskou adresou URL aplikácie:

"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"
  }

Spustite nasledujúci príkaz na dokončenie procesu nasadenia:

npm run deploy

Vaša aplikácia je teraz nasadená na GitHub a môžete ju navštíviť na https://.github.io/.

Urobte viac so stránkami GitHub