How to use Sitecore Experience Accelerator (SXA) Creative Exchange Live – How To Implement Series

This topic has been long on my list but I could not write about it. This is the first part of the my next blogpost that I will be sharing with you guys in a few days.

If you have not used the Sitecore Experience Accelerator Creative Exchange and Creative Exchange Live, you are doing it all wrong. You are not taking the full advantage of what SXA offers.

What is SXA Creative Exchange?

Creative Exchange is a headless architecture based process. It offers multiple teams to work parallel on a website. It is a handy tool specifically designed for the frontend developers, so that they can work with the static HTML offline. It not only reduces the development time but also, the frontend and backend developers can work parallel, because of its unique cycle of development and deployment.

There are around 80+ pre-built components components available to choose from. Bootstrap, Foundation and Grid 960 to choose for grid system for the website, along with the WireframeTheme and the BasicTheme. In the exported markup it gives you annotation of renderings and components by showing CSS classes alongside. You can also find the renderings based on ID which it gives on every single component. This is how it works:

Build basic site structure with Wireframes Theme or Basic Theme
Create the User Experience before development, by dropping all of your required components using Experience Editor
Once done, you can export generated Site markup in a Zip format. ( you can either choose to save it on the server folder as well)
Add the CSS styles and animations based on the User Interface Design
Implement any required Javascript modifications, if needed, in Exported Markup
Import it back into the Sitecore Solution, as simple as that.

What is SXA Creative Exchange Live?

Along with the offline mode, there is a Creative Exchange Live. It is an SXA feature that enables front-end developers to modify themes other site content on run-time, without importing the files back into the Sitecore solution. It provides fast pace of work for Frontend Developers, saves time and efforts.
You can modify themes without Importing into Sitecore. With its headless architecture, you can work UI-First instead of Sitecore First and synchronize the website with Gulp tasks.
You don’t need to worry about adding classes on markup, the Creative Exchange will automatically associate that to the relevant renderings based on the IDs , which it associates with every renderings while you export.

In order to use SXA Creative Exchange Live you need node –version 10.x.x npm –version 6.4.x, gulp –version 3.9.x.

1. Enable the Gulp Powershell Service

In order to get started you need to enable the gulp config in the App_Config in your Sitecore solution.

Enable the z.SPE.Sync.Enabler.Gulp.config.disabled by going to the \Website\App_Config\Include\z.Feature.Overrides in your server folder and rename z.SPE.Sync.Enabler.Gulp.config.disabled to z.SPE.Sync.Enabler.Gulp.config

Now you are ready to use the gulp tasks in your themes.

2. Export the Website

In the Experience Editor, on the ribbon, on the Experience Accelerator tab, click Export. you can export generated Site markup in a Zip format. ( you can either choose to save it on the server folder as well). Once the markup is generated, you can download the zip.

3. Configure the Gulp

Extract the exported zip in your folder directory. You need to configure the [Your Theme] config to communicate with the Sitecore Solution. Navigate to the Themes\[Your Tenant]\[Your Site]\[Your Theme]\gulp and open config.js. Update your server relevant to the domain name you have for your Sitecore Solution.

Open Command Prompt and navigate to the

[Your Site]\-\Media\Themes\[Your Tenant]\[Your Site]\[Your Theme]

Now run the command npm install, this will install all the node_modules required to perform the gulp tasks.

Now run gulp. You can choose from different tasks, e.g. if you only want to use the sass compiler, you can use watch-sass

In order to use SXA Creative Exchange Live you need node –version 10.x.x npm –version 6.4.x, gulp –version 3.9.x.

4. Testing the Feature

You can now test your markup by adding any new-class . You need to be careful to add class only after the add-your-css-classes-here before SXA needs to an end point to look for the classes to import into the Sitecore Solution.