Visual Studio Code integration with Demandware A.K.A Salesforce Commerce Cloud

Much awaited article for JS developers. You can now connect your Demandware Server with one of the popular IDE which is Visual Studio Code with the following simple steps as articulated below………..

In this article I will tell you how to connect your Visual Studio Code with Salesforce Commerce Cloud formerly known as Demandware.

SFCC recommends the use of Eclipse as a standard code editor for editing code which includes your pipeline changes along with server side JavaScript changes and CSS or SASS changes with little or almost no syntax highlighting, syntax suggestions or autocomplete being provided by the Eclipse out of the box (Eclipse has been traditionally used as primary IDE for Java Development). Though eclipse marketplace do provide extensions which you can add to your eclipse editor but they are not as rich and intelligent as compared to the VS code’s native syntax highlighting.

*** For debugging / viewing pipelines we still have to use Eclipse and demandware plugin 😒

VS code highlighting and suggestions 😃
Eclipse way of highlighting…. 😐

So lets jump into the steps for getting this done………..

1. Install the Demandware extension for VS Code

Go to the VS code extensions button and install the Prophet Debugger as shown below. I have already installed it. An install button will appear, click on that and after installation it will ask you to reload your VS code, click on reload. This extension helps you attach your demandware server instance with the VS code and it also lets you debug your scripts from VS code itself.

Installing Prophet Debugger

2. Import project into your VS code

Once the prophet debugger is installed we will have to open the folder from within the VS code or right click on the folder inside which your projects resides and click on open with VS code ..

My project resides in the “Site-Genesis” folder (your’s can be different) as shown, inside that folder I have my cartridges namely controller, pipelines and core as people with little experience in SFCC will know it. Right click on this and click on “Open with Code” or directly open this folder from VS code itself.

Root folder of my project

inside this folder I have a folder structure like this, these are my cartridges which contain the bulk of any demandware application.

Cartridges present in the root folder

Once project get loaded in the VS code you will have to manually set up JSON configuration needed for this extension to work with demandware.

3. Running a “Launch” command from command pallette of VS code

Once project is loaded inside VS code, we need to run a command from command pallette (click on View -> Command Pallete) as shown

creating launch.json

This launch.json will automatically position itself in your folder structure inside a hidden “.vscode” folder. You dont have to edit this launch.json.

4. Create a dw.json file

Now manually within your imported folder along side the cartidges folder (keep in mind the placement of this JSON, it has to sit inside the folder alongside your cartridges). The created json will sit like this in your folder structure. Paste following JSON content inside your dw.json

| — bc_integrationframework

| — site_A

…..

..

| — dw.json

dw.json file required for validation of credentials

5. Clean and upload the cartridges

After updating the dw.json with your sandbox credentials and the active code version. Go to the command pallette and run the command “Prophet: Clean Project / Upload All”. This command will upload the cartridges from your local machine to sandbox instance.

(Important Note: This command creates a zip file of the cartridges and then VS code accesses this zip file and uploads it, do check if you have admin rights to open the zip file, if not contact your administrator else everything will be futile till now)

In the image below I have undo ed my dw.json file to hide credentials

6. Updating the preferences of the code editor to enable auto upload

In order to autoupload the changes to the demandware server, we need to do one last thing.

Go to the preferences of the VS code and do the following as shown

Update the preferences of VS code

This is it, Now go ahead and do some changes in your existing template or add a new controller to render any template and save the changes and those changes automatically will be uploaded to your demandware server.

7. Notification about remote cartridges present in your sandbox but not present in your VS code workspace

If your VS code work space does not contain all the cartridges that are present on your sandbox, it will show some notification frequently to you. You can see that notification by clicking on the bell ( 🔔 ) icon at bottom right of your code editor. You can disregard the message or you can add more cartridges in your work space as you wish to. Here I am not showing the cartridges being shown in the notification because they are proprietary. You can click on any of the button according to your needs.

Notification of sandbox cartridges not present on your workspace

8. Uploading cartridges from “Cartridges” tab and viewing “Logs” from workspace

You can also manually upload the cartridges from the cartridge tab of the editor and along with that you can also view the Logs namely warnings, errors and custom errors in the same workspace as shown below.

In the image below I created a test controller with some invalid name being exposed publicly, it throws the error of controller not being found.

Cartridge tab and viewing logs in VS code

/*

*

*

Happy Coding

*

*

*/

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store