Kirby CMS Live-Reload-Server

Published by on

under JavaScript, Kirby CMS, PHP, NPM and Tooling

For simple websites I like to use Kirby: a flat-file CMS written in PHP.

What is a Flat-File Content Management System?

With a flat-file content management system, text content is stored exclusively in files. More about this on CmsCritic.

To start a local PHP server for the development, you usually use programs like XAMPP or MAMP, because they bring along a local web server and a database (mostly MySQL).

Since Kirby doesn't need a database connection (as a flat-file CMS it doesn't need a database), you can also run it on the PHP built-in server, so you don't need XAMPP or MAMP:

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

This has worked fine for me so far but please have a look at the notes on the Kirby website regarding this topic.

For a nicer development experience, I prefer to have a live reload server running that refreshes the page on file change.

Fortunately, this is functionality can be added relatively easy using the JavaScript package manager NPM. In addition to package management, it also offers another useful functionality: The simple execution of scripts via npm run.

To get started, add a package.json file in the root directory of the Kirby project (it can be generated with npm init).

After that install the packages browser-sync and concurrently with npm install --save-dev browser-sync concurrently.

Next, create a file called browsersync.js, in the root directory of the project, with the following content:

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 this file the browser sync server is started, with the options defined in the package.json. More information about the possible options can be found on the documentation page of Browsersync.

Before you can start the server, some changes have to be made in the `package.json' file:

{
	"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"
		]
	}
}

The entries in detail:

  • scripts:
  • serve-php Starts the build-in PHP webserver and supresses all 200 messages (the console output is very verbose)
  • sync Starts the BrowserSync server
  • serve Starts serve-php and sync simultaneously
  • Under 'browserSync' the options for the browser sync server are defined:
  • proxy: The address of the PHP server
  • watch: The folders that BrowserSync should watch. If a file in them changes, the page is reloaded
  • ignore: Files that should not trigger a reload

If everything has worked, you can now use

npm run serve

to start the project. A new browser window with the project should open automatically.

Important note: BrowserSync only works if there is a <body> element in the delivered HTML (more information here).

More articles:

Leave a comment

Available formatting commands

Use Markdown commands or their HTML equivalents to add simple formatting to your comment:

Text markup
*italic*, **bold**, ~~strikethrough~~, `code` and <mark>marked text</mark>.
Lists
- Unordered item 1
- Unordered list item 2
1. Ordered list item 1
2. Ordered list item 2
Quotations
> Quoted text
Code blocks
```
// A simple code block
```
```php
// Some PHP code
phpinfo();
```
Links
[Link text](https://example.com)
Full URLs are automatically converted into links.

Replied on your own website? Send a Webmention!