* Mit create-react-app erstellt
In diesem Tutorial zeige ich Ihnen, wie Sie eine React -App erstellen und auf GitHub -Seiten bereitstellen können.
Um die React-App zu erstellen, werde ich eine create-react-app verwenden, bei der es sich um ein Werkzeug handelt, das mit Menschen eine React-App von Grund auf neu erstellen kann. Um die React-App bereitzustellen, werde ich gh-pages verwenden. Dies ist ein NPM-Paket, das mit Menschen mithilfe von Github-Seiten Dinge bereitstellen kann, einen kostenlosen Webhosting-Dienst von GitHub.
Wenn Sie diesem Tutorial folgen, erhalten Sie eine neue React -App - auf Github -Seiten -, die Sie dann anpassen können.
Dieses Tutorial wurde aus seinem ursprünglichen Englisch in die folgenden Sprachen übersetzt:
Knoten und NPM sind installiert. Hier sind die Versionen, die ich bei der Erstellung dieses Tutorials verwenden werde:
$ node --version
v16.13.2
$ npm --version
8.1.2Das Installieren von NPM fügt dem System zwei Befehle hinzu -
npmundnpx- beide, bei denen ich dieses Tutorial verwenden werde.
Git ist installiert. Hier ist die Version, die ich verwenden werde, während ich dieses Tutorial erstelle:
$ git --version
git version 2.29.1.windows.1Ein Github -Konto.
Repository -Name: Sie können einen beliebigen Namen eingeben*.
* Für eine Projektseite können Sie jeden gewünschten Namen eingeben. Für eine Benutzerseite verlangt GitHub, dass der Name des Repositorys das folgende Format hat:
{username}.github.io(z. B.gitname.github.io).
Der Name, den Sie eingeben, wird an einigen Stellen angezeigt: (a) In Bezug auf das Repository in GitHub, (b) in der URL des Repositorys und (c) in der URL der bereitgestellten React -App.
In diesem Tutorial werde ich die React -App als Projektstandort bereitstellen.
Ich werde eintreten: react-gh-pages
Repository -Privatsphäre: Wählen Sie öffentlich (oder privat *).
* Für GitHub -freie Benutzer ist die einzige Art von Repository, die mit Github -Seiten verwendet werden kann, öffentlich . Für GitHub Pro -Benutzer (und andere zahlende Benutzer) können sowohl öffentliche als auch private Repositories mit Github -Seiten verwendet werden.
Ich werde wählen: öffentlich
Initialisieren Sie das Repository: Lassen Sie alle Kontrollkästchen leer.
Dadurch erstellt GitHub ein leeres Repository, anstatt das Repository mit einem
README.md,.gitignoreund/oderLICENSEvorzulegen.
Zu diesem Zeitpunkt enthält Ihr GitHub -Konto ein leeres Repository mit dem von Ihnen angegebenen Namen und Datenschutztyp.
Erstellen Sie eine React-App namens my-app :
Falls Sie einen anderen Namen als
my-app(z. B.web-ui) verwenden möchten, können Sie dies erreichen, indem Sie alle Vorkommen vonmy-appin diesem Tutorial durch diesen anderen Namen ersetzen (dhmy-app>web-ui).
$ npx create-react-app my-appDieser Befehl erstellt eine in JavaScript geschriebene React -App. Um einen in TypeScript geschriebenen zu erstellen, können Sie diesen Befehl stattdessen ausgeben:
$ npx create-react-app my-app --template typescript
Dieser Befehl erstellt einen neuen Ordner namens my-app , der den Quellcode einer React-App enthält.
Neben dem Quellcode der React -App ist dieser Ordner auch ein Git -Repository. Diese Eigenschaft des Ordners wird in Schritt 6 ins Spiel kommen.
Zweignamen:
mastervs.mainDas Git -Repository hat einen Zweig, der entweder (a)
master, der Standard für eine frische Git -Installation, benannt wird. oder (b) den Wert der Git -Konfigurationsvariablen,init.defaultBranch, wenn Ihr Computer GIT Version 2.28 oder höher ausführt und Sie diese Variable in Ihrer GIT -Konfiguration festgelegt haben (z. B. über$ git config --global init.defaultBranch main) .Da ich diese Variable in meiner Git -Installation nicht festgelegt habe, heißt der Zweig in meinem Repository
master. Falls der Zweig in Ihrem Repository einen anderen Namen hat (den Sie durch Ausführen von$ git branchüberprüfen können) wiemain; Sie können alle Ereignisse desmasterwährend des gesamten Restes dieses Tutorials durch diesen anderen Namen ersetzen (z. B.master→main).
Geben Sie den neu geschaffenen Ordner ein:
$ cd my-appZu diesem Zeitpunkt befindet sich eine React -App auf Ihrem Computer und Sie befinden sich im Ordner, der den Quellcode enthält. Alle in diesem Tutorial gezeigten verbleibenden Befehle können aus diesem Ordner ausgeführt werden.
gh-pages NPM-Paket Installieren Sie das gh-pages NPM-Paket und bezeichnen Sie es als Entwicklungsabhängigkeit:
$ npm install gh-pages --save-dev Zu diesem Zeitpunkt ist das gh-pages -NPM-Paket auf Ihrem Computer installiert und die Abhängigkeit der React-App davon ist in der package.json der React-App.JSON-Datei dokumentiert.
package.json -Datei eine homepage -Eigenschaft hinzu Öffnen Sie die Datei package.json in einem Texteditor.
$ vi package.jsonIn diesem Tutorial ist der Texteditor, den ich benutze, VI. Sie können jeden gewünschten Texteditor verwenden. Zum Beispiel Visual Studio -Code.
Fügen Sie eine homepage Eigenschaft in diesem Format hinzu*: https://{username}.github.io/{repo-name}
* Für eine Projektseite ist das das Format. Für eine Benutzerseite lautet das Format:
https://{username}.github.io. Weitere Informationen zurhomepageEigenschaft finden Sie in den Abschnitt "Github Pages" der Dokumentationcreate-react-app.
{
"name": "my-app",
"version": "0.1.0",
+ "homepage": "https://gitname.github.io/react-gh-pages",
"private": true, Zu diesem Zeitpunkt enthält die package.json -Datei der React App eine Eigenschaft namens homepage .
package.json hinzu Öffnen Sie die Datei package.json in einem Texteditor (wenn sie nicht bereits in einem geöffnet ist).
$ vi package.json Fügen Sie dem scripts eine predeploy -Eigenschaft und eine deploy hinzu:
"scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build", Zu diesem Zeitpunkt enthält die package.json -Datei der React App Bereitstellungsskripte.
Fügen Sie dem lokalen Git -Repository eine "Fernbedienung" hinzu.
Sie können dies tun, indem Sie einen Befehl in diesem Format ausgeben:
$ git remote add origin https://github.com/{username}/{repo-name}.git Um diesen Befehl für Ihre Situation anzupassen, ersetzen Sie {username} durch Ihren Github-Benutzernamen und ersetzen Sie {repo-name} durch den Namen des Github-Repositorys, das Sie in Schritt 1 erstellt haben.
In meinem Fall werde ich rennen:
$ git remote add origin https://github.com/gitname/react-gh-pages.gitDieser Befehl sagt Git, wo ich möchte, dass es Dinge drückt, wenn ich-oder das
gh-pagesNPM-Paket in meinem Namen-den Befehl$ git pushin diesem lokalen Git-Repository ausgibt.
Zu diesem Zeitpunkt verfügt das lokale Repository über eine "Fernbedienung", deren URL auf das in Schritt 1 erstellte Github -Repository zeigt.
Drücken Sie die React -App in das GitHub -Repository
$ npm run deployDadurch werden die in
package.jsondefiniertenpredeployunddeployausgeführt.Unter der Motorhaube erstellt das
predeploy-Skript eine verteilbare Version der React -App und speichert sie in einem Ordner namensbuild. Anschließend wird der Inhalt dieses Ordners auf dengh-pages-Abzweig und erstellt diesen Zweigdeploywenn es noch nicht vorhanden ist.
Standardmäßig wird der neue Commit in der
gh-pages-Zweigstelle eine Commit-Nachricht von "Updates" haben. Sie können eine benutzerdefinierte Commit -Nachricht über die Option-mwie folgt angeben:$ npm run deploy -- -m " Deploy React app to GitHub Pages "
Zu diesem Zeitpunkt enthält das Github-Repository eine Zweigstelle mit dem Namen gh-pages , die die Dateien enthält, aus denen die verteilbare Version der React-App besteht. Wir haben GitHub -Seiten jedoch noch nicht so konfiguriert, dass diese Dateien bereitgestellt werden .
gh-pages/ (root)Das war's! Die React -App wurde auf Github -Seiten eingesetzt!
Zu diesem Zeitpunkt ist die React-App für alle zugegriffen, die die in Schritt 4 angegebene homepage -URL besuchen. Beispielsweise ist die React-App, die ich bereitgestellt habe, unter https://gitname.github.io/react-gh-Pages zugänglich.
In einem früheren Schritt hat das NPM-Paket gh-pages die verteilte Version der React-App zu einer Zweigstelle mit dem Namen gh-pages im Github-Repository gedrückt. Der Quellcode der React -App ist jedoch noch nicht auf GitHub gespeichert.
In diesem Schritt zeige ich Ihnen, wie Sie den Quellcode der React -App auf GitHub speichern können.
Verpflichten Sie die Änderungen, die Sie während der Befolgung dieses Tutorials an den master -Zweig des örtlichen Git -Repositorys befolgt haben. Schieben Sie diesen Zweig dann zum master -Zweig des Github -Repositorys.
$ git add .
$ git commit -m " Configure React app for deployment to GitHub Pages "
$ git push origin masterIch empfehle, an diesem Punkt das Github -Repository zu erkunden. Es wird zwei Zweige haben:
masterundgh-pages. Dermaster-Zweig enthält den Quellcode der React App, während diegh-pages-Filiale die verteilbare Version der React-App enthält.
create-react-appCNAME -Datei beibehaltencreate-react-app in etwas Einzigartiges generiert wird!master - Der Quellcode der React -Appgh-pages - Die aus diesem Quellcode erstellte React -AppVielen Dank an diese Personen, die zur Aufrechterhaltung dieses Tutorials beigetragen haben.
Diese Liste wird im Moment manuell verwaltet und umfasst (a) jede Person, die eine Pull -Anfrage eingereicht hat, die schließlich in master zusammengefasst wurde, und (b) jede Person, die auf eine andere Art und Weise beigetragen hat (z. Ich habe sie in diese Liste einbezogen.
