This is the extended blogpost for the How to use SXA Creative Exchange Live – How To Implement Series. So a few weeks back one of my fellow Sitecorian asked on slack is it possible to use the Sitecore Experience Accelerator (SXA) Creative Exchange Live?
As we in our team were already using it, so the answer is YES!
You can use the Out of the Box SXA Creative Exchange Live, It was always there. Here is the trick you can do.
I was overly occupied with some personal and professional stuff, so could not blog about it.
There are 3 Frontend Developers (Sam, Michael and Pete) who are working on the Sitecore SXA site parallel. The project deadline is tight so everything needs to be done as fast as it can be. Each of the developers does not have complete command over the Sitecore SXA, but Micheal has some. Only Sam can work in the Experience Editor, so the crating the SXA layout, creating page partial, page designs and other site configurations rely on the Sam expertise, while Michael can still help in some layout structuring in the Experience Editor. And Pete is only a CSS developer who can only style the website after it has been exported.
Disclaimer: The names here are imaginary and does not have anything to do with the Sitecore World
So as soon as Sam and Michael had developed/structured at least the Main layout, page partials and page designs. The Site is ready to be exported and Pete can style the website while other two developers can still work on the Experience Editor part.
Here is you what you can do to work in parallel.
If you haven’t read my previous article on How to use SXA Creative Exchange Live. I would recommend to read that first.
1. Create Three Separate Themes for each developer
The trick here is that. you have to create three separate themes for each developer, you would not work on your main theme files. Assuming the Developers name as theme names. You can duplicate your
BasicTheme and change its names.
2. Reuse the Structure for Multiple Websites.
I want to reuse the very same Structure for other projects inside the same Sitecore solution so I have created a separate folder name as
Developers and moved all the developer’s theme inside it. so to remove the clutter. In case I will have another website we all can work using the same Content Tree structure.
3. Remove the unnecessary files and folders
So I only want to allow my developers to work on some specific part of the entire websites, let say, only
Slider Component and
Promo Component. So I have removed the
fonts folder leaving
gulp folder along with the
gulp config and
stylesfolder is auto generated depending on the optimization configs you have set in your SXA website.
4. Inherit the Developers’ theme in MainTheme
You can now inherit your main theme with all the three newly created/duplicated themes. In my case my MainTheme is
5. 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 renaming it to the to
z.SPE.Sync.Enabler.Gulp.config in the
6. Enable access to developer’s machine
In order to access the server in all three developer’s machines you have to enter the host name in your
- Simply press
- Navigate to
Notepad++with Administrator rights
- Write your
7. Export the markup
Now all the developers can export the Website markup via Creative Exchange.
In the Experience Editor, on the ribbon, on the Experience Accelerator tab, click Export. you can export generated Site markup in a Zip format.
8. Configure the Gulp
Each developer can now extract the exported zip in their folder directory. Navigate to the
Themes\Developers\[Developer Name]\gulp and open
config.js. Update the server name relevant to the domain name you have for your Sitecore Solution.
Open Command Prompt and navigate to the
Themes\Developers\[Developer Name]\gulp and run the command
npm install then run
9. Testing the Feature
An developer can now test your markup by adding any
new-class in your markup in any component, after the
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.
Make sure you are on a Domain Network. The key here is to split the the themes and divide the work between multiple developers.
It is very unlikely that any of the developers will be working on the same part of the website. Also, you don’t want to modify the main theme files. Or may be there is a chance that not all of the developers will be working at starting stage and introduced later, so Sam can be working on the main theme files.
Once you are certain that you have actually achieved the desired results by all the developers. The
sass files can be put back into the main theme. That’s it!
It is a tested solution, so if you have any trouble feel free to reach out to me. Feel free to use it and share your feedback if you find it useful. Cheers!
How To Implement Series for SXA
Don’t forget to check my previous articles for SXA.
How to use SXA Creative Exchange Live – How To Implement Series
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