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.
Why Visual Studio Code?
*** For debugging / viewing pipelines we still have to use Eclipse and demandware plugin 😒
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.
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.
inside this folder I have a folder structure like this, these are my cartridges which contain the bulk of any demandware application.
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
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
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
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.
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.