Wie stellt man eine Frontend-Anwendung auf Netlify bereit?

Die Bereitstellung von Frontend-Anwendungen ist heute keine große Sache. Wir können eine Site innerhalb von Minuten mit modernen Technologien und Hosting-Plattformen bereitstellen. Es gibt viele Hosting-Plattformen da draußen. Für diesen Artikel interessieren wir uns jedoch für Netlify.

Lassen Sie uns unsere Frontend-Anwendung für Netlify bereitstellen .

Frontend-Anwendungen

Es gibt verschiedene Arten von Frontend-Bibliotheken und Frameworks wie React, Vue, Angular usw.. Und die gute Nachricht ist, dass alle denselben Paketpaketierer verwenden. Die Bereitstellung für alle Frontend-Anwendungen, die mit verschiedenen Bibliotheken und Frameworks erstellt wurden, ist ähnlich. Wir sind also gut für jede dieser Bibliotheken und Frameworks geeignet.

Wir können auch Frontend-Anwendungen ohne Bibliotheken oder Frameworks erstellen. Dies ist die traditionelle Art, Frontend-Anwendungen einmal zu erstellen. Aber es ändert sich jetzt viel. So können wir Frontend-Anwendungen auf unterschiedliche Weise erstellen. Der Bereitstellungsprozess ist jedoch für alle diese verschiedenen Arten von Front-End-Anwendungen gleich.

Wir werden sehen, wie eine Front-End-Anwendung bereitgestellt wird, die mit einer Bibliothek erstellt wurde, und eine andere ohne Bibliothek oder Framework. Lassen Sie uns mit React und Plain JavaScript minimale Frontend-Anwendungen für die Bereitstellung erstellen.

Konfiguration

Für die Deployment-Demonstration erstellen wir einfache React- und JavaScript-Anwendungen. Sie erstellen sie auch, um sie zu verfolgen. Wenn Sie bereits über Front-End-Anwendungen verfügen, fahren Sie mit dem Abschnitt zur Bereitstellung fort.

Wir müssen daran denken, dass der Einstiegspunkt jeder Front-End- Anwendung index.html sein sollte, während sie auf Netlify bereitgestellt wird .

Wenn wir Anwendungen mit einer Bibliothek oder einem Framework erstellt haben, müssen wir uns darüber keine Gedanken machen. Standardmäßig erstellen die Bibliotheken und Frameworks die Datei index.html im Build-Prozess für uns. Wenn wir jedoch reine JavaScript-Anwendungen haben, müssen wir eine index.html- Datei als Eintrag für unsere Anwendung erstellen.

Anwendung reagieren

Führen Sie den folgenden Befehl aus, um eine React-App zu erstellen.

 npx create-react-app demo

Sie können die App vor der Bereitstellung nach Belieben aktualisieren. Ich habe gerade eine Textzeile auf der Startseite aktualisiert. Aber egal :).

Einfache JavaScript-Anwendung

Führen Sie die folgenden Schritte aus, um eine einfache JavaScript-Anwendung zu erstellen.

• Erstellen Sie einen Ordner namens demo .
• Erstellen Sie drei Dateien namens index.html , style.css und script. js .
• Hier ist index.html der Einstiegspunkt für unsere Anwendung.

Lassen Sie Ihrer Kreativität freien Lauf und aktualisieren Sie die App. Ich füge der Anwendung nur einfache Dinge hinzu.

Bereitstellen

Was die Bereitstellung von Frontend-Anwendungen für Netlify angeht, haben wir zwei Möglichkeiten. Wir können Anwendungen von GitHub, GitLab, BitBucket usw. direkt auf Netlify bereitstellen. Oder wir können die Bereitstellung über die Netlify-CLI (Befehlszeilenschnittstelle) durchführen . Es ist nicht zwingend erforderlich, alle zu kennen, um unsere Anwendungen bereitzustellen. Aber es ist gut an den verschiedenen Optionen, die wir für die Bereitstellung haben.

Lassen Sie uns jeden von ihnen einzeln untersuchen.

GitHub

Wir verwenden GitHub, um unseren Code zu hosten. Sie müssen es nicht verwenden, da es nicht obligatorisch ist. Sie können nach Belieben andere Plattformen verwenden.

Es gibt zwei Arten von Anwendungen, die wir bereitstellen können. Aber der Prozess sieht bei beiden ähnlich aus. Obwohl ich dir beide zeigen werde. Es gibt hauptsächlich zwei Schritte darin. Sie sind

• Übertragen Sie den Code auf GitHub.
• Stellen Sie die Anwendung von GitHub mit Netlify bereit.

Der erste Teil gilt sowohl für React- als auch für JavaScript- Anwendungen. Beginnen wir den Bereitstellungsprozess mit dem ersten Schritt.

Wir gehen davon aus, dass Sie Ihren Code nicht auf GitHub hatten. Wenn Sie Ihren Code auf GitHub haben, können Sie den Push-Code-Teil überspringen. Sie benötigen ein git Tool. Wenn git nicht auf Ihrem Computer installiert ist, sollten Sie es installieren, bevor Sie fortfahren.

#1. Code auf GitHub übertragen

• Gehen Sie zu Ihrem GitHub-Konto und erstellen Sie ein Repository namens demo .

• Sie können das Repository wie folgt sehen, nachdem es erstellt wurde.

Jetzt müssen wir unseren Code in das oben erstellte Repository verschieben. Um den Code zu übertragen, können Sie den Befehlen im Repository oder den folgenden Befehlen folgen.

• Terminal öffnen oder cmd.
• Gehen Sie in Ihr Projektverzeichnis.
• Initialisieren Sie das Git mit git init
• Fügen Sie die Änderungen zu local git git add .
• Übergeben Sie die Änderungen mit einer Nachricht git commit -m 'Completed application'
• Verbinden Sie das Remote-Repository mit unserem lokalen Repository git remote add origin 'your_repo_path' . Ersetzen Sie your_repo_path durch Ihr Remote-Repository. Sie finden es im Repository ähnlich meinem [email protected]:hafeezulkareem/demo.git
• Drücken Sie nun den Code git push -u origin main
• Das ist es; Wir haben unseren Code auf GitHub gepusht.

Sie können den Code wie folgt in Ihrem Repository sehen.

Wir sind mit dem ersten Schritt fertig, unseren Code auf GitHub zu übertragen. Wenn Sie eine einfache JavaScript- Anwendung bereitstellen, sieht Ihr Code möglicherweise wie folgt aus.

Kommen wir zum nächsten Schritt und stellen unsere Anwendung auf Netlify bereit.

#2. Bereitstellen von GitHub-Code auf Netlify

Wenn Sie kein Konto bei Netlify haben, erstellen Sie eines.

• Rufen Sie die Netlify-Website auf.
• Melde dich in deinem Konto an.
• Sie können eine Schaltfläche namens Neue Site von Git sehen, wie unten gezeigt.

• Klicken Sie auf die Schaltfläche, um mit der Bereitstellung zu beginnen.
• Sie navigieren zu der Bereitstellungsseite, die wie folgt aussieht.

• Sie können auf der Seite verschiedene Code-Hosting-Plattformen verwenden. Wir verwenden GitHub. Klicken Sie also darauf.
• Es öffnet sich ein neues Fenster, um sich wie folgt bei unserem GitHub-Konto anzumelden.

• Melden Sie sich für die Netlify-Autorisierung bei Ihrem GitHub-Konto an.
• Sobald Sie sich bei Ihrem GitHub-Konto anmelden, wird das Fenster mit der Meldung Authorized geschlossen .
• Suchen Sie nun in der angegebenen Suchleiste nach Ihrem Repository-Namen.

• Wenn Sie nach dem Repository suchen, wird es nicht angezeigt, da wir unserem Repository keinen Zugriff auf Netlify gewährt haben. Auf GitHub sehen Sie eine Schaltfläche namens Configure Netlify .

• Klicken Sie auf die Schaltfläche und geben Sie Ihr GitHub-Konto-Passwort ein, um den Zugriff zu bestätigen.

• Sie navigieren zu einer Access-Seite, die wie folgt aussieht.

• Scrollen Sie nach unten, und Sie sehen einen Abschnitt namens Repository-Zugriff .

• Es gibt zwei Möglichkeiten. Wir können Zugriff auf alle unsere Repositorys gewähren oder auf einige davon, die dies erfordern. Es ist besser, den Zugriff auf die Repositorys zu gewähren, die wir bereitstellen, und nicht auf alle.
• Wählen Sie die Option Nur Repositorys auswählen wie folgt aus.

• Klicken Sie auf das Dropdown-Menü unten und suchen Sie nach dem Repository, das Sie bereitstellen möchten. Wählen Sie es aus.

• Klicken Sie auf die Schaltfläche Speichern .
• Es wird auf die Netlify- Bereitstellungsseite umgeleitet. Und Sie können das neue Repository sehen.

• Klicken Sie auf das Repository.
• Es werden verschiedene Details wie ein bereitzustellender Zweig, ein Befehl zum Installieren von Paketen usw. angezeigt.

• Wenn Sie den vollständigen Code in einem anderen Branch als master haben , aktualisieren Sie ihn, indem Sie den Branch aus der Dropdown-Liste auswählen.
• Klicken Sie abschließend auf die Schaltfläche Site bereitstellen . Es leitet Sie zum Dashboard weiter.
• Die Bereitstellung der Site wird einige Zeit in Anspruch nehmen.

• Sie sehen die veröffentlichte Site, sobald sie bereitgestellt wurde.

Das ist es.

Wir haben unsere Site erfolgreich auf Netlify bereitgestellt. Sie können auf die Site-URL klicken, um sie live zu sehen.

Wir können die Site- und Domain-Einstellungen nach Belieben aktualisieren. Aber wir werden es hier nicht behandeln, da es ein weiteres vollständiges Thema darstellt, über das man sprechen kann. Unten sehen Sie die einfache JavaScript-Anwendung nach der Bereitstellung.

Es gibt keinen Unterschied im Bereitstellungsprozess. Denken Sie jedoch daran, den Einstiegspunkt der Anwendung nicht zu vergessen, dh index.html .

Jetzt ist es an der Zeit, eine andere Methode zur Bereitstellung unserer Frontend-Anwendung kennenzulernen.

#3. Bereitstellen von Code mit Netlify CLI

Die Netlify-CLI ist eine Befehlszeilenschnittstelle zum Bereitstellen von Frontend-Anwendungen über das Terminal oder die Befehlszeile. Dies ist nützlich, wenn Sie einige zusätzliche Schritte (obige Methode) nicht ausführen möchten. Wie bei der obigen Methode können wir React (jede Bibliothek oder jedes Framework) oder JavaScript- Anwendungen bereitstellen.

Die vollständige Dokumentation von Netlify CLI erhalten Sie hier. Es ist jedoch nicht erforderlich, eine Anwendung bereitzustellen. Sie können darauf zurückgreifen, wenn Sie zum fortgeschrittenen Niveau wechseln.

Sehen wir uns an, wie Sie die Netlify-CLI bereitstellen.

Zuerst müssen wir es auf unserer Maschine installieren. Es ist als Knotenpaket verfügbar. Wir können es also mit der npm installieren. Lassen Sie es uns mit dem folgenden Befehl installieren.

 npm install netlify-cli -g

Das Flag -g dient dazu, das Paket global zu installieren, damit wir von überall darauf zugreifen können. Sie sehen etwas Ähnliches wie im folgenden Bild.

Sehen wir uns die Schritte zum Bereitstellen von React- und einfachen JavaScript- Anwendungen mit der Netlify-CLI an.

• Führen Sie den Build-Befehl von React (oder einer anderen Bibliothek oder Framework)-Anwendung aus. Im Fall einer einfachen JavaScript-Anwendung müssen wir keine Befehle ausführen.

 npm run build

• Der Build-Befehl kann je nach verwendeter Bibliothek oder Framework variieren.
• Sie sehen einen Build-Ordner wie folgt.

• Ändern Sie Ihr Verzeichnis im Fall der React-Anwendung in den Build- Ordner oder im Fall der JavaScript-Anwendung in den Projektordner.

• Bevor wir mit den nächsten Schritten fortfahren , müssen wir ein Netlify- Konto erstellen. Gehen Sie zu Netlify, erstellen Sie ein Konto und fahren Sie mit den nächsten Schritten fort.
• Jetzt müssen wir uns über die CLI anmelden. Lassen Sie uns den folgenden Befehl ausführen, um sich anzumelden.

 netlify login

• Der obige Befehl öffnet eine neue Registerkarte im Standardbrowser, um sich beim Netlify-Konto anzumelden. Sie gelangen zur Netlify-Site.
• Geben Sie Ihre Zugangsdaten ein und melden Sie sich an. Sie werden aufgefordert, die CLI zu autorisieren, nachdem Sie sich angemeldet haben.

• Klicken Sie auf Autorisieren, um sich zu authentifizieren. Danach sehen Sie eine Erfolgsmeldung.

• Jetzt ist es an der Zeit, unsere Anwendung bereitzustellen. Führen Sie den folgenden Bereitstellungsbefehl aus.

 netlify deploy

• Sie werden aufgefordert, die vorhandene Site auszuwählen oder eine neue zu erstellen. Wählen Sie (verwenden Sie Ihre Auf- und Abwärtspfeile) die Option Neue Site erstellen und konfigurieren und drücken Sie die Eingabetaste .

• Es zeigt dann Teams zur Auswahl an, verwenden Sie Ihre Pfeile zum Auswählen und drücken Sie die Eingabetaste .

• Jetzt können Sie die Subdomain für Ihre Site eingeben. Es ist jedoch nicht obligatorisch. Netlify wird einen zufälligen für uns auswählen, wenn wir ihn verlassen. Wir können es später ändern, wenn wir möchten. Ich lasse es vorerst leer.

• Es fordert uns auf, das Verzeichnis einzugeben, das wir bereitstellen möchten. Wir sind bereits zum Zielverzeichnis navigiert. Lassen Sie uns einfach die Eingabetaste drücken . Sie können auch andere Verzeichnisse eingeben. Aber es ist nicht einfach. Daher ist es besser, zuerst zum Zielverzeichnis zu navigieren und dann bereitzustellen.

• Es wird unsere Website für einen URL-Entwurf wie folgt bereitstellen.

• Sie können Ihre Website anhand des URL-Entwurfs überprüfen und sicherstellen, dass alles richtig ist.
• Nachdem wir die Site überprüft haben, können wir sie mit dem folgenden Befehl in der Produktion bereitstellen.

 netlify deploy --prod

• Es wird nur nach dem Verzeichnis gefragt. Geben Sie das Verzeichnis ein. Wenn wir uns im selben Verzeichnis befinden, drücken Sie einfach die Eingabetaste .
• Das ist es. Die Bereitstellung der Site ist abgeschlossen. Sie können die Website besuchen, um sie zu überprüfen.

• Und hier ist das Ergebnis.

Wir sind damit fertig, unsere Site mithilfe der Netlify-CLI auf Netlify bereitzustellen . Sie können die Einstellungen der Site in Ihrem Netlify-Dashboard aktualisieren.

Fazit

Puh! Es ist ein langer. Sie benötigen keine weitere Anleitung, um Ihre Frontend-Anwendung auf Netlify bereitzustellen, nachdem Sie dies vollständig gelesen haben.

Es gibt zwei Methoden, um unsere Anwendung auf Netlify bereitzustellen. Welcher folgen? Die Verwendung der ersten Methode hat einen kleinen Vorteil. Netlify aktualisiert den Build, wenn wir neuen Code in unser Site-Repository übertragen. Bei der CLI-Methode müssen wir dies jedoch manuell tun.

Wir ziehen immer eine Methode den anderen vor, basierend auf der Situation, in der wir uns befinden. Wie auch immer, Sie kennen beide Bereitstellungsmethoden. Um die Methode brauchen wir uns also keine Gedanken zu machen. Wählen Sie diejenige aus, die für Sie am besten geeignet ist.

Hinweis: Die im Artikel gezeigten Demo-Sites sind möglicherweise nach einiger Zeit nicht mehr öffentlich verfügbar.

Brauchen Sie eine Alternative zu Netlify? Schauen Sie sich diese besten statischen Site-Hosting-Plattformen an.

Viel Spaß beim Bereitstellen