Teil 1/5: Wie wir Projekte mit Contao umsetzen - Das Nutshell Starterkit
Moin!
Im heutigen ersten Teil geht es um das Nutshell Starterkit – und wie wir es einsetzen, um Projekte schneller einzurichten. Das Starterkit 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 Installation (inkl. News, Events etc.) und den Theme-Dateien auch ein paar Beispieldateien (die mit .example enden).
Eine dieser Dateien ist die .env.example, die wir nach dem Kopieren und Umbenenne dafür nutzen, um die Datenbank-Zugangsdaten an Contao zu übergeben. Ergänzt wird diese durch die config.yml.example, die u.a. ein paar Basiseinstellungen wie Lizenz akzeptieren, Zeitzone und maximale Dateigrößen und -maße enthält.
Außerdem gibt es noch eine package.json.example, in der Abhängigkeiten definiert sind, um gulp mit unseren am häufigsten genutzten Plugins zu installieren. Damit gulp funktioniert, müssen wir im letzten Schritt noch die gulpfile.js.example kopieren, umbenennen und die Variablen wie zum Beispiel die URL des Virtual Host anpassen.
Nach der Installation befindet sich außerdem im Projektverzeichnis ein neuer Ordner theme. In diesem Ordner befindet sich das eigentliche Theme, also 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 kann ich nun meine Layout-Anweisungen hinterlegen und gulp macht daraus dann eine CSS-Datei, die z.B. über das Contao Seitenlayout oder die fe_page eingebunden werden kann.
Aber gulp macht noch mehr.
Damit wir während der Layout-Umsetzung wertvolle Zeit sparen, verwenden wir Browser-Sync, oder besser gesagt die dort enthaltene Funktion Livereload. Livereload aktualisiert die Darstellung im Browser (mittels CSS-Injection), sobald eine SCSS-Datei gespeichert wird. Das ist gerade wenn man auf mehreren Bildschirmen arbeitet praktisch, da man den Browser nicht mehr von Hand aktualisieren muss und die Änderungen direkt sieht.
Außerdem ergänzt gulp noch notwendige Vendor-Prefixes und schlägt Alarm, sollte die erzeugte CSS-Datei einen Fehler enthalten.
Diese 3 Funktionen – also Livereload, Vendor-Prefixes und Validierung der CSS-Anweisungen – sind nur in einer Entwicklungsumgebung möglich. Solltest du noch direkt auf dem Server entwickeln, musst du diese Funktionen bisher selbst ausführen, die eigentlich auch eine Maschine machen könnte (und das vermutlich sehr viel besser).
Was dem Starterkit momentan noch fehlt sind Datenbankinhalte. Das heißt du musst nach der Installation momentan noch einen Seitenstartpunkt, ein Theme und ein Seitenlayout anlegen. Genauso Beispiel-Inhalte, damit du im Frontend etwas zu sehen bekommst. Das soll sich aber spätestens mit der nächsten LTS-Version, Contao 5.3 ändern.
Die komplette Projekt-Einrichtung dauert bei mir mittlerweile etwa 5-10 Minuten. Wenn ich im Team arbeite, müssen aber nicht alle Team-Mitglieder alle Schritte erneut durchführen.
Wie das funktioniert, verrate ich dir im zweiten Teil, wenn ich dir davon erzähle, wie wir Gitlab fürs Projektmanagement und die „Synchronisierung“ von Projektständen nutzen. Achte auf den Betreff Teil 2/5: Wie wir Gitlab für Projektmanagement und die Entwicklung nutzen.
Hast du Fragen zum Nutshell Starterkit? Dann antworte einfach auf diese Mail.
Viele Grüße und bis nächste Woche,
Dennis