One of the features I personally really like in SXA is Creative Exchange Live. It gives you the ability to make theme modifications right from your favorite code editor. By utilizing gulp tasks your changes are immediately synchronized to your Sitecore instance.
Recently I wanted to make some changes to the default theme in SXA Storefront. Naturally I exported the default theme in the Experience Editor do that I could unzip the theme and make the necessary changes. When I tried setting up the Creative Exchange Live I noticed that not all files were in the correct place. The package.json missed some information and the index.js file was missing.
Luckily these files are not specific for that theme, so I could re-use the files from the standard Basic2 theme.
Then when I exported the theme once again, all files were in place. I can now run "npm install" and after installation of all required packages I can now run gulp to synchronize my changes to the Sitecore instance.
To summarize; you can follow these steps to enable Creative Exchange Live:
- Remove the existing package.json and the gulpfilebabel items in the root of the Storefront theme (/sitecore/media library/Themes/Storefront Branded)
- Copy the gulpfilebabel, index, package and readme items from the Basic2 theme (/sitecore/media library/Themes/Basic2) to the Storefront theme
- Export the Theme using the export function in the Sitecore Experience Editor
- Extract the zip file on your local harddrive and open the folder in a Command Window. You can also open the folder in a text editor like Visual Studio code
- Run npm install to install all the required packages
- Run gulp to start the synchronization
I wrote a little PowerShell script that removed the files in the Storefront theme and copied the required files from the basic theme. You can use this script yourself to make the Storefront theme compatible with Creative Exchange Live:
library\\Themes\\Storefront Branded\\gulpfilebabel" -Permanently
Copy-Item -Path "master:\\media library\\Themes\\Basic2\\gulpfilebabel" -Destination "master:\\media library\\Themes\\Storefront Branded\\gulpfilebabel"
Copy-Item -Path "master:\\media library\\Themes\\Basic2\\index" -Destination "master:\\media library\\Themes\\Storefront Branded\\index" Copy-Item -Path
"master:\\media library\\Themes\\Basic2\\package" -Destination "master:\\media library\\Themes\\Storefront Branded\\package" Copy-Item -Path "master:\\media
library\\Themes\\Basic2\\readme" -Destination "master:\\media library\\Themes\\Storefront Branded\\readme" \