Modify your site design with Creative Exchange Live

Abstract

Make changes to themes and other content and synchronize to the Sitecore environment immediately.

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.

To be able to work with Creative Exchange Live:

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

Note

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

    1505D975E9B94273BE858DC88BBD4D36.png

  3. Navigate to the site folder 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, click hold CTRL, SHIFT, tilde, and then click k.

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

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

    F77FA7BDA7F24BBD838E6637507A2CA0.png

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

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

    3AD596B2F67747A5B9A35EF38EFFFF58.png
    25C48E8F2E1041ED97DCE40268C8DD34.png

    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.

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

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

    944DA1BF84044D709EB473EF21B7B941.png