Salesforce Commerce Cloud (SFCC) 101: Setting up your dev environment (with VS Code)

Hello again!

Looking for information about how to setup a dev environment to work with SFCC, I noticed that there are many, many guides on how to do that but using Eclipse and UX Studio.

In the certificaction course that I attended months ago, the instructor mentioned that in the recent years SF is encouraging developers to move from that IDE and start using Visual Studio Code which is a modern approach (at least in SFCC). Everyone knows that this coding tool has increased its popularity.

So during the training we used VS Code and since there are very few guides on how to do it, I would like to contribute about this topic.

Since I am a rookie in the SFCC world but I have been using VS Code for a while, there was no problem to me on how to setup the editor and one of the most important things is the use of Prophet Debugger, an extension that comes in handy when debugging, manage cartridges, syntax and other features.

Let's get started!

First of all, download Visual Studio Code here:

Download VS Code for your OS

Awesome! Now that we are into the editor, let's add the Prophet Debugger Extension. How? Click in the "Extensions" icon at the top-left icon as the next image shows:

Adding the Extension

Once you are there, you will see a big list of extensions, installed or not installed in your machine. In case you don't know, extensions are tools within VSCode to improve productivity while coding to highlight syntax, set colors according to the language, auto-formatting, etc.

Now, search for "Prophet Debugger" using the search bar (because, you know...search bar is for searching!), like this:

Now, you will be able to see the "Install" button so hit it to start adding the extension to your workspace. In my case is already installed, but you get the idea.

Perfect! Now it is installed. You can confirm this when you see the cloud icon at the bottom of top-left menu you already used in
previous steps, like this:

We need some files to add, in this case, I have been working with cartridges and stuff. To add folders you go the "File->Add Folder to Workspace", then select one and click Ok. The folder is going to be visible in the left side of the editor:

Saving the Workspace

You can save this workspace with all the configuration we have made so far. To do that, go to "File->Save Workspace As", set the name of your workspace and all set!

So far so good!

Integrate VSCode with Business Manager

Before this step one thing to mention is that the prerequisites for this is to know how to set your cartridge path which I am not covering in this guide. I think it is a basic topic that you already must know to go on with this.

Having said that, let's continue!

Create Code Version

In order to work with custom cartridges, we need a code version in our sandbox. To do this in the Business Manager, go to "Administration->Site Development->Code Deployment"

Once inside, click the "Add" button in the list of Code Versions available.
Replace the New Version text to the name of your version.
Click Apply
Finally, click "Activate" to make this the active code version

You will see a green tick at the left of the name of the code version selected:

Access Keys

The next step is to get access keys from the Business Manager, which are going to be configured in a .json file (which is covered in a moment) so you can upload your changes to the Storefront.

To do this, click in your name at the top-right to enter in your profile information. Once inside, click in Manage Access Keys

Once inside, click in the "Generate Access Keys" and then a window appears to select what kind of key you'll create. Select "WebDAV File Access & UX Studio" and click "Generate"

A prompt will appear, warning you that you should copy and keep in a safe place the generated key, because you won't be able to see them again. Do yourself a favor and save it in a place you could remember later.

Good! Now let's get back to VS Code.

Configuring dw.json

This file is special, since it is the file which connects you with the Business Manager and uploads your code. It is located in the root of the cartridge folder. If you don't have it, you can simply create it and name it like that: dw.json

The content of the file is like this:

hostname: You guessed it, here you type the domain of your sandbox (without http)
username: Your username in Business Manager
password: The key you created in the previous step
cartridgesPath: (optional) Set the cartridge path that you need
code-version : Name of the code version you created as well

Save the file and that's it.

Enable Auto-Upload

This feature in the Prophet Debugger extension helps you to automatically upload to the sandbox after saving the changes in VS Code. I personally have it activated, but it is optional.

To do this, go the Prophet Debugger. Here you can see three sections: "Controllers", "Logs" and "Cartridges". In the Cartridges section, if you hover in the title three dots will show. Click on them to activate Auto-Upload. See the image below:

When making changes, you can see in the Ouput section of VS Code the progress or if there is any error you must address.

Good to go! With this steps you are ready to start working with your sandbox using Visual Studio Code and Prophet Debugger. If you have any questions or problems let me know.

Until next time!