Share

LinkedIn

A Quick Start Guide to Setup Creative Exchange Live in SXA 1.4

Jen  / Jen
October 09, 2017 0 Comments

In the 1.4 release of Sitecore Experience Accelerator, Creative Exchange Live has been added as an option for working with Creative Exchange.

With Creative Exchange, an export of your site can be provided to a front-end developer or creative agency that can then work on the project locally.  Once the designs have been updated, the package is imported back into Sitecore. Creative Exchange Live introduces the concept of pushing locally updated design files directly into your Sitecore instance using GULP.  

In the following steps, we will build upon the official Sitecore documentation and walk through the GULP setup process using Node.js and Visual Studio Community – if you don’t already have VS or Node.js, use the links below.  

Visual Studio: https://www.visualstudio.com/free-developer-offers/ 

Node.js: https://nodesource.com/blog/installing-nodejs-tutorial-windows/

Server Configuration

Before getting started, you will need to add a configuration file to patch your Sitecore configuration. Name the file [filename].config and add to Website\App_Config\Include\z.Foundation.Overrides directory.  


<?xml version="1.0" encoding="utf-8" ?>
 
<!-- Purpose: This include file configures the Multisite foundation module on CD instances.
 
The multitenant nature of the SXA architecture means that clients can run multiple microsites along with their main websites on a single instance of Sitecore. Additionally each tenant is divided into sites allowing for entire customer journeys to be completed in various languages either through one-to-one translated versions (native Sitecore language support) or an internationalisation model whereby a separate site map exists for different languages.
 
To disable this file, change its extension to ".disabled". -->
 
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
 
  <sitecore>
 
 <powershell>
 
      <services>
 
        <mediaUpload enabled="false" requireSecureConnection="false">
 
          <patch:attribute name="enabled">true</patch:attribute>
 
        </mediaUpload>
 
        <restfulv2 enabled="false" requireSecureConnection="false">
 
          <patch:attribute name="enabled">true</patch:attribute>
 
        </restfulv2>
 
      </services>
 
    </powershell>
 
  </sitecore>
 
</configuration>

Prerequisites

You should have a project setup in Sitecore that includes a project theme and the Basic2 theme. In most cases, a project will require its own design so it is recommended that you do this when you create the project.

Select and Publish the Project Theme 

  • Navigate to the Home page of your site in Experience Editor. 
  • Select the Experience Accelerator tab and click the Theme icon. 
SXA, Sitecore Experience Accelerator, Creative Exchange Live, Creative Exchange, GULP

  • Select the Theme (project theme) and click OK.   
 SXA, Sitecore Experience Accelerator, Creative Exchange Live, Creative Exchange, GULP


  • Publish the Site Theme and then the Current Page (recommended to select Republish instead of Smart Publish on initial site publishing).  

SXA, Sitecore Experience Accelerator, Creative Exchange Live, Creative Exchange, GULP

Export and Extract

  • In the Experience Accelerator tab, select the Export icon. 

SXA, Sitecore Experience Accelerator, Creative Exchange Live, Creative Exchange, GULP

  • Select the Export options and select Next. 


SXA, Sitecore Experience Accelerator, Creative Exchange Live, Creative Exchange, GULP

SXA, Sitecore Experience Accelerator, Creative Exchange Live, Creative Exchange, GULP

  • When the export is complete, Select Download zipped site. 


SXA, Sitecore Experience Accelerator, Creative Exchange Live, Creative Exchange, GULP

  • Navigate to the Downloaded zipped site and extract the contents to a local directory


SXA, Sitecore Experience Accelerator, Creative Exchange Live, Creative Exchange, GULP

GULP Configuration

  • Open the folder in Visual Studio and then open config.js in the gulp directory. The path to the gulp directory is -/media/Themes/[Tenant Name]/[Site Name]/[Theme Name]/gulp). 


SXA, Sitecore Experience Accelerator, Creative Exchange Live, Creative Exchange, GULP

  • Update the server, projectPath, and themePath within the server options section. 

a. default settings

serverOptions: {
   server: 'http://sxademo', //need to be changed
   projectPath: '/themes', //need to be changed
   themePath: '/Basic2', //need to be changed
   removeScriptPath: '/-/script/v2/master/RemoveMedia',
   uploadScriptPath: '/sitecore modules/PowerShell/Services/RemoteScriptCall.ashx',
   updateTemplatePath: '/-/script/v2/master/ChangeTemplate',
   mediLibraryPath: '/-/script/media/master'
},


b. updated settings based on Sitecore tree

serverOptions: {
   server: 'http://[Your Server URL], //need to be changed (Your server)
   projectPath: '/Themes/SXA/Demo', //need to be changed (/Themes/[Tenant Name]/[Site Name])
   themePath: '/Demo', //need to be changed ([Theme Name])
   removeScriptPath: '/-/script/v2/master/RemoveMedia',
   uploadScriptPath: '/sitecore modules/PowerShell/Services/RemoteScriptCall.ashx',
   updateTemplatePath: '/-/script/v2/master/ChangeTemplate',
   mediLibraryPath: '/-/script/media/master'
},


GULP Installation 

  • Start Command Prompt and navigate to the directory that contains GULP.
  • The path to the gulp directory is -/media/Themes/[Tenant Name]/[Site Name]/[Theme Name]/gulp)
  • Type node -v and ENTER to check the version of Node - recommended & tested 6.10 +. 
  • Type npm install and ENTER to install the Node Package Manager. 
  • Type npm install -g gulp-cli and ENTER to install GULP.

Test Configuration and Installation

  • Type gulp and ENTER to run GULP. 
  • Type login and ENTER and then password and ENTER. 

Upon successful login, watchers will have executed.  

SXA, Sitecore Experience Accelerator, Creative Exchange Live, Creative Exchange, GULP

  • In Visual Studio, make any change to the main.scss file within the Theme/sass directory. 
SXA, Sitecore Experience Accelerator, Creative Exchange Live, Creative Exchange, GULP

  • Save the file and in the Command Prompt window note that upload is successful.  
SXA, Sitecore Experience Accelerator, Creative Exchange Live, Creative Exchange, GULP


Publish Theme

The Creative Exchange Live process pushes your updated files to Sitecore directly for you. However, to see changes outside of Sitecore, the Theme will need to be Published.

  • Navigate to the site theme in the Media Library. 
SXA, Sitecore Experience Accelerator, Creative Exchange Live, Creative Exchange, GULP

  • Right-click the theme and select Publish Item.  

SXA, Sitecore Experience Accelerator, Creative Exchange Live, Creative Exchange, GULP


Congratulations! 

Your team will now be able to make CSS (SASS) changes within the local export and compile the updated CSS instantaneously to your Sitecore instance via GULP -- eliminating the need to execute the Import process in order to see your theming changes.  





SXA, Sitecore Experience Accelerator, Creative Exchange Live, Creative Exchange, GULP

Comments

Add a Comment

*
*

Please confirm you are human by typing the text you see in this image: