Modify your site design with Creative Exchange Live
Creative Exchange Live is an SXA feature that enables front-end developers to modify themes and other site content without having to import the files back into the site. Creative Exchange Live works with Gulp tasks that enable you to make changes to themes and other content and synchronize to the Sitecore environment immediately.
SXA themes work with gulp version 3.9.x. Each SXA theme contains a JSON package that specifies the gulp version that will be installed during
gulp install command.
To use Creative Exchange Live, your site must use the Basic 2 theme or a theme based on the Basic 2 theme. This theme contains the Gulp folder.
To be able to work with Creative Exchange Live:
Website\App_Config\Include\z.Feature.Overridesand enable the
Make sure you have sufficient permissions. You should either have the
sitecore\PowerShell Extensions Remotingrole assigned or add the user to the
<configuration> <sitecore> <powershell> <services> <restfulv2> <authorization> <add Permission="Allow" IdentityType="User" Identity="sitecore\username" /> </authorization> </restfulv2> </services> </powershell> </sitecore> </configuration>
If you are configuring Creative Exchange Live on an environment hosted in Azure, the
sitecore\PowerShell Extensions Remoting role might not exist by default. If this is the case, you must create the role in your Sitecore instance, and then assign it to the users that need it for Creative Exchange Live..
To use Creative Exchange Live to modify your site design:
In the Experience Editor, on the ribbon, on the Experience Accelerator tab, click Export.
Alternatively, to export a web design in the Content Editor, click a site page and then on the ribbon, on the Home tab, click Export.
In the Export settings dialog, edit the settings to download the whole site and in the Export to field, select ZIP file, and then click Download zipped site.
Depending on the destination you selected, the ZIP file is available for download or the files are stored in a folder on your server. If you selected the ZIP file option, extract the ZIP file.
site/Media/Project/Your Tenant/Your Site/Your Themeand open it in Visual Studio Code.
In Visual Studio Code, you can open an integrated terminal, initially starting at the root of your workspace. To open the terminal, go to View and click Integrated Terminal.
In the explorer pane, right-click Basic2 and click copy path.
Change the working folder to the Basic2 folder. In the terminal, enter CD and paste the copied path.
npmand the install command to install your package:
You must have
Node.js (Node)installed onto your computer before you can install Gulp.
Navigate to Themes\Basic2\gulp\config.js and change the server name to the site that you are working on.Important
Please note that with every Creative Exchange export, your gulp files are overwritten.
To avoid that, you should upload the edited
\gulp\config.jsfile to Sitecore after Creative Exchange Live is configured. You can do this by either uploading a file to Sitecore manually or running a dedicated gulp task that will automatically upload the file once it is modified (
watch-gulp). Refer to the
readme.mdfile to learn more about other watchers.Warning
If you upload
\gulp\config.jsto a Sitecore instance that is publicly available, it will be available for others. For security reasons, we recommend that you do not put your password in the config file but instead enter it when you start Creative Exchange Live.
gulp watch-htmltask. The Gulp watcher takes the Html files of your site.Note
Go to the readme file in the root folder of the theme to see a list of all tasks.
Enter your credentials to log in.
Now you can run the Gulp task that will make changes to your site design that are immediately synchronized to your site.
For example, you can add a class to style a rendering and, immediately after refreshing the page, the style is available for selection.