Demandware Editors

While there are plenty of code editors and integrated development environments (IDEs) for working with JavaScript, due to the custom nature of Demandware (Salesforce Commerce Cloud), the available options are pretty limited. There are two main problems:

  • Pipelines. If you have to work on legacy project featuring pipelines, you have only one option available to edit them - UX Studio plugin for Eclipse. The pipelines are just XML files, but editing them as plain text is pain in the ass - you need to visualize them so you can rearrange the pipelet blocks.
  • Deployment. The code you write is executed on sandbox, i.e. virtual machine that is able to run Demandware script. You have to upload the code to the server using WebDav - there is no other way to access the file system of your sandbox. So, you need plugin to sync your local codebase with the sandbox trough WebDav protocol.
  • Debugging.The Demandware code is mostly ECMAScript 5 compatible JavaScript, but in order to debug it you need special editor plugin or IDE that is able to communicate with your sandbox.

Pipeline Editors

UX Studio

UX Studio is a plugin provided by Salesforce for the popular Eclipse IDE. It features cartridges management, pipeline editor, code editor, auto upload with option to listen for external changes, pipeline and script debugging capabilities.

You make changes within UX Studio on your PC, then view the effect on your storefront where the code is auto uploaded.

After you install the UX Studio plugin, you can open UX Studio by selecting the Commerce Cloud Development perspective. How to install and configure it is very well described on the official SFCC documentation page here.

Code Editors

Visual Studio Code

Visual Studio Code is a source code editor developed by Microsoft and it is available for all major platforms - Windows, Linux and macOS. Out of the box features support for debugging, embedded Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring. Thanks to 3rd party plugin called Prophet Debugger you can sync the local code base with your sandbox, debug JavaScript and Demandware script files, edit ISML template files, open files trought Storefront Toolkit and much more. It is definitely not perfect, but the best available plugin out there. There is pretty good documentation embedded in Prophet Debugger so I will not cover here how to set it up.

Sublime

Sublime is very popular lightweight code editor for Windows, Mac and Linux and although it is not free, it has unlimited trial period. There are two available Demandware plugins for it - Entropy (for code upload) and ISML (for syntax highlighting ISML template files). Entropy is developed by Demandware itself but seems to be deprecated now. The lack of ability to listen for externally changed files (i.e. after webpack build) and debugging capabilities make Entropy not very useful.

Atom

It is one of the most beloved code editors out there and does not need any presentation. You can find several Demandware related packages for it, but most important one is bart. It has very similar features to Prophet Debugger for VSCode, at least in theory. I've never succeed to configure it properly to work with my sandbox - bart refuse to upload changes without reason. Anyway, you can try it on your own, but be prepared - it works only on Windows!

IntelliJ IDEA/WebStorm

It is not a free option, but definitely the best IDE I've ever used so far! Must try it, it's worth every penny! Although it is excellent JavaScript editor, it has no build in support of Demandware Script, ISMLs, debugging and etc.

There are two available Demandware plugins for InteliJ IDEA - one deprecated and one in beta stage - Salesforce Commerce Cloud Studio. I have not tried it yet, but you can experiment and post your results as comment bellow.

Leave a Reply

Your email address will not be published. Required fields are marked *