Working with SXA CLI

Sitecore introduced with Sitecore 9.3 the SXA CLI, which helps you creating a theme and registering it against your sitecore instance via a commandline tool.

It doesn’t matter which commandline tool you are using. Just use the one of your choice.

So first of all where are the advantages of using Sitecore 9.3 SXA CLI?

  1. We keep the media library clean and do not add overhead to it.
  2. Importing and Exporting via Creative Exchange is no longer needed
  3. We can use easiely use a Source Control to add those file in .git, svn etc.

So let’s go through it step by step

Preparing everything

First thing is to make sure you have Node.js installed.
To check it you can just type node -v to your command line

You can get the latest node.Js Version here.

Second step is to make sure you have gulp installed.
Just type gulp -v in your commandline tool

You can install gulp globally with folowing command: npm install gulp --global

Next action we should take is making Creative Exchange Live enabled on our site.
Therefore browse on the File Explorer to [YourSite]/App_Config/ Include\z.Feature.Overrides and rename z.SPE.Sync.Enabler.Gulp.config.disabled to z.SPE.Sync.Enabler.Gulp.config

Finally create a folder where you want to create your theme and navigate to it in your command line tool.

Install SXA CLI

Now that all preparations are complete we can install SXA CLI.

Therefore we need to add a registry to npm by entering npm config set @sxa:registry https://sitecore.myget.org/F/sc-npm-packages/npm/ to your commandline

In Powershell you need to escape the @ character with ' resulting in
npm config set `@sxa:registry....

Now we can install the SXA Cli by using npm i -g @sxa/CLI

After having installed the SXA CLI we need to call sxa register https://[yourhostname] to connect the CLI against your instance.

Now we are able to create a new theme in sitecore by using sxa new [ThemeName]

You can define another url to point on than registered in the next step. Afterwards youwe are asked for our credentials and the relative path where we want to create our theme

In the next step we are asked if we want to set up a theme config file, (Btw. I never tried to click no, but i`d like to know what will be the effect, so reach out to me).

Depending on our next choice the CLI will download the responding basethemes for our newly created theme and create the folder structure in sitecore

After this we will get some questions, where i will not go through in detail.
Even if you miss one or are selecting in some cases the wrong one you can reinit those with the comman sxa init.

Now as we have the theme created and available on our disk we have to install all necessary modules which are required to use Creative Exchange Live.

But…

before we do this we have to look at our node.js version. It seems that the CLI is running into problems when using a higher version than 11. While running the gulp task later on it will break with the following error:

Requiring external module @babel/register
fs.js:35
} = primordials;
^
at fs.js:35:5

We can prevent this by creating a npm-shrinkwrap.json( https://docs.npmjs.com/configuring-npm/shrinkwrap-json.html) file in our theme folder and adding following lines to it:
{
  "dependencies": {
    "graceful-fs": {
      "version": "4.2.2"
    }
  }
}

Now after navigating to our theme folder via commandline we can just run npm install, which will download all required modules.

As last step we just run gulp.

From now on whenever we are changing something in the theme it gets compiled and uploaded to sitecore.

7 Pingbacks

Leave a Comment

Your email address will not be published. Required fields are marked *