Jak nasadit aplikaci React zdarma se stránkami GitHub

Pokud máte projekt a chcete jej hostovat zdarma bez nákupu domény, je použití stránek GitHub skvělou volbou. GitHub Pages převede vaše úložiště na webové stránky a umožní vám hostovat neomezený počet projektových webů.

Nasazení webu React s navigací vyžaduje extra konfiguraci ve srovnání s nasazením statického webu. Tento tutoriál vás provede celým procesem od vytvoření úložiště GitHub až po hostovaný web.

Vytvořte aplikaci React

Pro demonstrační účely musíte vytvořit projekt React se směrováním, které nasadíte později. Pokud však máte existující Reagovat projekt, tento krok můžete přeskočit.

V terminálu spusťte create-react-app příkaz pro rychlé vytvoření projektu React:

npx create-react-app reagovat-gh

Přejděte do vytvořené složky a spusťte aplikaci.

npm spuštění běhu

Dále otevřete složku projektu s vámi preferovaným editor kódu. V src složku, odstraňte vše kromě App.js a index.js. Nahraďte obsah v App.js následujícím:

function App() {
 vrátit se (


Stránky Github

Nasazení React na Github




 );
}
exportovat výchozí aplikaci;

Přidat směrování

Chcete-li do aplikace přidat směrování, nejprve nainstalujte reagovat-router-dom:

npm install reagovat-router-dom

V App.js přidejte odkaz na stránku informací:

import { Link } z "react-router-dom";
function App() {
 vrátit se (


O
Stránky Github

Nasazení React na Github




 );
}
exportovat výchozí aplikaci;

Protože App.js bude fungovat jako vaše domovská stránka, stačí vytvořit O součástka:

const About = () => {
 vrátit se ( 


Domov
O stránce




 );
}
exportovat výchozí O aplikaci;

Nyní musíte vytvořit trasy a nakonfigurovat router React.

Upravte index.js tak, aby odpovídala URL příslušným komponentám:

import Reagovat z "reagovat";
importovat ReactDOM z "react-dom";
importovat aplikaci z "./App";
import { HashRouter, Routes, Route } z "react-router-dom";
import O aplikaci z "./About";
ReactDOM.render(



} />
}/>


,
 document.getElementById("root")
);

Všimněte si, jak jste používali HashRouter namísto BrowserRouter. Použitím BrowserRouter vyvolalo by chybu 404. Je to proto, že směrování na stránkách GitHubu funguje jinak. Hashrouter nevyvolá chybu, protože používá hash část adresy URL k synchronizaci uživatelského rozhraní s adresou URL.

Posledním krokem je provedení všech nových změn v Gitu:

git přidat.
git commit -m "Vytvořit aplikaci React"

Vytvořte úložiště GitHub

Od té doby stránky GitHub bude hostovat vaši aplikaci převedením úložiště na webovou stránku, musíte vytvořit úložiště GitHub. Přejděte na svůj účet GitHub a vytvořte nové úložiště se stejným názvem jako váš projekt.

Dále přidejte úložiště GitHub do místního úložiště jako vzdálené:

git remote add origin /.git

Nakonec přesuňte místní úložiště na GitHub:

git větev -M main
git push --set-upstream origin main

Nasaďte aplikaci React na stránky GitHub

Chcete-li používat stránky GitHub, musíte je nejprve nainstalovat:

npm nainstalovat gh-pages

gh-stránky vám umožní vytvořit gh-stránky větev, kde nasadíte svůj kód.

Dále přejděte ke svému package.json soubor a přidejte domovskou stránku, která bude domovskou adresou URL aplikace:

"domovská stránka": "https://.github.io//",
"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"
 }

Spuštěním následujícího příkazu dokončete proces nasazení:

npm spustit nasazení

Vaše aplikace je nyní nasazena na GitHub a můžete ji navštívit na adrese https://.github.io/.

Udělejte více se stránkami GitHub

Stránky GitHub poskytují jednoduchý způsob bezplatného nasazení webových stránek na internet. Zatímco jste pouze viděli, jak můžete nasadit jednoduchý projekt React, GitHub Pages vám umožní udělat mnohem víc. Můžete si například vytvořit plnohodnotný blog pomocí Jekyll a dokonce jej hostovat pomocí vlastní domény.

Jak hostovat web zdarma pomocí stránek GitHub

Přečtěte si další

O autorovi