Jak nasadit aplikaci React na stránky GitHub

Vytvořili jste aplikaci React a chcete ji nasadit podle těchto jednoduchých kroků, které můžete nasadit, a ukázat světu svou úžasnou aplikaci.

Ukážu, jak vytvořit a nasadit aplikaci React pomocí create-react-app a GitHub Pages

Předpoklady :

  • Účet GitHub.

  • Nainstalujte Git do počítače a nastavte Git.

Ujistěte se, že máte v počítači nainstalované soubory Node.js a Npm.

  • Nainstalujte Node.js

  • Nainstalujte Npm

Upozornění Na místním počítači musíte mít Node 8.10.0 nebo novější.

Postup :

1- Nejprve vytvořte úložiště s názvem my-app pomocí create-react-app .

npm init react-app my-app

2- Potřebujeme nainstalovat balíček GitHub Pages jako dev-dependency.

cd my-app
npm install gh-pages --save-dev

3- Přidejte vlastnosti do package.json soubor.

První vlastnost, kterou musíme přidat na nejvyšší úrovni homepage za druhé to definujeme jako řetězec a hodnota bude "http://{username}.github.io/{repo-name}" {username} je vaše uživatelské jméno GitHubu a {repo-name} je název úložiště GitHub, které jste vytvořili, bude vypadat takto:

"homepage": "http://yuribenjamin.github.io/my-app"

Druhý ve stávajícím scripts vlastnost, kterou potřebujeme přidat predeploy a deploy .

"scripts": {
//...
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}

4- Vytvořte úložiště Github a inicializujte jej a přidejte jej jako vzdálené do svého místního úložiště git.

Nyní vytvořte vzdálené úložiště GitHub s názvem vaší aplikace a vraťte se a inicializujte to
git init
přidat jako dálkový ovladač
git remote add origin [email protected]:Yuribenjamin/my-app.git

5- Nyní jej nasaďte na stránky GitHub.

stačí spustit následující příkaz:

npm run deploy

tento příkaz vytvoří větev s názvem gh-pages tato pobočka hostí vaši aplikaci a vlastnost domovské stránky, kterou jste vytvořili v package.json soubor podržte svůj odkaz pro živý náhled, nebo můžete otevřít nastavení větve, přejděte dolů do sekce Stránky GitHub, kde najdete toto:

Navštivte nasazenou aplikaci

6- odevzdat a odeslat svůj závazek na GitHub. Volitelně

git add .
git commit -m "Your awesome message"
git push origin master

Rekapitulace

Vytvořili jsme aplikaci React pomocí create-react-app
poté jsme nainstalovali gh-pages jako závislost na dev
a v package.json přidali jsme některé vlastnosti homepage také ve stávajícím scripts vlastnost, kterou jsme přidali predeploy a deploy
a vytvořili vzdálené úložiště a inicializovali jej
a spusťte npm run deploy vygenerovat produkční sestavení a nasadit jej na stránky GitHub.

pokud máte nějaké dotazy, neváhejte se zeptat.
Vždy vás rádi slyším.