Kirby CMS Live-Reload-Server

Veröffentlicht von am

unter JavaScript, Kirby CMS, PHP, Node.js, NPM und Werkzeuge

Für einfache Webseiten setze ich gerne Kirby ein: das ist ein flat-file CMS, das in PHP geschrieben ist.

Was ist ein Flat-File Content Management System?

Bei einem Flat-File Content Management System werden die Textinhalte ausschließlich in Dateien gespeichert. Mehr dazu auf Wikipedia.

Um für die Entwicklung einen lokalen PHP-Server zu starten, setzt man in der Regel Programme wie XAMPP oder MAMP ein, da diese neben einem lokalen Webserver auch eine Datenbank (meist MySQL) mitbringen.

Da Kirby keine Datenbankanbindung benötigt (als Flat-File CMS benötigt es keine Datenbank), kann man es auch über den in PHP eingebauten Server laufen lassen, und ist so nicht auf XAMPP oder MAMP angewiesen:

$ php -S localhost:8000 kirby/router.php

Das hat bei mir bis jetzt immer einwandfrei funktioniert (dazu bitte die Hinweise auf der Kirby-Webseite beachten), allerdings hätte ich zum komfortablen Entwickeln gerne noch eine Live-Reload-Funktionalität.

Glücklicherweise lässt sich diese über den JavaScript-Packagemanager NPM relativ einfach nachrüsten, denn neben der Paketverwaltung bietet NPM noch eine weitere, praktische Funktion: Das einfache Ausführen von Scripts per npm run.

Dazu ist zunächst eine package.json Datei im Rootverzeichnis des Kirby-Projekts notwendig (falls noch nicht vorhanden kann sie per npm init erstellt werden).

Danach sollten per npm install --save-dev browser-sync concurrently die beiden Pakete browser-sync und concurrently installiert werden.

Als nächstes eine Datei namens browsersync.js, im Rootverzeichnis des Projektes anlegen, mit folgendem Inhalt:

const browserSync = require( 'browser-sync' );
const syncOptions = require( './package.json' ).browserSync;
const filesToWatch = syncOptions.watch || [ ];
const filesToIgnore = syncOptions.ignore || [ ];
const proxy = syncOptions.proxy;

const sync = browserSync.create();

sync.init( {
	watch: true,
	proxy,
	files: filesToWatch,
	ignore: filesToIgnore,
	open: 'local'
} );

In dieser Datei wird der Browsersync Server gestartet, mit den in der package.json definierten Optionen. Weitere Informationen zu den möglichen Optionen gibt es auf der Dokumentationsseite von Browsersync.

Bevor man den Server starten kann, müssen in der package.json Datei noch ein paar Änderungen vorgenommen werden:

{
	"name": "kirby-browsersync-demo",
	"version": "1.0.0",
	"description": "My Kirby Browsersync Demo",
	"scripts": {
		"serve": "concurrently \"npm run serve-php\" \"npm run sync\"",
		"serve-php": "php -S localhost:8000 kirby/router.php &> /dev/null",
		"sync": "node browsersync.js"
	},
	"devDependencies": {
		"browser-sync": "^2.26.7",
		"concurrently": "^5.0.0"
	},
	"browserSync": {
		"proxy": "localhost:8000",
		"watch": [
			"assets",
			"content",
			"site/snippets",
			"site/templates",
			"site/blueprints",
			"site/languages"
		],
		"ignore": [
			"**/.lock",
			"**/.DS_Store"
		]
	}
}

Die Einträge im einzelnen:

  • Unter scripts:
  • serve-php Startet den in PHP eingebauten Webserver und unterdrückt alle 200 Access logs (sind sehr viele)
  • sync Startet den BrowserSync Server
  • serve Startet serve-php und sync gleichzeitig
  • Unter browserSync werden die Optionen für den Browsersync Server definiert:
  • proxy: Die Adresse des PHP Servers
  • watch: Die Ordner, die BrowserSync beobachten soll. Falls sich darin eine Datei ändert, wird die Seite neu geladen
  • ignore: Dateien, die keinen Reload auslösen sollen

Falls alles funktioniert hat, kann man jetzt per

npm run serve

das Projekt starten. Es sollte sich automatisch ein neues Browserfenster mit dem Projekt öffnen.

Wichtig dabei: BrowserSync funktioniert nur, wenn es in dem ausgelieferten HTML ein <body>-Element gibt (weitere Informationen dazu hier).

Hinterlasse einen Kommentar

Verfügbare Formatierungen

Benutze Markdown-Befehle oder ihre HTML-Äquivalente, um deinen Kommentar zu formatieren:

Textauszeichnungen
*kursiv*, **fett**, ~~durchgestrichen~~, `Code` und <mark>markierter Text</mark>.
Listen
- Listenpunkt 1
- Listenpunkt 1
1. Nummerierte Liste 1
2. Nummerierte Liste 2
Zitate
> Zitierter Text
Code-Blöcke
```
// Ein einfacher Code-Block
```
```php
// Etwas PHP-Code
phpinfo();
```
Verlinkungen
[Link-Text](https://example.com)
Vollständige URLs werden automatisch in Links umgewandelt.

Auf der eigenen Website geantwortet? Sende eine Webmention!