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.