Modify your site design with Creative Exchange Live

Current version: 1.8

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 are familiar with JavaScript and Gulp, Creative Exchange Live shortens the time you use changing the design of your site.

Note

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:

  • 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/authorizationconfig 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.

  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/Project/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.

  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.

    Important

    Please note that with every Creative Exchange export, your gulp files are overwritten.

    To avoid that, you should 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 will automatically upload the file once 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 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.

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

Do you have some feedback for us?

If you have suggestions for improving this article,