Amazon CodeCatalyst ist nicht mehr offen für Neukunden. Bestandskunden können den Service weiterhin wie gewohnt nutzen. Weitere Informationen finden Sie unter [Wie migriert man von CodeCatalyst](migration.md).
Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.
# Tutorial: Eine React-Anwendung erstellen und aktualisieren
Als Autor von Blueprints können Sie benutzerdefinierte Blueprints entwickeln und dem Blueprints-Katalog Ihres Bereichs hinzufügen. Diese Blueprints können dann von Space-Mitgliedern verwendet werden, um neue Projekte zu erstellen oder sie zu bestehenden Projekten hinzuzufügen. Sie können weiterhin Änderungen an Ihren Blueprints vornehmen, die dann als Updates über Pull-Requests zur Verfügung gestellt werden.
Dieses Tutorial bietet eine exemplarische Vorgehensweise aus der Sicht eines Blueprint-Autors und eines Blueprint-Benutzers. Das Tutorial zeigt, wie Sie einen einseitigen React-Webanwendungs-Blueprint erstellen. Der Blueprint wird dann verwendet, um ein neues Projekt zu erstellen. Wenn der Blueprint mit Änderungen aktualisiert wird, werden diese Änderungen in das anhand des Blueprints erstellte Projekt über eine Pull-Anfrage übernommen.
**Topics**
+ [Voraussetzungen](#blueprint-getting-started-prerequisites)
+ [Schritt 1: Erstellen Sie einen benutzerdefinierten Blueprint](#react-bluprint-tutorial-create-bp)
+ [Schritt 2: Freigabe-Workflow anzeigen](#blueprint-getting-started-view-workflow)
+ [Schritt 3: Blueprint zum Katalog hinzufügen](#blueprint-getting-started-add-to-catalog)
+ [Schritt 4: Projekt mit Blueprint erstellen](#blueprint-getting-started-create-project)
+ [Schritt 5: Blueprint aktualisieren](#blueprint-getting-started-update-blueprint)
+ [Schritt 6: Aktualisieren Sie die veröffentlichte Katalogversion des Blueprints auf die neue Version](#blueprint-getting-started-update-catalog-version)
+ [Schritt 7: Aktualisieren Sie das Projekt mit der neuen Blueprint-Version](#blueprint-getting-started-update-project)
+ [Schritt 8: Sehen Sie sich die Änderungen im Projekt an](#blueprint-getting-started-view-changes)
## Voraussetzungen
Um einen benutzerdefinierten Blueprint zu erstellen und zu aktualisieren, müssen Sie die folgenden Aufgaben abgeschlossen haben: [Richten Sie ein und melden Sie sich an CodeCatalystRichten Sie ein und melden Sie sich an bei CodeCatalyst](setting-up-topnode.md)
+ Sie müssen über eine AWS Builder-ID verfügen, bei der Sie sich anmelden können CodeCatalyst.
+ Gehören Sie einem Bereich an und lassen Sie sich in diesem **Bereich die Rolle Space-Administrator** oder **Poweruser** zuweisen. Weitere Informationen finden Sie unter [Erstellen einer Umgebung](spaces-create.md), [Benutzern Speicherberechtigungen gewähren](spaces-members.md) und [Umgebungsadministrator-Rolle](ipa-role-types.md#ipa-role-space-admin).
## Schritt 1: Erstellen Sie einen benutzerdefinierten Blueprint
Wenn Sie einen benutzerdefinierten Blueprint erstellen, wird ein CodeCatalyst Projekt erstellt, das Ihren Blueprint-Quellcode sowie Ihre Entwicklungstools und Ressourcen enthält. In Ihrem Projekt werden Sie den Blueprint entwickeln, testen und veröffentlichen.
1. Öffnen Sie die CodeCatalyst Konsole unter [https://codecatalyst.aws/](https://codecatalyst.aws/).
1. Navigieren Sie in der CodeCatalyst Konsole zu dem Bereich, in dem Sie einen Blueprint erstellen möchten.
1. Wählen Sie **Einstellungen**, um zu den Space-Einstellungen zu navigieren.
1. Wählen Sie auf der Registerkarte **Space-Einstellungen** die Option **Blueprints** und dann **Blueprint erstellen** aus.
1. Aktualisieren Sie die Felder im Assistenten zum Erstellen von Blueprints mit den folgenden Werten:
+ Geben Sie im **Feld Blueprint-Name den Wert** ein. `react-app-blueprint`
+ Geben Sie im **Feld Blueprint-Anzeigename den Wert ein**. `react-app-blueprint`
1. Wählen Sie optional **Code anzeigen** aus, um eine Vorschau des Blueprint-Quellcodes für Ihren Blueprint anzuzeigen. Wählen Sie ebenfalls **Workflow anzeigen** aus, um eine Vorschau des Workflows anzuzeigen, der in dem Projekt erstellt und veröffentlicht wird, das den Blueprint erstellt und veröffentlicht.
1. Wählen Sie **Blueprint erstellen** aus.
1. Sobald Ihr Blueprint erstellt wurde, werden Sie zum Projekt des Blueprints weitergeleitet. Dieses Projekt enthält den Blueprint-Quellcode sowie die Tools und Ressourcen, die Sie zum Entwickeln, Testen und Veröffentlichen des Blueprints benötigen. Es wurde ein Release-Workflow generiert, mit dem Ihr Blueprint automatisch im Space veröffentlicht wurde.
1. Nachdem Ihr Blueprint und Ihr Blueprint-Projekt erstellt wurden, besteht der nächste Schritt darin, es zu konfigurieren, indem Sie den Quellcode aktualisieren. Sie können Dev Environments verwenden, um Ihr Quell-Repository direkt in Ihrem Browser zu öffnen und zu bearbeiten.
Wählen Sie im Navigationsbereich **Code** und dann **Dev Environments** aus.
1. Wählen Sie **Create Dev Environment** und dann **AWS Cloud9 (im Browser)**.
1. Behalten Sie die Standardeinstellungen bei und wählen Sie **Create**.
1. Navigieren Sie im AWS Cloud9 Terminal zu Ihrem Blueprint-Projektverzeichnis, indem Sie den folgenden Befehl ausführen:
```
cd react-app-blueprint
```
1. Ein `static-assets` Ordner wird automatisch erstellt und gefüllt, wenn ein Blueprint erstellt wird. In diesem Tutorial löschen Sie den Standardordner und generieren einen neuen Ordner für einen React-App-Blueprint.
Löschen Sie den Ordner static-assets, indem Sie den folgenden Befehl ausführen:
```
rm -r static-assets
```
AWS Cloud9 ist auf einer Linux-basierten Plattform aufgebaut. Wenn Sie ein Windows-Betriebssystem verwenden, können Sie stattdessen den folgenden Befehl verwenden:
```
rmdir /s /q static-assets
```
1. Nachdem der Standardordner gelöscht wurde, erstellen Sie einen `static-assets` Ordner für einen React-App-Blueprint, indem Sie den folgenden Befehl ausführen:
```
npx create-react-app static-assets
```
Wenn Sie dazu aufgefordert werden, geben Sie ein`y`, um fortzufahren.
Eine neue React-Anwendung wurde in dem `static-assets` Ordner mit den erforderlichen Paketen erstellt. Die Änderungen müssen in Ihr CodeCatalyst Remote-Quell-Repository übertragen werden.
1. Stellen Sie sicher, dass Sie über die neuesten Änderungen verfügen, und übertragen Sie die Änderungen anschließend in das CodeCatalyst Quell-Repository des Blueprints, indem Sie die folgenden Befehle ausführen:
```
git pull
```
```
git add .
```
```
git commit -m "Add React app to static-assets"
```
```
git push
```
Wenn eine Änderung in das Quell-Repository des Blueprints übertragen wird, wird der Release-Workflow automatisch gestartet. Dieser Workflow erhöht die Blueprint-Version, erstellt den Blueprint und veröffentlicht ihn in Ihrem Bereich. Im nächsten Schritt navigieren Sie zum ausgeführten Release-Workflow, um zu sehen, wie er funktioniert.
## Schritt 2: Freigabe-Workflow anzeigen
1. **Wählen Sie in der CodeCatalyst Konsole im Navigationsbereich **CI/CD** und dann Workflows aus.**
1. Wählen Sie den **Blueprint-Release-Workflow** aus.
1. Sie können sehen, dass der Workflow Aktionen zum Erstellen und Veröffentlichen des Blueprints enthält.
1. Wählen Sie unter **Letzte Ausführung** den Link Workflow-Ausführung aus, um die Ausführung anhand der von Ihnen vorgenommenen Codeänderung anzuzeigen.
1. Sobald der Lauf abgeschlossen ist, wird Ihre neue Blueprint-Version veröffentlicht. Veröffentlichte Blueprint-Versionen sind in Ihren **Space-Einstellungen** sichtbar, können aber erst in Projekten verwendet werden, wenn sie dem Blueprints-Katalog des Spaces hinzugefügt wurden. Im nächsten Schritt fügen Sie den Blueprint dem Katalog hinzu.
## Schritt 3: Blueprint zum Katalog hinzufügen
Durch Hinzufügen eines Blueprints zum Blueprints-Katalog des Spaces kann der Blueprint in allen Projekten in einem Space verwendet werden. Space-Mitglieder können den Blueprint verwenden, um neue Projekte zu erstellen oder sie zu bestehenden Projekten hinzuzufügen.
1. Navigieren Sie in der CodeCatalyst Konsole zurück zum Bereich.
1. Wählen Sie **Einstellungen** und dann **Blueprints** aus.
1. Wählen Sie **react-app-blueprint**und wählen Sie dann Zum **Katalog hinzufügen** aus.
1. Wählen Sie **Save (Speichern)** aus.
## Schritt 4: Projekt mit Blueprint erstellen
Nachdem der Blueprint dem Katalog hinzugefügt wurde, kann er in Projekten verwendet werden. In diesem Schritt erstellen Sie ein Projekt mit dem Blueprint, den Sie gerade erstellt haben. In einem späteren Schritt aktualisieren Sie dieses Projekt, indem Sie eine neue Version des Blueprints aktualisieren und veröffentlichen.
1. Wählen Sie die Registerkarte **Projekte** und dann **Projekt erstellen** aus.
1. Wählen Sie **Space Blueprints** und dann aus **react-app-blueprint**.
**Anmerkung**
Sobald der Blueprint ausgewählt ist, können Sie den Inhalt der Blueprint-Datei sehen. `README.md`
1. Wählen Sie **Weiter**.
1.
**Anmerkung**
Der Inhalt dieses Assistenten zur Projekterstellung kann im Blueprint konfiguriert werden.
Geben Sie den Projektnamen als Blueprint-Benutzer ein. Geben Sie für dieses Tutorial `react-app-project` ein. Weitere Informationen finden Sie unter [Entwicklung eines maßgeschneiderten Entwurfs zur Erfüllung der Projektanforderungen](develop-bp.md).
Als Nächstes aktualisieren Sie den Blueprint und fügen die neue Version dem Katalog hinzu, mit dem Sie dieses Projekt aktualisieren werden.
## Schritt 5: Blueprint aktualisieren
Nachdem ein Blueprint zum Erstellen eines neuen Projekts verwendet oder auf bestehende Projekte angewendet wurde, können Sie als Blueprint-Autor weiterhin Aktualisierungen vornehmen. In diesem Schritt nehmen Sie Änderungen am Blueprint vor und veröffentlichen automatisch eine neue Version im Bereich. Die neue Version kann dann als Katalogversion hinzugefügt werden.
1. Navigieren Sie zu dem **react-app-blueprint**Projekt, das in erstellt wurde[Tutorial: Eine React-Anwendung erstellen und aktualisieren](#blueprint-getting-started-tutorial).
1. Öffnen Sie die Entwicklungsumgebung, die in erstellt wurde[Tutorial: Eine React-Anwendung erstellen und aktualisieren](#blueprint-getting-started-tutorial).
1. Wählen Sie im Navigationsbereich **Code** und dann **Dev Environments** aus.
1. Suchen Sie in der Tabelle nach der Entwicklungsumgebung und wählen Sie dann **Öffnen in AWS Cloud9 (im Browser)** aus.
1. Als der Blueprint-Release-Workflow ausgeführt wurde, wurde die Blueprint-Version durch Aktualisierung der Datei inkrementiert. `package.json` Übernehmen Sie diese Änderung, indem Sie den folgenden Befehl im Terminal ausführen: AWS Cloud9
```
git pull
```
1. Navigieren Sie zu dem `static-assets` Ordner, indem Sie den folgenden Befehl ausführen:
```
cd /projects/react-app-blueprint/static-assets
```
1. Erstellen Sie eine `hello-world.txt` Datei im `static-assets` Ordner, indem Sie den folgenden Befehl ausführen:
```
touch hello-world.txt
```
AWS Cloud9 ist auf einer Linux-basierten Plattform aufgebaut. Wenn Sie ein Windows-Betriebssystem verwenden, können Sie stattdessen den folgenden Befehl verwenden:
```
echo > hello-world.text
```
1. Doppelklicken Sie in der linken Navigationsleiste auf die `hello-world.txt` Datei, um sie im Editor zu öffnen, und fügen Sie den folgenden Inhalt hinzu:
```
Hello, world!
```
Speichern Sie die Datei.
1. Stellen Sie sicher, dass Sie über die neuesten Änderungen verfügen, und übertragen Sie die Änderungen anschließend in das CodeCatalyst Quell-Repository des Blueprints, indem Sie die folgenden Befehle ausführen:
```
git pull
```
```
git add .
```
```
git commit -m "prettier setup"
```
```
git push
```
Durch das Übertragen der Änderungen wurde der Release-Workflow gestartet, der die neue Version des Blueprints automatisch im Space veröffentlicht.
## Schritt 6: Aktualisieren Sie die veröffentlichte Katalogversion des Blueprints auf die neue Version
Nachdem ein Blueprint zum Erstellen eines neuen Projekts verwendet oder auf bestehende Projekte angewendet wurde, können Sie den Blueprint weiterhin als Blueprint-Autor aktualisieren. In diesem Schritt nehmen Sie Änderungen am Blueprint vor und ändern die Katalogversion des Blueprints.
1. Navigieren Sie in der CodeCatalyst Konsole zurück zum Bereich.
1. Wählen Sie **Einstellungen** und dann **Blueprints** aus.
1. Wählen Sie **react-app-blueprint**und wählen Sie dann **Katalogversion verwalten** aus.
1. Wählen Sie die neue Version und dann **Speichern** aus.
## Schritt 7: Aktualisieren Sie das Projekt mit der neuen Blueprint-Version
Eine neue Version ist jetzt im Blueprints-Katalog des Space verfügbar. Als Blueprint-Benutzer können Sie die Version für das in erstellte Projekt aktualisieren. [Schritt 4: Projekt mit Blueprint erstellen](#blueprint-getting-started-create-project) Dadurch wird sichergestellt, dass Sie über die neuesten Änderungen und Korrekturen verfügen, die zur Einhaltung der bewährten Verfahren erforderlich sind.
1. Navigieren Sie in der CodeCatalyst Konsole zu dem **react-app-project**Projekt, das in erstellt wurde[Schritt 4: Projekt mit Blueprint erstellen](#blueprint-getting-started-create-project).
1. Wählen Sie im Navigationsbereich die Option **Blueprints** aus.
1. Wählen Sie im Infofeld **Blueprint aktualisieren** aus.
1. Im Bereich **Codeänderungen** auf der rechten Seite können Sie die Änderungen `hello-world.txt` und `package.json` Aktualisierungen sehen.
1. Wählen Sie **Update anwenden**.
Wenn **Sie Update anwenden** auswählen, wird im Projekt eine Pull-Anfrage mit den Änderungen aus der aktualisierten Blueprint-Version erstellt. Um die Aktualisierungen am Projekt vorzunehmen, müssen Sie den Pull Request zusammenführen. Weitere Informationen erhalten Sie unter [Überprüfen einer Pull-Anforderung](pull-requests-review.md) und [Zusammenführen einer Pull-Anforderung](pull-requests-merge.md).
1. Suchen Sie in der **Blueprints-Tabelle** nach dem Blueprint. Wählen Sie in der Spalte **Status** die Option **Ausstehende Pull-Anfrage** und dann den Link zum offenen Pull-Request aus.
1. Überprüfe den Pull Request und wähle dann **Merge** aus.
1. Wählen Sie **Fast forward merge**, um die Standardwerte beizubehalten, und wählen Sie dann **Merge** aus.
## Schritt 8: Sehen Sie sich die Änderungen im Projekt an
Änderungen am Blueprint sind jetzt danach [Schritt 7: Aktualisieren Sie das Projekt mit der neuen Blueprint-Version](#blueprint-getting-started-update-project) in Ihrem Projekt verfügbar. Als Blueprint-Benutzer können Sie die Änderungen im Quell-Repository anzeigen.
1. Wählen Sie im Navigationsbereich **Quell-Repositories** und dann den Namen des Quell-Repositorys aus, das bei der Erstellung des Projekts erstellt wurde.
1. Unter **Dateien** können Sie die `hello-world.txt` Datei anzeigen, die in [Schritt 5: Blueprint aktualisieren](#blueprint-getting-started-update-blueprint) erstellt wurde.
1. Wählen Sie die`hello-world.txt`, um den Inhalt der Datei anzuzeigen.
Das Lebenszyklusmanagement bietet Blueprint-Autoren die Möglichkeit, den Softwareentwicklungszyklus jedes Projekts, das einen bestimmten Blueprint enthält, zentral zu verwalten. Wie in diesem Tutorial gezeigt, können Sie Aktualisierungen an den Blueprint weitergeben, die dann von Projekten übernommen werden können, die den Blueprint verwendet haben, um ein neues Projekt zu erstellen oder ihn auf ein vorhandenes Projekt angewendet haben. Weitere Informationen finden Sie unter [Als Blueprint-Autor mit Lifecycle Management arbeiten](lifecycle-management-dev.md).