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.
Case Study:
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
Solution:
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 scripts
,images
and fonts
folder leaving sass
and gulp
folder along with the gulp config
and package.json
files.
styles
folder 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 IronManTheme
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 \Website\App_Config\Include\z.Feature.Overrides
folder.
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 host
file.
- Simply press
CTRL+R
- Write
drivers
- Press
Enter
- Navigate to
drivers\etc
- Open
host
file inNotepad++
with Administrator rights - Write your
hostname
that issc827
along withIP
assuming192.168.1.1
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 gulp
9. Testing the Feature
An developer can now test your markup by adding any new-class
in your markup in any component, after the add-your-css-classes-here
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.
Conclusion
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!
Reference Links
Sitecore Experience Platform 9.1 update 1
Sitecore SXA 1.8.1
Freepik
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
One thought on “Multiple developers working with Sitecore Experience Accelerator (SXA) Creative Exchange Live – How To Implement Series”