Search

Sitecore Creative Exchange Live with Scriban, making it work

Updated: Dec 13, 2019

Updated 12/12


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:

https://www.markvanaalst.com/blog/sxa/installing-the-sitecore-sxa-cli/


These two Sitecore docs were instrumental in helping get CEL up and running.

Modify site design with Creative Exchange Live

https://doc.sitecore.com/developers/sxa/93/sitecore-experience-accelerator/en/modify-your-site-design-with-creative-exchange-live.html

Add a theme using SXA CLI

https://doc.sitecore.com/developers/sxa/93/sitecore-experience-accelerator/en/add-a-theme-using-sxa-cli.html


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

9. Celebrate


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:


My gulp versions local and global, in agreement:




Creating a new Theme using SXA CLI


Our Guide

https://doc.sitecore.com/developers/sxa/93/sitecore-experience-accelerator/en/add-a-theme-using-sxa-cli.html


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:

  1. Did you open the terminal at the correct spot? Should be at the same level as your package.json file

  2. Was the command "npm i" run and from the <ThemeName> folder, same location as your package.json

  3. 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

<div>

<b> This is Scribby Test from gulp</b>

</div>

Save, Should see the Scriban file successful

WOW!!! It Works

From Sitecore open your page with the rendering variant in Preview Mode

It Works!!!






Open your Scriban Rendering Variant, it is updated!

Notes


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.


Acknowledgments


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

https://sitecore.stackexchange.com/questions/23218/how-can-i-use-sitecore-rules-in-scriban-templates-in-sxa-9-3/23219#23219

Sitecore Sam, I am going to use this

https://isaadansari.wordpress.com/2019/07/18/multiple-developers-working-with-sitecore-experience-accelerator-sxa-creative-exchange-live-how-to-implement-series/


Countless people write blog post that help me so much, THANK YOU!!!!

https://www.markvanaalst.com/blog/sxa/sxa-9-3-the-new-frontend-developer-workflow/

http://www.mtelligent.com/home/2018/3/10/beyond-creative-exchange-front-end-code-and-sxa

https://www.sidewalk.be/articles/the-sitecore-sxa-journey-discover-tips-and-tricks-when-implementing-an-sxa-website

https://isaadansari.wordpress.com/2019/07/18/how-to-use-sxa-creative-exchange-live-how-to-implement-series/

https://mdbootstrap.com/education/bootstrap/gulp-installation/

https://olmecdev.com/2019/The-SXA-Way-Customizing-Cloned-Rendering/

https://sitecore.namics.com/2019/01/02/how-to-create-a-simple-sxa-component/

https://www.techguilds.com/blog/2019/01/back-to-basics-2-sitecore-helix-styling-with-gulp






472 views1 comment