My journey for the HTML Validator app in Sitecore Marketplace

While it was announced at Symposium, Sitecore has now very recently launched the Sitecore Marketplace for General availability, so now all of us can use it. Sitecore Marketplace and the underlying infrastructure is a new and modern way to extend the user interface and editor experience in its SaaS products, meaning XM Cloud right now.

I have really been looking forward to this, I think a part of why Sitecore have had a very strong position is due to its flexibility and customizability. There have in the DXP days been a varity of different editors and tools to help the marketeers and content editors manage the content in an structured, simple and efficient way even though the underlying concepts, data, and domain actually can be pretty complex in the enterprise.

It is really no easy thing to allow developers all over the world to mess around with the interface and still keep the momentum with the automatic upgrades and feature releases in the SaaS editor. It is not possible to do everything yet, there are still a lot of features coming, but we do see the structure and how this can be a suistanable eco-system.

There is no actual marketplace, yet at least

From Symposium it is clear that there is the intention to have a real public marketplace where you as an organization can just get new features by adding a new app to your system. This involves a lot of additional steps to ensure that the solutions are safe, how to discover and promote apps, should there be payment, etc.

Right now, we can create an app and assign it to the organization. Later on we will be able to discover apps created by other developers and “install” them. But it also mean that we do have all the functionality currently available for the apps and extension points that will be there later - and we can enrich the experiences for our customers with specific extensions and experiences. I have been arguing that just getting something will help us and our clients, I don’t believe I can take the honor of the decision, but I am really happy that Sitecore have decided to release this in a step 1 without a public marketplace.

Configuring an app

In the Sitecore Portal there are now two new menu items for “Developer Studio” and “My Apps”. Developer Studio is the place for creating/registering new apps while the “My Apps” is the apps installed in a certain tenant. Currently you will end up in the Developer Studio for all tasks, but the structure is there.

Coding an extensions

There is an SDK for marketplace apps and all integrations will be through the SDK. It will also take care of authentication etc.

The Sitecore Marketplace SDK itself¹ but it is really important to look at the documentation for the SDK² as there are good walkthroughs here on how to initialize, query and full boilerplate code for you.

The application for the extensions is actually shown in a sandboxed iframe and all integration with the rest of the XM Cloud Pages Builder happens through the SDK with postMessage behind the scenes.

Most importantly was to query the pages context, which was very simple with the ClientSDK from the SDK. There are typescript definitions available, so it is easy to get item id, version, language, sitename and you will also get some site context.

1
2
3
4
5

client.query("pages.context", {
            subscribe: true,
            onSuccess: data => setPageContext(data),
            onError: err => console.warn(err),
        });

I wanted the rendered html of the page which was not that simple. In the end, I am (re-)bulding the url to have the page rendered on the editing host and then request it from the extension. It has the benefit that we can get a preview of the specific version of page even if it is not published, but it also have some implications. I need the editing secret, which seems to not be exposed through the SDK, and the rendering host must be configured with CORS to allow us making requests from the extension url. On initial start of the extension it will ask for the secret and I have just updated my editing host with proper CORS rules. It could also have been solved with a server side request instead, but now there is no backend and cost of hosting the application.

Running locally

Development was actually pretty simple and straight-forward. I initialized my vite based repository and registered an application in Sitecore pointing to my local address. Eg. HTML Validator Local running on https://localhost:5173/ and hereby I could just have the development server running locally with hot-reload and easily see my changes. It will need an SSL certificate, so I just used the vite-plugin-mkcert³ as I am already using mkcert for my docker based solutions.

The HTML Validator app

I have previously been brainstorming for some other ideas for extensions, some a bit larger and with more focus on integration.

However, in a current project, we saw that incorrect header tags were used in the rich text component, eg. h5 where it should have been and h2. I am (of course) focused on producing valid html so I spotted this, and we fix so that the editors can use both the semantically correct tag and have it look as expected.

This was simple, because it was early in the development, but it could as well happen after go-live in a production site. That gave me the idea of just using an HTML Validator and present the result to the editor.

It is just based on HTML-validate, so that hard work was already done, and it is a completely “offline” process, so all the validation happens in the browser so no information is sent anywhere else.

I didn’t look into the Sitecore Blok, which should allow developers to easily use the same look and feel as the rest of the Sitecore Portal and products - yeah you can probably see that I didn’t even put much effort into styling the results. However, that is definitly doable with a bit more time and with local devleopment and hot reloading it is very simply to immediately see your changes and experiment with a proper interface.

You can of course take a look at the code⁴ - fixing the UI with a PR is of course also welcome….

Distributing apps

As the integration is just an url, it is actually pretty simple to register multiple apps with the same url. You can now create a custom app in your XM Cloud organization and specify the url https://sc-marketplace-html-validator.asmblii.dev/ and you can have the HTML Validator in your own organization.

However, there is actually also the underlying infrastructure to have apps in multiple organizations. You can in Developer Studio specify which organizations that have access to the app.

The added organizations will then see the app in their “My Apps” list as “To be installed” and they can choose to install it (and for which environments, eg. only in test environment). I have not tried to add it to an organization where I am not already involved…

The future

The Sitecore Marketplace is really a strong addition for XM Cloud. It is true to the vision of XM Cloud with automatic upgrades of the XM, it ensures encapsulation and decoupling between the systems, and it is actually pretty simple and fast to both develop and register extensions. Already now we have plenty of options to add functionality to solutions, I am sure we will see a lot of nice and clever solutions and integrations with the rest of the modern landscape of IT systems, and when the public Marketplace will be available, it will be even simpler to add functionality to your XM Cloud solution.