Neos Flow Applikation mit Fusion, AFX und DDEV

In diesem Beitrag schauen wir uns an, wie man eine Neos Flow Applikation mit Hilfe des Docker-Toolings DDEV einfach aufsetzen kann. Dabei verwenden wir auch die empfohlenen View/Templating-Technologien Fusion und AFX.

DDEV installieren, Docker Daemon starten

Zuerst müssen wir DDEV installieren, folge der Anleitung.

Anschliessend stelle sicher, dass Docker bei dir gestartet ist.

App-Verzeichnis erstellen und DDEV konfigurieren

Führe folgende Befehle aus:

mkdir demo-app
cd demo-app
ddev config
# Set a project name or use the already proposed name (which would be in our case "demo-app")
# Docroot Location: set to "Web"
# Project type: set "php"

Setze das Docroot Verzeichnis auf den Wert Web.

Konfiguriere zudem eine aktuelle PHP-Version (für Flow 8.x PHP 8.0-8.1), eine passende Datenbank und einige nötige Flow Umgebungsvariablen.

Öffne die DDEV Konfig-Datei .ddev/config.yaml und passe diese wie folgt an:

...
php_version: "8.1"
webserver_type: apache-fpm
database:
  type: mariadb
  version: "10.4"
web_environment:
  - FLOW_CONTEXT=Development
  - FLOW_PATH_TEMPORARY_BASE=/tmp/demo-app
  - FLOW_REWRITEURLS=1
nodejs_version: "16"
...

Mehr DDEV Konfigurations-Möglichkeiten findest du in ihrer Dokumentation.

Flow Applikation Gerüst erstellen

Erstelle als nächstes mit den Befehlen ddev und composer (mehr zu DDEV und Composer) ein erstes Gerüst für unsere Flow Applikation basierend auf dem Flow Base Distribution Repository.

ddev composer create neos/flow-base-distribution
# Confirm that any existing content in the project root will be removed

Dieser Befehl kann einige Minuten dauern, da initial die nötigen DDEV Container Images heruntergeladen werden müssen.

Nachdem erhalten wir ein leeres Gerüst um später eine Flow Applikation zu entwickeln.

Starte die Applikation mit:

ddev start

Mit ddev describe erhält man alle Infos zur Applikation, z.B. wie die Url für den Webserver lautet, etc.

Für unsere Applikation lautet diese: https://demo-app.ddev.site

Beim Öffnen unserer Applikation im Browser erscheint noch eine Fehlermeldung. Damit unsere leere Flow Applikation funktioniert, müssen wir noch eine korrekte Settings.yaml bereitstellen.

Flow Applikation konfigurieren

Erstelle eine Configuration/Settings.yaml Datei mit folgendem Inhalt:

Neos:
  Imagine:
    driver: Imagick
  Flow:
    persistence:
      backendOptions:
        driver: 'pdo_mysql'  # use pdo_pgsql for PostgreSQL
        charset: 'utf8mb4'   # change to utf8 when using PostgreSQL
        dbname: db
        user: db
        password: db
        host: db

    # The following lines register the Flow default routes
    # For productive use you should move this setting to the main package of this
    # application and/or create custom routes.
    mvc:
      routes:
        'Neos.Flow': TRUE

    # The following is necessary to allow ddev to act as a proxy on your local machine
    http:
      trustedProxies:
        proxies: "*"

  # The following is optional, but will redirect all mails directly to ddev's MailHog
  SwiftMailer:
    transport:
      type: 'Swift_SmtpTransport'
      options:
        host: 'localhost'
        port: 1025
        encryption: ~

Diese Konfiguration wird beim nächsten Laden direkt geladen und die Flow Applikation sollte nun korrekt funktionieren: https://demo-app.ddev.site

Flow Applikation Package erstellen

Erstelle nun das Flow Applikations-Package:

ddev exec ./flow kickstart:package Demo.App

Dieser Befehl erstellt das Grundgerüst für ein Flow Package. Dieses befindet sich im folgenden Verzeichnis: DistributionPackages/Demo.App.

Die Applikation steht nun bereit und eine erste Index Seite kann aufgerufen werden: https://demo-app.ddev.site/demo.app

Fusion und AFX einrichten

Um eine Flow Applikation mit Fusion und AFX zu entwickeln müssen bestimmte Befehle und Konfigurationen ausgeführt werden.

Die nächsten Schritte sind angelehnt an den folgenden Neos Dokumentationen:

• Flow Fusion template support
• Creating AFX-based Applications / Backend Modules

Erstelle einen ersten Controller für unsere Applikation:

ddev exec ./flow kickstart:actioncontroller --generate-fusion --generate-actions --generate-related Demo.App BlogArticle

Mit der Option --generate-fusion wird ein Grundgerüst mit Fusion Templates erstellt.

Wir können nun unseren Controller wie folgt aufrufen: https://demo-app.ddev.site/demo.app/blogarticle

Wir erhalten aber noch folgenden Fehler:

”View class has to implement ViewInterface but "Neos\Fusion\View\FusionView" in action "index" of controller "Demo\App\Controller\BlogArticleController" does not.”

Damit Fusion und AFX funktionieren, müssen noch die benötigten Dependencies und Flow Konfigurationen installiert und konfiguriert werden.

Installiere die Dependencies:

ddev composer require neos/fusion neos/fusion-afx neos/fusion-form

Löschen den Flow Cache und lade die Package-Liste neu:

ddev exec ./flow flow:cache:flush --force
ddev exec ./flow neos.flow:package:rescan

Wenn nun die Applikation mit https://demo-app.ddev.site/demo.app/blogarticle aufgerufen wird, sollte eine korrekte Seite angezeigt werden.

Wenn folgende Fehlermeldung erscheint:

Call to a member function parse() on null

dann muss noch die Konfig unter Configuration/Views.yaml korrekt eingegeben werden.

Wenn nötig, erstelle die Datei Configuration/Views.yaml neu mit folgendem Inhalt:

- requestFilter: 'isPackage("Demo.App")'
  viewObjectName: 'Neos\Fusion\View\FusionView'
  options:
    fusionPathPatterns:
      - 'resource://Neos.Fusion/Private/Fusion'
      - 'resource://Demo.App/Private/Fusion'

Flow Applikation Ready

Die neue Flow Applikation mit Fusion und AFX ist nun bereit und kann weiter entwickelt werden. Aktuell erscheint noch eine Fehlermeldung bez. Datenbank-Zugriff, wenn auf https://demo-app.ddev.site/demo.app/blogarticle zugegriffen wird. Hier fehlen noch die entsprechenden Datenbank-Initialisationen, das wäre dann ein nächster Schritt zum Angehen :).

Done - DDEV und Applikation herunterfahren

Die Flow Applikation kann mit folgendem Befehl vollständig heruntergefahren werden:

ddev poweroff
# Or if you only want to stop your container use: ddev stop

Weitere DDEV CLI Commands sind hier dokumentiert.