React

Die folgenden Beispiele zeigen, wie du eine statische React-Seite und eine statische React-Seite mit Vite einrichtest, um sie über ein GitHub-Repository auf dem Statische-Seiten-Hosting Service von Kinsta bereitzustellen.

React ist eine beliebte JavaScript-Bibliothek für die Erstellung von Benutzeroberflächen. Sie ermöglicht es Entwicklern, wiederverwendbare UI-Komponenten zu erstellen und die UI als Reaktion auf Datenänderungen effizient zu aktualisieren. Weitere Informationen findest du auf der React-Website.

Du kannst diese Schnellstartvorlage auch auf dem Anwendungs-Hosting von Kinsta ohne zusätzliche Konfiguration verwenden. Wenn du das Anwendungs-Hosting verwendest, kann der Start-Befehl für den Webprozess leer gelassen werden, da Kinsta den erforderlichen Befehl bei der ersten Bereitstellung automatisch erkennt.

Voraussetzungen

• Die Schnellstartvorlagen von Kinsta werden in GitHub gespeichert und verwaltet. Daher benötigst du ein GitHub-Konto, um darauf zuzugreifen.
• Um die Anwendung bereitzustellen, musst du ein MyKinsta-Konto erstellen.

Eine statische React-Site bereitstellen

1. Melde dich bei GitHub an und erstelle ein neues Repository aus dieser Vorlage (Diese Vorlage verwenden > Neues Repository erstellen): Kinsta – Hello World – React.
2. Klicke in MyKinsta auf Statische Seiten > Seite hinzufügen > wähle GitHub aus, klicke auf Git-Anbieter verbinden > Autorisieren und melde dich bei deinem GitHub-Konto an.
3. Wähle das Hello World – React Repository aus, klicke auf Weiter und gib in den Build-Einstellungen Folgendes ein:
   • Build-Befehl: npm run build
   • Node Version: 18.16.0
   • Verzeichnis veröffentlichen: build

Kinsta installiert während des Deployment-Prozesses automatisch die in deiner package.json-Datei definierten Abhängigkeiten. Die Website ist verfügbar, sobald die Bereitstellung abgeschlossen ist und die Kinsta-Willkommensseite unter der URL deiner Website geladen wird.

Bereitstellungs-Lebenszyklus

Immer wenn eine Bereitstellung initiiert wird (durch die Erstellung einer Anwendung oder ein Redeployment aufgrund eines eingehenden Commits), werden die Befehle npm start und npm build ausgeführt.

React mit Vite

Dieses Beispiel zeigt, wie du eine statische React-Site mit Vite einrichtest, um sie auf dem Statische-Seiten-Hosting Diensten von Kinsta von einem GitHub-Repository aus bereitzustellen.

Vite ist ein Tool, mit dem du dezentrale Anwendungen erstellen kannst. Es bietet Entwickler-Tools und APIs, um den Entwicklungsprozess zu vereinfachen und unterstützt mehrere Programmiersprachen. Weitere Informationen findest du auf der Vite-Website.

Kinsta installiert automatisch die in deiner package.json-Datei definierten Abhängigkeiten während des Deployment-Prozesses.

1. Melde dich bei GitHub an und erstelle ein neues Repository aus dieser Vorlage (Diese Vorlage verwenden > Neues Repository erstellen): Kinsta – Hello World – Vite + React.
2. Füge in MyKinsta eine statische Seite mit dem Hello World – Vite + React Repository und den folgenden Build-Einstellungen hinzu:
   • Build-Befehl: npm run build
   • Node-Version: 18.16.0
   • Verzeichnis für die Veröffentlichung: dist
3. Die Website ist verfügbar, sobald der Build abgeschlossen ist und die Kinsta-Willkommensseite unter der URL deiner Website geladen wird.

Lebenszyklus der Bereitstellung

Immer wenn ein Bereitstellung initiiert wird (durch das Erstellen einer Anwendung oder ein Redeployment aufgrund eines eingehenden Commits), werden die Befehle npm install und npm build ausgeführt.