Part 2: Content SDK CLI - Custom Templates
Learn how to create custom scaffolding templates for the Sitecore Content SDK CLI. Generate React components pre-wired with GraphQL queries and simplify component creation in XM Cloud with one CLI command.
Intro
In Part 1 of this series, I showed how to create a custom CLI command that generates TypeScript constants for GraphQL queries. This allowed us to organize .graphql files cleanly and have them automatically converted during npm run build.
For Part 2, we’ll take it a step further by creating custom scaffolding templates. First, we will take the same approach we did in Part 1 by creating a custom command to scan a folder containing React components and generate a model for the CLI to understand. These templates let us scaffold new React components directly from the CLI, pre-wired with Sitecore data access and GraphQL queries.
1. Generating the Available Templates
The first step is to create another custom command the CLI to scan a /templates folder for .tsx files. Each template becomes a scaffold option that can be used later when scaffolding components.
This is done through a new custom command called generateScaffoldedTemplates. It works almost exactly like the generateQueries command from Part 1—except instead of GraphQL files, it processes React component templates.
This command is registered in sitecore.cli.config.ts, right alongside the default Sitecore Content SDK CLI tasks:
Now, every time you build, your available templates are picked up and registered.
2. Scaffolding a Component
Once the templates are registered, we can scaffold a new component with a single command:
This will:
- Create a new component in your project based on
MySecondTemplate. - Include the server-side GraphQL query.
- Generate boilerplate code so you can immediately start customizing.
Optional: Add Some Spice to Your Template
By leveraging a custom query I created, I was able to fetch some of the data server side before rendering the component.
Inside your template, you can add in a custom function which will be called before the component renders (server-side).
The supporting GraphQLClient is wired to a query (defaultDatasourceQuery) that fetches both datasource and context item data:
With this setup, any component generated from this template already has access to the datasource and context item when it renders. This may be particulairly useful for gathering related items and pulling in extra data unachievable by storing a custom graphQl query in the rendering within Sitecore
Summary
With custom scaffolding templates, we’ve:
- Extended the Sitecore Content SDK CLI to pick up React component templates.
- Embedded GraphQL queries into templates so scaffolded components have Sitecore data out of the box.
- Simplified component creation with a single CLI command.
Together with Part 1, you now have a workflow where:
- Queries are automatically generated into TypeScript exports.
- New components can be scaffolded from templates pre-wired with GraphQL.
This pattern saves time, reduces repetitive setup, and helps teams standardize their Sitecore XM Cloud components.
As always, the code used here is available through my public Git Repo
Made in React Bricks