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!

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

While many AI coding tools operate as simple command-response systems, Qodo Gen 1.0 represents the next generation: autonomous, multi-step problem-solving agents that work alongside you.

Read full post →

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post