Make it Yours: Extending Sulu for Custom Application Requirements

A closed-source software company regards its source code as an asset to protect. This demand to protect software internals severely limits the ability of others to build useful extension interfaces. Every data structure and every function exposed through an API is a possible threat to the closed-source model.

With free and open-source software (FOSS), the game changes completely. Open source code removes any restrictions on building extensions. There are countless examples of open-source software that have fostered a thriving ecosystem of extensions, customizations, and integrations. Symfony comes to mind, but also Linux, Kubernetes, Magento,… the list goes on.

Consider the CMS landscape. Almost all CMSs function as frameworks, offering a convenient environment for managing and publishing content online. The true measure of a framework’s quality emerges when you push its boundaries. While proprietary frameworks typically confine you within their limitations, open-source frameworks not only empower you to overcome these boundaries but also provide a solid foundation for integrating a wide range of extensions.

Sulu CMS is definitely in that category. In this article, we’ll take you on a tour to visit all the places where you can extend Sulu to your liking and make it truly yours.

First, let’s examine the basics that make extensibility possible. Sulu was built from the ground up to be extensible, and this becomes apparent in two aspects: its roots within the Symfony ecosystem and its architecture.

Sulu is a Symfony application

The Symfony framework is well-designed and mature, and Sulu is a native Symfony application. As a Symfony developer, you’ll immediately recognize the benefits Sulu offers out of the box. Sulu follows Symfony’s MVC architectural pattern and provides reusable components, allowing seamless interaction with other Symfony applications. Additionally, Sulu provides excellent extensibility through Symfony bundles offering a variety of ready-to-use bundles and the ability to create your own.

Sulu is a decoupled CMS

From the ground up, Sulu is designed to be a decoupled CMS with clear boundaries between building blocks. Entities represent the data layer, controllers represent the business logic, and views represent the frontend. Decoupling allows you to choose from different options. For example, you can use Sulu’s rendering engine to deliver complete HTML pages to the frontend or only use the data API and build a single-page application with React.

Decoupling is important for extensibility. A system with a clean internal separation of concerns is easier to interact with at any given layer. Whether synchronizing information at the database level, connecting to external business logic, or building a custom Web UI, there is always a clear, layer-specific interface available.

Sulu’s modular, decoupled architecture provides numerous options for extending existing, or adding new, functionality.

Custom entities: define custom data models

When your site grows beyond the “homepage plus blog” stage, you’ll probably want to include custom content like a portfolio or product catalog. In Sulu, data is represented by Entity objects, and their corresponding storage is modeled by a Repository object, allowing for easy addition of custom data models.

The Sulu Cookbook describes the details of creating a custom book entity.

Custom controllers: implement application-specific logic

Controllers contain the business logic of a web application. To add custom functionality to your website, a controller is a good place to start. Controllers can be used for tasks like the following:

• Deliver non-static content, like live statistics or a list of products, along with their current number in stock
• Include content from external services, like your CRM system or a third-party data source
• Provide custom forms

Writing a custom controller is quite straightforward; see this example of a controller that renders the current moon phase.

Bundles: pluggable modules for adding features

If you want your custom functionality to be reusable with other applications, consider writing the functionality as a Symfony bundle. Symfony bundles allow you to build custom functionality that can interact with the Symfony ecosystem in a standardized way. Sulu is a typical Symfony application built with bundles. Symfony developers with experience in creating bundles can re-use their knowledge to extend Sulu. No need to learn new concepts or paradigms.

Our admin UI is uniquely designed. It provides a straightforward path for integrating custom entities without deep frontend knowledge. Sulu’s roots in Symfony let developers leverage Symfony’s best practices and components to provide a seamless development experience. This is a great advantage for backend developers who prefer working in PHP and Symfony.

How the admin UI can be extended

Let’s assume you plan to write a new custom entity and want to provide an admin view for it. All you need are a few low-effort steps.

1. When you implement your entity, expose a set of REST API endpoints that the admin UI can use to interact with the entity.
2. Define metadata describing how the entity should be displayed and edited in the admin UI.
3. Register the entity’s admin routes to expose them to the frontend.
4. Set up the entity’s admin UI components (like navigation items and views) in a central PHP admin class.
5. Customize the generated admin UI further if needed using Sulu’s pre-built configurable frontend components or by adding custom JavaScript code at provided extension points.

This layered approach enables a comprehensive and cohesive integration of custom entities into the Sulu Admin UI.

Sulu’s decoupled architecture allows you to go one step further and make Sulu a headless CMS that delivers page contents as structured data via API. A separately programmed frontend can access the API to fetch the data it needs, taking over all the rendering and user interaction, whether inside a browser, mobile app, or other digital interface.

Sulu draws a clear line between content and presentation

Going headless is effortless in Sulu because of the clear separation of content from presentation. Sulu comes with an HTML renderer, but for creating a headless CMS, the rendering process can be bypassed in favor of a data-only API exposed to the frontend.

Single-Page Applications with Sulu and React

A typical headless scenario combines Sulu for the backend with React for the frontend. Sulu’s part in this scenario consists of delivering structured data in JSON format upon request. The React frontend can build a single-page application (SPA) that talks to Sulu via the API to fetch the data it needs. All user interaction, navigation, and rendering are done by the React application.

You don’t need to look far to find an example of a headless Sulu CMS: Sulu’s administration interface is an SPA application.

With so many options for extending Sulu, you’ll rarely encounter limitations, and if you do, there is always a way to overcome them. (If this way seems difficult to find, our vibrant community is always there to help.) Sulu is built from the ground up with utmost flexibility in mind. We hope this article has not only provided an overview of the possibilities but also inspired you with a few ideas for making Sulu yours.

Looking for more? Try our live Sulu demo or get in touch with us.