Building an API-first Web App with Gentics Mesh and the PHP Microframework Silex

In this blogpost we would like to show you how easy it is to use Gentics Mesh in combination with Silex, a microframework for PHP.

All needed dependencies were added to the composer.json. You can use the PHP Composer to download these.

The following steps are needed to set up the example:

Once set up you should be able to access the running Apache instance via http://localhost.

The example consists of a small website which lists various vehicles from our demo data. The vehicles are grouped into categories which can be browsed individually. The example also features a small breadcrumb and image handling via Gentics Mesh.

The main logic of our example is located within the index.php file. Note: The example contains some PHP 7 features. You can also use older PHP versions if you remove the type information from the functions.

All Apache requests will be redirected to the index.php file using the .htaccess rules. The Silex route handler accepts these requests and processes them.

The Gentics Mesh webroot API makes it very easy to find contents for a corresponding web path. As such all request paths are passed along to this API in order to load the corresponding node.

In our example, a node can either be a node of type 'category', 'vehicle' or 'vehicleImage'. The schema type information of a node is used to switch between different pages. Loading a category node for example will result in the product list template to be rendered. A product node on the other hand will result in a product detail page.

We use the Twig template engine to render the templates. This template format is directly supported by Silex and very easy to set up.

In our example we make use of template inheritance which is a great way to structure the templates and reuse common parts.

The base.twig template contains the needed includes and definitions for the Twitter Bootstrap template.

By default a breadcrumb navigation is added to each page. We moved the code for the navigation into the navigation.twig file. The Gentics Mesh Navigation Root API is used to load the needed breadcrumb information for the root level.

Hint: In our example only a single level is used and as such the navigation is not changing. In more complex examples the Navigation Root API can also be used to build up multi-level menus which can also be affected by user permissions.

The welcome.twig template just displays some information about the example for requests to the index page. (e.g. http://localhost/).

The productList.twig template is used to display categories. A category can contain multiple products. The template contains a simple loop which iterates over all products in order to display each one. The /api/v1/demo/nodes/:categoryUuid/children endpoint of Gentics Mesh is used here to load all products for a certain category.

Hint: All endpoints which return lists of items can be easily paged. If you plan to display much more items it would be good to also render a paging element.

The productDetail.twig template is finally used to display all product information on a single page. In this case it is sufficient to pass the resolved Node directly to the template. The needed files can thus be directly used. e.g.: {{ product.fields.description }}.

Finally the whole project can also be packaged into a single docker container using the provided Dockerfile. The apache rewrite module must be enabled in order to support the .htaccess redirection rules.

We hope this example was informative and showed you how easy it is to utilize Silex in combination with Gentics Mesh to build a small template based website.

Feel free to drop a comment if you have and questions or feedback about the shown implementation.

This is the first of a series of articles to show what’s possible with our API-First CMS Gentics Mesh:

You can also find this example on GitHub: https://github.com/gentics/mesh-silex-example

Title photo by Lisa Zoe via unsplash