Erste Schritte mit der Scrivito Example App

Erste Schritte mit der Scrivito Example App

Wenn Sie Scrivito ausprobieren oder Ihre eigene Scrivito-basierte Website erstellen möchten, haben wir eine mit viel Funktionalität ausgestattete Beispielanwendung für Sie, die Sie lokal installieren können. So können Sie sich ein Bild davon machen, wie leicht eine Web-Anwendung mit Scrivito entwickelt werden kann.

Was ist Scrivito?

Die Scrivito Example App erfordert etwas Erfahrung im Bereich der Web-Entwicklung, Sie brauchen jedoch kein JavaScript-Experte zu sein, um diese App nutzen zu können!

Die Scrivito Example App in sechs Schritten lokal installieren

1Registrieren Sie sich bei uns

Haben Sie sich bereits bei uns auf my.scrivito.com registriert? Falls nicht, ist dies der erste Schritt, um ein kostenfreies Scrivito CMS zum Testen zu erhalten, mit dem Sie Ihre Inhalte aus der Example App heraus pflegen können.

2Klonen Sie die Scrivito Example App

Klonen Sie die Example App auf https://github.com/Scrivito/scrivito_example_app_js oder laden Sie sie dort herunter. Um sie zu klonen, öffnen Sie ein Terminal, wechseln Sie in das Verzeichnis, in dem Ihre Projekte liegen, und führen Sie dann Folgendes aus:

Hierdurch wird ein Unterverzeichnis angelgt, das denselben Namen wie das Repository trägt, „scrivito_example_app_js“.

3Installieren Sie die erforderlichen Tools und Module

Auf Ihrem Rechner müssen node (>= 12.0.0) und npm (>= 7.0.0) installiert sein. Für beides können Sie ein Installationsprogramm von https://nodejs.org/en/download/ herunterladen oder die Komponenten einzeln installieren, wenn Sie Homebrew verwenden. Da node auch npm enthält, dürfte Folgendes ausreichen:

Lassen Sie nun npm sämtliche Module installieren, von denen die App abhängt:

4Geben Sie das zu nutzende Scrivito CMS an

Die Scrivito Example App benötigt die ID Ihres CMS. Um sie zu ermitteln und anzugeben, gehen Sie folgendermaßen vor:

  • Wechseln Sie zu Ihrem Scrivito-Account.
  • Wenn Sie noch kein CMS haben, legen Sie eines an.
  • Klicken Sie auf die zu verwendende CMS-Instanz.
  • Öffnen Sie den „Settings“-Tab.
  • Kopieren Sie die ID hinter SCRIVITO_TENANT= in die Zwischenablage.
  • Öffnen Sie in Ihrem Projektverzeichnis die Datei „.env.example” und fügen Sie die ID hinter SCRIVITO_TENANT= ein. Speichern Sie dann die Datei unter dem Namen „.env“ ab. Ihr Inhalt sollte folgendermaßen aussehen:

5Setzen Sie die CORS-Quellen

Damit Ressourcen zwischen Ihrem CMS und Ihrer Web-Anwendung geteilt werden können, geben Sie die URL(s) Ihrer App in den CMS-Einstellungen („Settings“) an.

  • Navigieren Sie zum „Deployments“-Tab des CMS, das Sie mit Ihrer App verwenden möchten.
  • Klicken Sie auf “Edit” im Bereich “Other authorized URLs”.
  • Tragen Sie zusätzliche CORS-Quellen und lokale URLs ein, über die auf Ihre App zugreifbar sein soll, beispielsweise http://localhost:8080.

6Starten Sie den Webserver

Für die App-Entwicklung können Sie einen lokalen Webserver starten. Führen Sie hierfür aus dem Projektverzeichnis der Scrivito Example App heraus Folgendes aus:

Dies öffnet http://localhost:8080 in Ihrem Standard-Browser. Änderungen, die am „src“-Unterverzeichnis vorgenommen werden, bewirken, dass die App mit der aktuellen Seite neu geladen wird.

Fehler in der App, verursacht beispielsweise durch nicht richtig funktionierende React-Komponenten) werden in der Browser-Konsole ausgegeben, nicht im Terminal-Fenster. In letzterem werden lediglich Fehler beim Kompilieren, Probleme mit verwendeten Bibliotheken etc. protokolliert.

Fertig! Und jetzt?

Wenn alles nach Plan verlaufen ist, können Sie nun Ihre Scrivito Example Application nutzen! Um Inhalte mit der Benutzeroberfläche zu erstellen oder zu bearbeiten, öffnen Sie einfach edit.scrivito.com in Ihrem Browser und geben http://localhost:8080/ als die URL Ihrer App an.

Beachten Sie bitte, dass das Layout, Design und Bildmaterial der Example App gelegentlich aktualisiert werden, um aktuellen Trends, neuen Einsatzgebieten usw. Rechnung zu tragen.

Inhalte mit Scrivito direkt bearbeiten

Mit Scrivito werden sämtliche Bearbeitungen in Arbeitskopien durchgeführt. Mit Hilfe der Leiste auf der rechten Seite können Sie Arbeitskopien anlegen und veröffentlichen oder die Liste der Änderungen öffnen, um zu sehen, was bis jetzt geändert wurde. Erfahren Sie mehr über Arbeitskopien und die veröffentlichten Inhalte.

Scrivitos Web-Interface zur Bearbeitung von Inhalten ist leicht zu bedienen: Wandern Sie mit dem Mauszeiger über die Seite, um die Widget-Rahmen sichtbar zu machen. Klicken Sie auf eines der Plus-Zeichen auf einem Rahmen, um ein Widget hinzuzufügen, oder verwenden Sie den kleinen „Griff“ rechts oben, um das Widget-Menü zu öffnen oder das Widget an eine andere Stelle auf der Seite zu ziehen. In der Anleitung für Redakteure finden Sie viele weitere nützliche Tipps.