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 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.
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
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.
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:
- 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”.
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/
Execute the following command in CMD to globally install SXA CLI npm package:
npm i -g @sxa/CLI
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
Execute – sxa new <ThemeName>
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.
7. Now change the directory to the folder that contains the new theme:
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:
- Go to your <Tenant>/<Site> and Click on Settings node:
- On the right side, locate Site Configuration:
- 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.
- Now the newly created theme is available to select in Page Designs:
- 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.
- 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.
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.