Upgrade your Theme and SXA CLI to version 10

utilize all new SXA CLI features even with SXA 9.3

Sitecore 10 has been recently released with SXA 10. There has been a lot of feedback on the fresh SXA 10 CLI and the news are great: 

• new commands to build and upload the whole theme without having to change a file and running the gulp watcher
• a dedicated sxa watch command is replacing the gulp watcher command
• Creative Exchange Live has been updated to run with node NodeJS 12 and Gulp Version 4
• Also JQuery Version has been updated to 3.4.1 

So how can you benefit from all that new stuff while running Sitecore and SXA 9.3?

 

Step 1: Upgrade CLI

The SXA CLI has been first time delivered with SXA 9.3 as Version 1.0.1 (you can check the version number here: C:\Users\[YOUR_USER]\AppData\Roaming\npm\node_modules\@sxa\CLI\package.json)

 

Easiest is to delete the old node module version of the SXA CLI and it's related scripts

 

1. Navigate to C:\Users\\[YOUR_USER]\AppData\Roaming\npm\node_modules

2. Delete folder "@sxa"

3. Navigate to C:\Users\\[YOUR_USER]\AppData\Roaming\npm

4. Delete files: sxa | sxa.cmd | sxa.ps1

 

Now go to your command prompt or powershell terminal

If you have installed the SXA CLI before you have registered the page URL already with npm if not:

1. for cmd window run: npm config set @sxa:registry https://sitecore.myget.org/F/sc-npm-packages/npm/

   for powershell terminal run: npm config set `@sxa:registry https://sitecore.myget.org/F/sc-npm-packages/npm/

 

If you have skipped step one start here:

 

2.  To Install CLI run: npm install –global @sxa/CLI 

This will take latest version.

Done :-)

 

 

If you require older version to be installed (there should not be a reason) you can run: npm i -g @sxa/cli@1.0.1

 

 

Step 2: Upgrade Theme

Luckily with the second version of the CLI, SXA has provided a command to upgrade your theme.

They have chosen the previously known command sxa init (sxa init responsibility to reconifgure your Theme config is now handled by sxa config, which also makes more sense name wise ;-)  )

As to be read in the documentation sxa init only creates new files but does not touch existing ones. Therefore we have to cleanup the Theme before upgrading it.

0. If you are unsure, create a copy of your theme just to be able to restore things easily

1. Delete following folder [YOUR_THEME_FOLDER]\gulp

2. Delete following files:

• [YOUR_THEME_FOLDER]\gulpfile.babel (not needed anymore)
• [YOUR_THEME_FOLDER]\index.js (not needed anymore)
• [YOUR_THEME_FOLDER]\package.json (will be recreated)

3. in powershell terminal on your theme folder run: sxa init   - This command will create following files:

• gulp\config.js
• gulp\jsdoc.json
• gulp\serverconfig.json
• .eslintrc.js
• gupfile.js
• package.json

4. Now run sxa config command to reconfigure your Theme

• confirm or changed registed SXA instance URL
• set Theme name
• set Theme path
• set configuration for JS and CSS bundling and uploading

If you have done a mistake in configuration you can rerun sxa config but please note: if you confirm (not rewrite) Theme Path it will be duplicated in your serverconfig.json. Topic has been adressed with the product team.

 

5. run: npm install

Note: after npm install recheck your serverconfig.json if Theme Path and Project Patht are still correct. (If folder path on disk differs from path in Theme you might have a mismatch. Topic has been adressed with product team)

 

6. Test your new setup using sxa watch All -d command (sxa watch All replaces the old gulp command. -d adds output on synchronizing your Theme files)

 

Now you are done. Back to work and enjoy the new features :-)

Here you find the documentation of new commands:  https://doc.sitecore.com/developers/sxa/100/sitecore-experience-accelerator/en/add-a-theme-using-sxa-cli.html

 

Created: 14.8.2020

SXA SXA CLI Themes Frontend