Up(sun) and running mit React

Upsun ist gut geeignet, um JavaScript-Anwendungen aller Art zu hosten , einschließlich React-Anwendungen. Dieser kurze Leitfaden zeigt Ihnen die ersten Schritte, um Ihr React-Projekt zu erstellen, es auf Upsun bereitzustellen und dann seine Funktionen zu nutzen, um Ihre Entwicklung in Gang zu bringen.

React-Projekte erstellen

Für dieses Tutorial können wir den React Quickstart nutzen, um unsere Anwendung zu erstellen.

Führen Sie den Befehl aus:

npx create-react-app upsun-react --template cra-template-kendo-typescript

create-react-app richtet das Gerüst für das neue Repository ein, in diesem Fall KendoReact - ein Projekt, das eine Sammlung von fertigen React-Komponenten gemäß dem KendoReact UI System enthält.

Wenn das Projekt fertig gebaut und die Abhängigkeiten installiert sind, können wir eine Entwicklungsversion der Site lokal mit cd upsun-react && npm run start starten und die Site unter http://localhost:3000 besuchen.

Wenn wir stattdessen eine Produktionsversion der Anwendung erstellen wollen, können wir dies mit dem Befehl

npm run build

der statisches HTML, JS und CSS im lokalen Unterverzeichnis builderstellt . Die erstellte Website kann dann schnell mit einem lokalen Server ausgeführt werden, wie zum Beispiel mit dem folgenden Python-basierten Ansatz:

python3 -m http.server --directory=build 3000

React-Projekte bereitstellen

Wenn die Upsun CLI installiert ist und ein Konto bereits erstellt wurde, führen Sie den folgenden Befehl aus dem React-Repository aus:

upsun create -o YOUR_ORG_NAME --title=React-Upsun --region=ca-1.platform.sh --default-branch=main -y 

Ersetzen Sie IHR_ORG_NAME durch die gewünschte Organisation, und Sie können auch eine andere Region verwenden, wenn Sie möchten. Als Nächstes erstellen Sie eine minimale Upsun-Konfigurationsdatei, um das React-Projekt zu erstellen und dann einzusetzen.

# .upsun/config.yaml Anwendungen: upsun-react: 

        type: "nodejs:20" hooks: build: | set -eux npm install npm run build web: locations: /: root: build index: - index.html

Starten, übertragen und zu Upsun pushen. In ein paar Minuten werden Sie sehen, dass Ihre React-App erfolgreich gebaut und bereitgestellt wurde.

git add .upsun/config.yaml git commit -m "Migrate to Upsun." upsun push -y 

Revisionen durchführen

Ein kumuliertes Aktivitätsprotokoll erscheint lokal in Ihrem Terminal und in der Push-Aktivität in der Upsun-Verwaltungskonsole. Je nachdem, wann Sie dieses Tutorial durcharbeiten, haben Sie vielleicht bemerkt, dass einige veraltete und sogar potenziell gefährdete Abhängigkeiten im Repository vorhanden sind. Wir können eine Vorschauumgebung für das Upgrade und die Verbesserung dieser Situation einrichten.

Erstellen Sie zunächst diese Umgebung:

upsun branch upgrades

Dann bringen wir unsere Versionen in Ordnung und verwenden die neueste Version von Node.js sowohl lokal als auch auf Upsun. Wir können ein Tool wie nvmverwenden , um die neueste verfügbare Version von Node.js herunterzuladen - zum Zeitpunkt dieses Schreibens ist das Node.js 22 (passen Sie die folgenden Befehle an die aktuelle Version an, je nachdem, wie weit Sie in der Zukunft leben). Installieren Sie nvm, und verwenden Sie es dann, um die neueste Version von Node.js zu installieren:

$ nvm install 22 $ node -v v22.11.0

Wir können .upsun/config.yamlaktualisieren , um die neueste Version zu verwenden.

# .upsun/config.yaml applications: upsun-react: 

        # Aktualisieren dieser Zeile von 20 --> 22 type: "nodejs:22" hooks: build: | set -eux npm install npm run build web: locations: /: root: build index: - index.html

Prüfen Sie dann mit npm die anfälligen Abhängigkeiten und bearbeiten Sie sie entweder manuell oder mit dem CLI-Tool selbst mit den Befehlen npm upgrade und npm audit fix. Commit (git add . && git commit -m "Make upgrades") und push die Änderungen (upsun push -y). Überprüfen Sie, ob die Bereitstellung erfolgreich war und in die Produktion übergegangen ist!

upsun merge -y

Sie sind bereit!

Das war's! Jetzt haben Sie nicht nur ein React-basiertes Projekt auf Upsun deployed, sondern Sie haben auch den gleichen Workflow durchlaufen, den Sie für jede Revision verwenden werden - egal ob es sich um Abhängigkeits-Upgrades oder Feature-Erweiterungen handelt - die Sie machen werden, komplett mit einer Vorschauumgebung für jede Revision.

Halten Sie Ausschau nach weiteren Artikeln zur Bereitstellung aller Arten von Anwendungen auf Upsun - folgen Sie uns auf unseren sozialen Kanälen, um auf dem Laufenden zu bleiben: Dev.to, Reddit und Discord. Besuchen Sie auch unser brandneues Developer Center für noch mehr Ressourcen.

Wir sehen uns!