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.xnpm
–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.xnpm
–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.
You can also modify in your scss
files. and the watcher will look for changes and upload it on the Sitecore Solution, in the respective directory.
If you have multiple themes, you have to run the Step 3 for each of the themes separately.
Feel free, to use it and share your feedback if you find it useful. Cheers!
Reference Links
Sitecore Experience Platform 9.1 update 1
Sitecore SXA 1.8.1
How To Implement Series for SXA
Don’t forget to check my previous articles for SXA.
Create a Phone Link with the SXA Link Component – How To Implement Series
Setting up the Not Found and Internal Server Error pages with SXA – How To Implement Series
Progressive and optimized loading images with SXA – How To Implement Series
2 thoughts on “How to use Sitecore Experience Accelerator (SXA) Creative Exchange Live – How To Implement Series”