Creating New Themes Using SXA CLI

Hello everyone, In this blog we will discuss, how we can create a new theme in SXA using SXA CLI. This will be a short blog so let's quickly start with it.

Step 1: Install SXA CLI globally using below command. Navigate to PowerShell and open it using Administrator mode

       
       npm install -g "@sitecore/sxa-cli@10.3.0"
	   
 

Step 2: Create a folder in any drive.For us we have created Theme under C drive. Open that folder in PowerShell.Execute the below command one by one.

       
C:\>cd Theme

# First we need to register our CM url
C:\Theme>sxa register https://sc103.localhost

# Command for creating new theme
C:\Theme>sxa new customtheme

# Some option will be asked. Provide the input as per your need
? The theme will be created for instance based on url https://sc103.localhost. Do you want to specify a different
url? no

# Will ask you to login to Sitecore instance
? Enter your login {username}
? Enter your password [hidden] {password}

# Will ask you to specify the path where you want to create the theme
? Specify theme path. Root is Themes folder(format ) {path under Media/Themes where we need to create this theme}

# Provide the input for modules. Probably Yes
? Choose active modules for your theme SearchSiteSetup, MapsSiteSetup, ThemingSiteSetup

# Theme will be downloaded and will ask some input from you. Provide them to your needs.
Theme downloading....
  √ Create theme folder
  √ copy project files
? Do you want to set up url to Sitecore instance?(Current is:https://sc103.localhost/) no
? [JS]Do you want to transpile ES6+ javascript files down to ES2015 (babel used) yes
? [JS]Do you want to compile minified file (pre-optimized-min.js) yes
? [JS]Do you want to upload js source files (If false - only optimized file will be uploaded) no
? [CSS]Do you want to compile minified file (pre-optimized-min.css) yes
? [CSS]Do you want to upload css source files (If false - only optimized file will be uploaded) no
? [SASS]Do you want to upload sass source files (If false - only optimized css file will be uploaded) no
Done
DONE Project ready
	   
 

If you see above message, then your theme is created and you will see the same in Sitecore under media/theme folder.

Now it's time to Navigate to the newly created theme folder and execute below command

       
C:\Theme>cd customtheme

//run npm install in the folder
C:\Theme\customtheme>npm i
	   
 

Once npm installation is successfull. Just run SXA help command for your reference and see if all SXA command comes up or not.

       
C:\Theme\customtheme>sxa help

# You will get below output
Usage: sxa [options] [command]

SXA theme bootstrap

Options:
  -V, --version                   output the version number
  -h, --help                      display help for command

Commands:
  init|i                          Download all neccessary files for compatibility with creative exchange live mode. Would not replace existing files. Will download only
                                  missed.
  new|n [options] [themeName]     Creates a theme both locally and within your Sitecore instance. Use this command to create a new theme for your site.
  register|reg               Specifies the default Sitecore instance for the "init" and "new" commands for your working environment. Only one instance can be
                                  registered as the default at a time.
  get-url|g                       Returns the current default Sitecore instance URL for the "init" and "new" commands.
  config|c [themeName]            Sets up a theme configuration variable by answering a list of questions. Use this command to change the theme configuration.
  build|b [options] [taskName]    Builds theme assets based on the current theme configuration
  upload|u [options] [taskName]   Upload theme assets based on the theme configuration
  watch|w [options] [taskName]    Watches for theme asset changes on the drive and uploads any modified files automatically. Can be configured with "sxa config" command
  rebuild|r [options] [taskName]  Rebuild and upload theme assets
  help [command]                  display help for command
	   
 

Now just run SXA watch command and update an CSS or JS file and see it will automatically watch all the changes and will push it to Sitecore as shown below.

Thanks for reading and hope this helps. Happy Learning!!!

You can check my other blogs too if interested. Blog Website