Up(sun) und läuft mit React

Upsun eignet sich hervorragend für das Hosten von JavaScript-Anwendungen aller Art, einschließlich React-Apps. Dieser kurze Leitfaden führt dich durch die ersten Schritte beim Erstellen deines React-Projekts, beim Bereitstellen auf Upsun und beim Nutzen der Features, um deine Entwicklung anzukurbeln. 

React-Projekte erstellen

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

Führe den folgenden Befehl aus:

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

create-react-app Damit wird das Grundgerüst für das neue Repository eingerichtet, in diesem Fall unter Verwendung von KendoReact – einem Projekt, das eine Sammlung vorgefertigter React-Komponenten gemäß dem KendoReact-UI-System enthält. 

Sobald das Projekt fertig erstellt ist und die Abhängigkeiten installiert wurden, kannst du eine Entwicklungsversion der Website lokal mit „cd upsun-react && npm run start“ ausführen und die Website unter http://localhost:3000 aufrufen. 

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

npm run build

, der statische HTML-, JS- und CSS-Dateien im lokalen Unterverzeichnis „build“ erstellt. Diese erstellte Website kannst du dann schnell mit einem lokalen Server ausführen, beispielsweise mit dem folgenden Python-basierten Ansatz:

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

React-Projekte bereitstellen

Wenn die Upsun-CLI installiert und ein Konto bereits erstellt ist, führe 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 

Ersetze YOUR_ORG_NAME durch die gewünschte Organisation und wähle bei Bedarf eine andere Region aus. Erstelle als Nächstes eine minimale Upsun-Konfigurationsdatei, um das React-Projekt zu erstellen und anschließend bereitzustellen.

# .upsun/config.yaml

applications:

    upsun-react: 

        type: "nodejs:20"

        hooks:
            build: |
                set -eux
                npm install
                npm run build

        web:
            locations:
                /:
                    root: build
                    index:
                        - index.html        

Stelle die Änderungen bereit, führe ein Commit durch und pushe sie zu Upsun. In wenigen Minuten wirst du sehen, dass deine React-App erfolgreich erstellt und bereitgestellt wurde.

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

Änderungen vornehmen

Ein kumuliertes Aktivitätsprotokoll wird lokal in deinem Terminal und in den Push-Aktivitäten der Upsun-Verwaltungskonsole angezeigt. Je nachdem, wann du dieses Tutorial durcharbeitest, ist dir vielleicht aufgefallen, dass sich im Repository einige veraltete und möglicherweise sogar anfällige Abhängigkeiten befinden. Wir können eine Preview-Umgebung einrichten, um diese Situation ein wenig zu verbessern.

Erstelle zunächst diese Umgebung:

upsun branch upgrades

Dann bringen wir unsere Versionen in Ordnung und verwenden sowohl lokal als auch auf Upsun die neueste Version von Node.js. Wir können ein Tool wie nvm nutzen, um die aktuellste verfügbare Version von Node.js herunterzuladen – zum Zeitpunkt der Erstellung dieses Artikels ist das Node.js 22 (passe die folgenden Befehle an die aktuelle Version an, je nachdem, wie weit du in der Zukunft lebst). Installiere nvm und nutze es dann, um die neueste Version von Node.js zu installieren:

$ nvm install 22
$ node -v
v22.11.0

Wir können .upsun/config.yaml aktualisieren, damit es mit dieser aktuellen Version übereinstimmt.

# .upsun/config.yaml

applications:

    upsun-react: 

        # Updating this line from 20 --> 22
        type: "nodejs:22"

        hooks:
            build: |
                set -eux
                npm install
                npm run build

        web:
            locations:
                /:
                    root: build
                    index:
                        - index.html      

Überprüfe dann mit npm anfällige Abhängigkeiten und bearbeite sie entweder manuell oder mit dem CLI-Tool selbst mithilfe der Befehle „npm upgrade“ und „npm audit fix“. Führe einen Commit durch (git add . && git commit -m “Make upgrades”) und pushe die Änderungen (upsun push -y). Überprüfe, ob die Bereitstellung erfolgreich war und in der Produktivumgebung übernommen wurde!

upsun merge -y

Das war’s schon!

Das war’s! Jetzt hast du nicht nur ein bereitgestelltes React-basiertes Projekt auf Upsun, sondern hast auch denselben Workflow durchlaufen, den du bei jeder Änderung – sei es für Abhängigkeits-Upgrades oder Features – anwenden wirst, komplett mit einer Vorschau-Umgebung für jede einzelne. 

Haltet Ausschau nach weiteren Artikeln zum Deployen aller Arten von Anwendungen auf Upsun – folgt uns auf unseren sozialen Kanälen, um auf dem Laufenden zu bleiben: Dev.to, Reddit und unsere Community. Schaut unbedingt im brandneuen Developer Center vorbei, um noch mehr Ressourcen zu erhalten. 

Bis bald!