Abstract

Shows how to develope your web presence using, the great flat file CMS, Grav in a comfortable and efficient manner together with Visual Code and browser-sync.

Efficient and comfortable means:

• changes are immediatley visible
• intellisense driven development

Introduction

Grav is a so called flat file CMS ( Content Management System ). This means that everything is stored using files and no database is involved, not even SQLite. This brings, besides the advantages of having a small disk footprint and serving the content in a very fast manner to the visitors browser, also some other advantages during the development phase:

• the entire content can be stored in git and every change is comprehensible
• the CMS can also be seen as a PHP project editable with your favorite web development IDE

My most favorite Web development IDE in Linux is called Visual Code. It provides intellisense for PHP but also for Twig and of course also for CSS, HTML and Markdown. Markdown is used in Grav to write content for the CMS. So you are well prepared for not only writing content for your CMS but also for developing/changing Themes.

Themes are used to display your content. As much as I appreciate the extensive selection of themes that the Grav community shares I came quickly to the point where I wanted to modify a Theme to better fit my needs. I used the anitmatter theme and wanted to have a footer listing my contact data and a sitemap on every page of my site.

The most important thing that I wanted to have was a auto refresh feature. So that when I change a file by typing and using Visual Codes autosave feature the changes are immediatley shown in an opened browser.

Instructions

Install following Extensions in Code:

• PHP Server from brapifra
• Twig from whatwedo

Install browser-sync (here in Fedora Linux):

dnf install npm
npm install -g browser-sync

Configure Visual Code

• enable autosave (this is disabled by default in Visual Code)

Configure PHP Server

• set Router setting to system/router.php

• Set Server IP (it must not be the loopback interface (127.0.0.1). I don't know why but browser-sync had problems with the loopback interface) and check if the port is set to 3000.

Now start Visual Code in the root directory of your Grav folder. Open index.php in Visual Code and right click the opened editor and then choose PHP Server: Serve Project. A server will start in background.

Now open up a new terminal and execute the following code.

cd [Directory of your Project]
browser-sync start -p localhost:3000  -f "**/*.md" -f "**/*.php" -f "**/*.css" -f "**/*.twig"  --port 44004

This will start a new browser instance. The content will automatically refresh as you type in any opened .md, .php, .css ord .twig file in Visual Code. The only thing you have to keep in mind is that it doesn't automatically navigate to the correct url. So when you change content that affects page A and you are on page B it won't navigate to page A automatically.

The command observes every file for changes by listening to filesystem events using Linux's inotify interface. The number of files you can observe is however limited. The following command increases this number:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf 
fs.inotify.max_user_watches=524288