DEV Community

Serge van den Oever
Serge van den Oever

Posted on • Originally published at sergevandenoever.nl

From SXACLI to enhancements to SXA Umbrella

After investing a lot of time and effort in working with Sitecore SXACLI and creating enhancements on the standard SXACLI tooling I decided that it was time for a different approach. Please meet SXA Umbrella!

With Sitecore 9.3 a new set of tooling was introduced to improve the front-end developer workflow: SXA CLI. As described by Sitecore:

SXA CLI is a useful command-line tool to automatize tasks for an SXA project. This topic describes how to add a theme using SXA CLI. This can be convenient if you want to have more control over your assets and use a version control system, such as Git.

For us, it is important tooling because it provides a developer-first approach for our front-end developers in SXA development.

Because the out-of-the-box functionality was insufficient for our development workflow we extended the standard SXA CLI tooling into SXACLI-enhancements, and solved most of the issues we had with the out-of-the-box SXA CLI tooling. We now had things like:

  • support for a team-based development cycle
  • a way to fix the default provided theme SASS into Webpack compatible SASS
  • Webpack for transpilation of code and styling
  • Full support for TypeScript

But there were still some things "sub-optimal":

  • Support for only a single theme, and Scriban for the rendering variants of a single site
  • No support for grids, base themes and extension themes (although these could be seen as a theme as well)
  • A big and old code-base where we didn't use 90% of the code because he handled all the heavy lifting using Webpack

So time for a big make-over! Welcome to SXA Umbrella - Project structure and tooling to optimize front-end team development workflow in any Sitecore SXA project. The Github repository contains a lot of documentation and a getting started guide. Please let me know if it works for you or if you miss features.

Happy SXA front-end coding - the right way!

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Introducing RTABench

To meet the need for real-time analytics workloads, we developed RTABench, a benchmark designed to test databases with these specific requirements. RTABench focuses on essential query patterns such as joins, filtering, and pre-aggregations.