A Quick Guide To Visual Studio Code setup for Salesforce Commerce Cloud (SFCC)

By Boris Pupavac
12/03/2019

If you are working with Salesforce Commerce Cloud, then you know that before you start, you need to choose the right editor. There is no right or wrong when it comes to editors, only your own preferences that you get over time. There are however some characteristics of the editors you should take into account before you decide. Also, new tools for development are being launched almost every day, so you need to see how these tools can help you. For the development in SFCC, I prefer Visual Studio Code or Eclipse. In this tutorial, I will show you how to setup VSC for Salesforce Commerce Cloud development.

But first things first, why Visual Studio Code for SFCC development?

VSC is one of the most popular editors today. It is an open source editor which makes it quite attractive to developers, built in git client and it’s lightweight. We all like this and need this. However, from my experience, the main advantage of VSC over Eclipse (and other editors) is speed. VSC has faster cartridge uploading and a better templating engine, which is more attractive to most of the developers. VSC can be easily extended with extensions and provides some cool and effective features, such as IntelliSense that analyzes code and the semantics of what you are inputting. To sum up, it’s built to save you time and help you be more effective. Now, let’s jump to the installation process.

Visual Studio Code download and setup

The first step is to download the Visual Studio Code. Go to the official VSC web site, and download the latest version for your system. VSC is supported for Windows, Mac and Linux.

 

After downloading the installer, simply follow the instructions to install VSC on your machine. Once your installation is done, you will see the following screen.

 

And you are ready to go on.

Install & configure Prophet Debugger

There are two ways to install Prophet Debugger. I will show you both, and you can choose the one you prefer more.

1. Navigate to your extensions section in VS Code

Click on the icon marked on the screen below:

 

In the search section, type Prophet Debugger, and press install.

 

That’s it!

2. Install Prophet Debugger extension from the Marketplace

The second way to install Prophet Debugger is to install it directly from the Marketplace. Go to the website and click the install button.

 

By pressing the button, you will be prompted with a modal which will try to launch Visual Studio Code, press continue.

 

This will launch the VS Code app, and you will land on the same page as in the first approach. Press install and you are all done. Now, let’s move to Salesforce Commerce Cloud.

Adding SFCC in the mix

If you are starting a new project, you can find storefront core cartridges in the GitHub repository. There are 3 different architectures in SFCC:

A few things to know about architectures

 

The oldest architecture is based on pipelines, and some projects are still using pipelines.

 

However, more and more projects are built with Controllers or SFRA. We highly recommend SFRA as it has more advantages comparing to the old architectures.

 

To find Controllers and Pipelines, follow this link and to find SFRA, go to GitHub.

 

Before accessing repositories, you need to have the SFCC account, the xChange account and a connected GitHub account to your SFCC account. Once you got your repository setup with cartridges, you can proceed with setting up a digital server connection.

 

In order to connect your Visual studio code to SFCC sandbox, you need to create a few json configurations. First, you need to create a .vscode folder in your root directory. So, in .vscode directory, create two files in the following order:

 

        
        

// launch.json

{

    "version": "0.1.0",

    "configurations": [

        {

            "type": "prophet",

            "request": "launch",

            "name": "SFCC"

        }

    ]

}

        
        

// settings.json 

{

   "terminal.integrated.env.osx": {

       "SFDX_SET_CLIENT_IDS": "sfdx-vscode"

   },

   "terminal.integrated.env.linux": {

       "SFDX_SET_CLIENT_IDS": "sfdx-vscode"

   },

   "terminal.integrated.env.windows": {

       "SFDX_SET_CLIENT_IDS": "sfdx-vscode"

   }

}

In the root of your project, create another json file called dw.json.

        
        

// dw.json 

{

   "hostname": "dev01-your-host.demandware.net",

   "username": "username",

   "password": "password",

   "cartridge": [

       "sitegenesis_storefront_controllers",

       "sitegenesis_storefront_pipelines",

       "sitegenesis_storefront_core"

   ],

   "code-version": "version1"

 }

In this json, you are setting your credentials for your sandbox instance.

In cartridge array, you can define your cartridges related to your project. This is a basic SFCC setup, so no additional cartridge is added.

Code-version is a version created on your sandbox and the name can differ, so once you get your sandbox, check which version you need to use in Administration > Site Development > Code Deployment.

Note: do NOT share your dw.json file, since you will share your personal details with the third party!

To activate your prophet, connect to your sandbox and start uploading your cartridges, open up the search bar and type Prophet: Enable Upload.

A hint: To open the search bar on Windows - press ctrl + shift + p, on Mac - command + shift + p.

 

Once you enable the cartridge upload, you will see the similar output in your console:

 

Wrapping up

If you’ve followed the steps, you are now all set up for SFCC development.

The last thing you need to do is to check if your instance is up and running smoothly.

If you have some additional questions or doubts, I will be happy to help. Write your question in the comment, or contact me via email.

 

If you want to compare VCS and Eclipse, check out our blog post about setting up Eclipse and the advantages of the editor. Did you like the article? Share it with friends who might need some help with VSC setup. Happy coding!


Author

About the author

Boris Pupavac

Salesforce Commerce Cloud developer

interesting read? Share it!

Latest blog posts

A Quick Guide To Visual Studio Code setup for Salesforce Commerce Cloud (SFCC)

If you are working with Salesforce Commerce Cloud, then you know that before you start, you need to choose the right editor. VSC is one of the most popular editors today. It is an open source editor which makes it quite attractive to developers, built in git client and it’s lightweight. Read More...

How to Easily Setup Eclipse for Salesforce Commerce Cloud (SFCC)

What’s your preferable editor for development? We use both Visual Studio Code and Eclipse, for many reasons. If you want to test the benefits of Eclipse, I got you covered. Read More...

Why Choose SFCC for Your Web Shop?

When it comes to e-commerce, we can say that online shopping is both the present and future of contemporary business. So, it’s no wonder that many businesses either add shopping carts to their websites or launch separate web shops. Read More...

Bringing Ecommerce Personalization to Life – 5 Key Features

The fast growth of e-commerce is old news. With the expected global retail sales of $4.88 billion by 2021, e-commerce is one of the most propulsive branches of the global economy. Read More...

Increasing E-commerce Revenues with Einstein Intelligence – where AI Becomes EI

Merchants and marketers rely on different analytics tools to increase their revenues. They can choose from a range of practical solutions that are being updated as we speak. Many of them are smart tools that collect data about customers’ e-commerce habits. Read More...