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.
If you want to have more control over your assets and use a version control system, such as Git, you can also use SXA CLI to add your theme.
SXA themes work with gulp version 4.0.X. Each SXA theme contains a JSON package that specifies the gulp version that is 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.
If you recently upgraded to SXA 10, and use custom client tasks, you must rewrite your Gulp tasks to the new 4.0 version.
You cannot modify themes that are listed under
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.
Navigate to site/Media/Themes/<Your Tenant>/<Your Site>/<Your Theme> and 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.
Themes\Basic2\gulp\config.jsand change the server name to the site that you are working on.Important
The Creative Exchange export overwrites your gulp files.
To avoid that, you must 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 automatically uploads the file after 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 is available for others. For security reasons, we recommend that you do not put your password in the
configfile 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
readmefile 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 makes 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.