Projektstart mit dem Nutshell Starterkit

Teil 1 unserer Serie zum Projekt-Workflow — einen Überblick über alle Ansätze gibt Fünf Ansätze, ein Contao-Projekt umzusetzen.

Mit dem Nutshell Starterkit richten wir Projekte deutlich schneller ein. Es lässt sich genauso wie Contao über einen Befehl in der Kommandozeile installieren:

composer create-project nutshell-framework/starterkit [path] [branch]

Nach der Installation haben wir neben einer vollständigen Contao-Installation (inkl. News, Events etc.) und den Theme-Dateien auch ein paar Beispieldateien, die auf .example enden:

• .env.example — nach dem Kopieren und Umbenennen übergibt die .env die Datenbank-Zugangsdaten an Contao (mehr dazu in Umgebungsvariablen in Contao: die Dotenv)
• config.yml.example — enthält u. a. Basiseinstellungen wie Lizenz akzeptieren, Zeitzone sowie maximale Dateigrößen und -maße
• package.json.example — definiert die Abhängigkeiten, um gulp mit unseren am häufigsten genutzten Plugins zu installieren
• gulpfile.js.example — kopieren, umbenennen und Variablen wie die URL des Virtual Host anpassen, damit gulp funktioniert

Das Theme-Verzeichnis

Nach der Installation liegt im Projektverzeichnis außerdem ein neuer Ordner theme. Darin befindet sich das eigentliche Theme, unter anderem die SCSS-Dateien. Sie bilden die Grundstruktur für das Theme und sind — abgesehen von einem Import ihres jeweiligen Pendants aus dem Nutshell Framework — leer.

Hier hinterlegst du deine Layout-Anweisungen, und gulp macht daraus eine CSS-Datei, die z. B. über das Contao-Seitenlayout oder die fe_page eingebunden werden kann.

Was gulp sonst noch übernimmt

Damit wir während der Layout-Umsetzung wertvolle Zeit sparen, verwenden wir Browser-Sync bzw. die darin enthaltene Funktion Livereload: Sie aktualisiert die Darstellung im Browser (mittels CSS-Injection), sobald eine SCSS-Datei gespeichert wird. Gerade beim Arbeiten mit mehreren Bildschirmen ist das praktisch, weil du den Browser nicht mehr von Hand aktualisieren musst und Änderungen direkt siehst.

Außerdem ergänzt gulp notwendige Vendor-Prefixes und schlägt Alarm, sollte die erzeugte CSS-Datei einen Fehler enthalten.

Diese drei Funktionen — Livereload, Vendor-Prefixes und Validierung der CSS-Anweisungen — sind nur in einer Entwicklungsumgebung möglich. Wer direkt auf dem Server entwickelt, muss diese Aufgaben selbst erledigen, obwohl das eine Maschine vermutlich sehr viel besser könnte.

Einschränkung: Datenbankinhalte

Was dem Starterkit fehlt (Stand: vor Contao 5.3), sind Datenbankinhalte. Nach der Installation musst du also noch einen Seitenstartpunkt, ein Theme und ein Seitenlayout anlegen — genauso wie Beispielinhalte, damit du im Frontend etwas zu sehen bekommst. Mit der LTS-Version Contao 5.3 sollte sich das ändern.

Die komplette Projekt-Einrichtung dauert damit etwa 5–10 Minuten. Und wer im Team arbeitet, muss nicht alle Schritte für jedes Team-Mitglied erneut durchführen — wie das funktioniert, liest du in Teil 2: GitLab für Projektmanagement und Entwicklung.