Multiple developers working with Sitecore Experience Accelerator (SXA) Creative Exchange Live – How To Implement Series

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 in Notepad++ with Administrator rights
• Write your hostname that is sc827 along with IP assuming 192.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