Modify your site design with Creative Exchange Live

Current version: 10.1

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.

Note

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 restrictedLocations in /configuration/sitecore/experienceAccelerator/creativeExchange/restrictedLocations.

To be able to work with Creative Exchange Live:

  • Go to Website\App_Config\Include\z.Feature.Overrides and enable the z.SPE.Sync.Enabler.Gulp.config.disabled file.

  • Make sure you have sufficient permissions. You should either have the sitecore\PowerShell Extensions Remoting role assigned or add the user to the /configuration/sitecore/powershell/services/restfulv2/authorization config node:

    RequestResponse
    <configuration>
      <sitecore>
        <powershell>
          <services>
            <restfulv2>
              <authorization>
                <add Permission="Allow" IdentityType="User" Identity="sitecore\username" />
              </authorization>
            </restfulv2>
          </services>
        </powershell>
      </sitecore>
    </configuration>
Note

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:

  1. 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.

  2. 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.

    Export settings dialog box
  3. 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.

  4. Navigate to site/Media/Themes/<Your Tenant>/<Your Site>/<Your Theme> and open it in Visual Studio Code.

  5. 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.

  6. In the explorer pane, right-click Basic2 and click copy path.

  7. Change the working folder to the Basic2 folder. In the terminal, enter CD and paste the copied path.

    Go to Basic2 folder
  8. Use npm and the install command to install your package: npm install

    Note

    You must have Node.js (Node) installed onto your computer before you can install Gulp.

  9. Navigate to Themes\Basic2\gulp\config.js and change the server name to the site that you are working on.

    Go to config.js
    Change server name
    Important

    The Creative Exchange export overwrites your gulp files.

    To avoid that, you must upload the edited \gulp\config.js file 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.md file to learn more about other watchers.

    Warning

    If you upload \gulp\config.js to 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 config file but instead enter it when you start Creative Exchange Live.

  10. Run the gulp watch-html task. 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.

  11. 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.

    Add a class

Do you have some feedback for us?

If you have suggestions for improving this article,