Updated: Dec 13, 2019
Well, my way of making it work.
At Symposium I left excited for v9.3, however it has taken a little bit of work to get the Creative Exchange Live to work as advertised. This post joins the hundreds of others, many of which I use every day describing "How I Did It".
Mark van Aast has a great blog on Creative Live Exchange(CEL) https://www.markvanaalst.com/blog/sxa/sxa-9-3-introducing-scriban/ , in his blog he writes about CEL,
“As you are probably aware of Creative Exchange Live (CEL) allows us to work on our theme using our filesystem. Using NPM and a Gulp task all the changes we make locally will be synchronized to Sitecore instantly. With SXA 9.3 we even made it more easier and customizable than ever before. But more on that in a separate blogpost. When you export your site using Creative Exchange you get a folder structure disk that holds all the required files for your theme. With SXA 9.3 you now get a new folder (at the same level as the media folder) called Scriban. This folder contains all the components that have rendering variants which use Scriban. All the Scriban templates will now be editable on disk. CEL will make sure all the changes will automatically be synchronized to your Sitecore instance.”
This is exciting, but the docs are a little light on details and I grew a little frustrated, giving life to this post. Yes it is long, I tried to include as many screen shots as possible and document every step. If you stumbled upon this blog hopefully your questions will be answered.
Mark wrote a blog on installing SXA CLI, suggest giving it a read before continuing as this post is a little more in depth:
These two Sitecore docs were instrumental in helping get CEL up and running.
Modify site design with Creative Exchange Live
Add a theme using SXA CLI
Here are the steps:
1. (optional) Ensured node.js was v10.x
2. (optional) Ensured gulp was v3.9.x
3. Created a new theme using SXA CLI
4. Modified the theme to use Creative Exchange Live to update automatically
5. In Sitecore added a Rendering Variant using Scriban
6. From Sitecore, exported site to zip file and extract
7. Copied the Theme from step 4 to the new site
8. Modified the “default” task to include the Scriban Watchers
Node.js and Gulp
-Skip this section if your local and global gulp versions are in harmony
Steps one and two concern node.js and gulp. Gulp, node.js and npm can give less than descriptive error messages or overly descriptive errors sometimes creating a challenge. During my "learning curve" I discovered several post and StackOver flow questions concerning issues that occur between node.js v12 and gulp 4. The Sitecore docs state that CEL works with 3.9.x. To be on the safe side I ensured that my dev environment had node 10.x and gulp 3.9.1 both globally and locally. A few notes and hints:
gulp 4 and node.js issues https://github.com/gulpjs/gulp/issues/2324
node.js releases https://nodejs.org/en/download/releases/
if removing and replacing gulp ensure that you delete all the files located at C:\Users\<username>\AppData\Roaming\npm
running the command "npm install gulp" will install gulp 4.x, to install gulp 3.9.1 use the command "npm install firstname.lastname@example.org"
My gulp versions local and global, in agreement:
Creating a new Theme using SXA CLI
Open an empty folder to hold the new Theme in VS Code, then open a new terminal, like so
Run the command to set the registry
npm config set @sxa:registry https://sitecore.myget.org/F/sc-npm-packages/npm/
Install the SXA CLI with the command
npm i -g @sxa/CLI
So ends the easy part of our post
Let's build our Theme updated
sxa register <URL> (This example shows my Sitecore Instance, it can be your Site Url)
sxa new <Theme>
Skip step 6, part of the questions ask when creating Theme
Answer yes to update the config and you should see this:
The next set of questions is very important concerning how your files will be handled and also beyond the scope of this post.
Things did not go smoothly for me every time, even though I repeated the same very simple steps. Several times received the "Server Not Responding" error. I tried everything, ensuring all sites were good on the SXA Site Manager Console, Restarting IIS, eventually, I reinstalled the SXA CLI, go figure.
The Theme will take a "bit" to complete:
Change to the <ThemeName> folder, run the command "npm i"
If everything worked should have your new project with files:
SXA CLI Completed Remember this Folder Location
Switch to Sitecore and view your new Theme under "media/Themes", here is my new Theme:
Switch back to your newly created Theme in VS Code, run the command "gulp" from the <ThemeName> folder, you should have the following:
If you get an error, check the following:
Did you open the terminal at the correct spot? Should be at the same level as your package.json file
Was the command "npm i" run and from the <ThemeName> folder, same location as your package.json
Verify that your local and global gulp are the same, npm gulp -v
The following steps are to demonstrate how files are synchronized and demo that the auto sync works.
Return to your Exported Project
Make sure you run the "gulp" command to start the auto sync
Open a component that is obvious and easy to notice a change, I choose the link rendering. Open the component-link.css and modify somehow, I made my link background a striking color.
Return to Sitecore and view your new Theme
Notice the modified style has been uploaded:
Open a page in Experience Editor
Apply your newly created Theme, Note: If you used your Sitecore instance as the URL most likely your Theme will not be available, thanks to my friend MVP Corey(with an E) Smith for jarring my memory.
Navigate to "Sitecore/content/Tenant/site/Settings" scroll down to the "Site Configuration" section and select your new Theme:
You must apply your new Theme before it will be Exported
On your page add the component, I added my link producing a modified but very ugly page.
During one session at Symposium 2019, a speaker said they spent to much time making things look right without a clear understanding of the component and how to modify. I personally have found these words to be true.
Great, but what about Scriban?
Remember I said this was an outlandish example? What makes it outlandish is no true post would not use the "Promo" component. When I first started with SXA and reading blogs I thought you had to start with the Promo because no other components were ever mentioned, ok that is tongue in cheek. Seriously Scriban:
Scriban is added via a Rendering Variants.
Navigate to "Sitecore/content/tenant/site/Presentation/Rendering Variants
Using the "Rich Text" component for my example
Make a copy of the Default Variant(remember this is an EXAMPLE)
Rename to ScribanTestVariant
On your new Variant
Right Click and choose insert
At the bottom(why is it not Alphabetical) choose Scriban
Named mine "ScribanTestyItem", remember not a Scriban tutorial simply how to autosync
Scroll down to the "Template Section" and enter some data:
Open your page in the Experience Editor
Add a "Rich Text" component
Choose your newly created Variant
Save, Save and Save
I often publish just to be sure
And our Ugly Page:
We will talk about Styling at end of post.
Almost Done, let's marry Scribby with our newly created Theme
Export Your Site, choose Export to Zip File
Make sure you right-click, select properties and Unblock your new .zip file
Extract your .zip file and Open in VS Code
Alright, there is our Scriban folder and our Template data!
Expand the Media folder all the way to your <ThemeName>
Houston we have a problem! Our exported Theme has none of the files needed to auto sync our site.
Copy your files
With Explorer open the folder containing the Theme you created with the SXA CLI at the start of this post.
Select all the files within the <ThemeName> folder
Paste them in your Exported Theme project, you can overwrite your files, should be just a few
Your files should now look something like this:
VS Code looks something like this
This looks good right, but can we complete our original goal of updating our Scriban template?
Open your Theme with a terminal
Make sure you open at the <ThemeName> level
Type "gulp" and press Enter
Should log in and start watching
That is great but what about Scriban, you promised Scribby!
If we explore the <ThemeName>/node_modules/@sxa/celt/tasks we find a watchscriban.js
Upon examination of the task, it should be called using the name "watch-scriban"
Here is the real cool part, if you followed this post you do not need to modify any paths or config files, CEL takes care of them, or it did for my project.
Open the watchAll.js file in the same directory as the Scriban task file
Add gulp.run('watch-scriban') to the default task list
Return to your <ThemeName> and open a terminal
Type "gulp" and press enter
Should see all the task start, notice the Scriban Watching task :)
Test out the Scriban autosync
Modify the Scriban File
Open your scriban/component/variantdef/variantitem.scriban
Modify your text mine is
<b> This is Scribby Test from gulp</b>
Save, Should see the Scriban file successful
WOW!!! It Works
From Sitecore open your page with the rendering variant in Preview Mode
Open your Scriban Rendering Variant, it is updated!
Your page will be ugly till you apply your styles. Mine was bare bones.
Included with the exported files is a readme.md file, These instructions are helpful but you will notice with the item numbers perhaps used as a guide.
CEL is a one way trip to Sitecore, Creative Exchange can export your site BUT you must be careful with your file management.
My friend Corey(with an E) Smith - we solved it!
Michael West - Thanks for the Slack conversation you helped me see the light
Michael Edwards - Here you go
Thanks David Rutkowski for answering the Slack question
Sitecore Sam, I am going to use this
Countless people write blog post that help me so much, THANK YOU!!!!