Sitecore

Setting up SXA 10 theme using SXA CLI in Sitecore 9.3

Javascript Laptop@1x.jpg

This article describes about creating a custom theme using SXA CLI and applying it to the site. SXA CLI is a Command Line tool to create new custom theme. While setting up a site, it is not mandatory to create theme.

Why Custom Theme:

The assets related to theme, e.g. CSS, SCSS and JavaScript files, are stored in Sitecore, prior to Sitecore SXA 9.3.

The SXA CLI provided control to decide which necessary files need to be uploaded. It avoids unnecessary files to be maintained in Sitecore Media Library.

All the source files and theme assets can be kept separately from Sitecore using source control like – GIT.

Creative Exchange Live Tooling is now available as NPM package which helps to create the custom theme.

 

Prerequisites:

You need to have latest Node JS installed in your system to use this tool. If you do not have Node JS, please download it from – https://nodejs.org/en/download/

In my case, Node JS version:  v12.14.1

 

Theme Setup:

Sitecore - Understanding Development Approaches: A Sitecore Outlook
Understanding Development Approaches: A Sitecore Outlook

Designing, building, and implementing top-notch experiences not only requires a great deal of planning, strategy, and time – it also requires the right digital experience platform (DXP) and the right development approach for your business needs.

Get the Guide

SXA CLI is a useful command line tool to automate 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.

For creating a theme using SXA CLI:

  1. Go to –
    inetpub\wwwroot\<Your_Website>\App_Config\Include\z.Feature.Overrides and enable the z.SPE.Sync.Enabler.Gulp.config.disabled file.
    To enable this file, Right Click on the file and remove ”.disabled”.

  2. Open a command prompt terminal with ADMIN role and install the registry:
    npm config set @sxa:registry=https://sitecore.myget.org/F/sc-npm-packages/npm/

  3. Execute the following command in CMD to globally install SXA CLI npm package:
    npm i -g @sxa/CLI

  4. Now execute – sxa register <url>
    For the <url>, enter the instance for which you want to create the theme.
    In my case, the URL is – https://prftsc.dev.local

  5. Execute – sxa new <ThemeName>

  6. Npm will prompt for few of the questions like – login, password, theme name, theme path.
    If you answer Yes to the question Do you want to set up theme config file?, the config file is automatically updated.
    Enter the theme path: <Rootfoldername>/<Childfoldername>.
    <Rootfoldername> and <Childfoldername> are generally the folders under Themes folder in Media library created with the name of Tenant Name and Site Name while creating site.

Create Theme Step 6

 

7. Now change the directory to the folder that contains the new theme:

cd <ThemeName>

8. Execute npm i

This command will install all the npm packages mentioned in package.json.

9. Your new theme is now available. Make sure to assign your new theme to your site:

Go to Sitecore/Content/<tenant>/<site>/Settings, and in the Site Configuration settings, in the Compatible Themes field add your new theme to the Selected field. Now your theme is selected as your site’s current theme.

Note: The above steps are readily available on sitecore documentation ( https://doc.sitecore.com/developers/sxa/93/sitecore-experience-accelerator/en/add-a-theme-using-sxa-cli.html )

 

Theme in Action:

To apply theme to our Site, please follow the following steps:

  1. Go to your <Tenant>/<Site> and Click on Settings node:
    Apply Theme Step 1
  2. On the right side, locate Site Configuration:
    Apply Theme Step 2
  3. In Compatible Themes section, scroll down a bit under All section until you find Themes folder and under that folder locate your themes folder and select the Theme that you have created and double click on it so that it should be selected and added to the right side.
    Apply Theme Step 3
  4. Now the newly created theme is available to select in Page Designs:
    Apply Theme Step 4
  5. Now the new theme is all set up. Go to the Theme directory that we have created in command prompt and run command – “gulp” command. It will ask to enter sitecore login details.
    Apply Theme Step 5
  6. It will be watching for your CSS or JS changes, and whenever you made any change it will be compiled and the minified version of you CSS or JS file will be uploaded to sitecore.
    Apply Theme Step 6

So far we have seen that how we can create custom theme using SXA CLI and how to apply it to site. It made easy to separate unnecessary code to be uploaded.

About the Author

Pankaj is an Associate Technical Consultant, currently working on Sitecore platform as a front-end developer with Navistar Team. He enjoys learning and exploring new JS frameworks and sharing the knowledge with the team.

More from this Author

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to the Weekly Blog Digest:

Sign Up
Categories