Preparing your Work Environment

Introduction

Now that we’ve seen how to do the basics with Business Manager it is time to check our programming environment. Officially, Salesforce uses Eclipse with a plugin called UXStudio to develop for the SFCC platform (now deprecated, it’s used for legacy code in SiteGenesis and Pipelines). Nevertheless, with the release of SFRA, they have developed a node.js package that takes care of checking your code for changes and also upload it to the sandbox, which allows us to work with whatever IDE we choose.

Also, there is an SFCC extension that was developed to Visual Studio code, called Prophet, that does the same job, but instead of having to execute a command in the terminal, it gives us menu options to do the job.
The recommended IDE to develop with SFRA is Visual Studio Code and durinig this course we will used it along with the Prophet extension.

In order to work with SFRA, you will need to install Nodejs >= 10.x

Udemy Salesforce Commerce Cloud 101 – Descubre la plataforma líder
Udemy Salesforce Commerce Cloud 201 – Intermediate Course
Udemy Salesforce Commerce Cloud 303 – POD Alerts Cartridge

SFRA Github Repository

Salesforce maintains the official code for SFRA in the following GitHub repository. This repository is used as a reference for any other repository that you might find that contains SFRA code. Also, it is the place to check whenever a new release or official bug fix is expected.

Screenshot taken on February 2022

NOTE: In order to access to this repository you must (more info can be found here):

  1. Enable 2FA for your Github account.
  2. With a valid and logged in GitHub user account (with 2FA configured), associate that account with Commerce Cloud by going to the Salesforce Commerce Cloud SSO Signup page. This allows you to connect your GitHub user account to your Account Manager user account, and establish the SSO relationship.

Get the Code

There are 3 ways to download the code from Github. You can either use the command line at your terminal, use Github Desktop or download the source manually.

To get your hands in the code:

  1. Open the GitHub repository
  2. Click on the Clone or Download button
  3. Choose Download ZIP
  4. Save the zip file locally
  5. Unzip it

Visual Studio Code

Now let’s proceed to have your IDE up and running so we can start having fun. First of all, install “Visual Studio Code.

Visual Studio Code - IDE

Install Prophet Extension

  1. Open Visual Studio Code
  2. Click menu View > Extensions
  3. Type Prophet
  4. Click on the Prophet Debugger result item
  5. Install it
  6. Click on the View menu item at the top menu bar and type Prophet in the input field that appears.

 

Now that Prophet is installed you can use its command by pressing CTRL + SHIFT + P or clicking on the menus View → Command Palette and in the input field that appears to type prophet.
Open your code using Visual Studio:

  1. Open Visual Studio Code
  2. Click on the menu File > Open Folder
  3. Select the root folder containing all the source code you downloaded

Open your code using Visual Studio

  1. Open Visual Studio Code
  2. Click on the menu File > Open Folder
  3. Select the root folder containing all the source code you downloaded

Install your packages

When working with Node.js projects (SFRA, for example) you need to install all the dependencies that are listed in your package.json file. To do that:

  1. Open the Terminal/Command Line
  2. Make sure the current directory is the project root folder
  3. Type: npm install
  4. Press ENTER
  5. Wait for all the packages to be installed

Compile your code

If you open package.json file you will find a lot of scripts with diferent purposes like testing, linters, compiling scripts, upload, watchers… and probably in the future more will be available.

In order to compile your code (at the time of writing this course) you should run the build script, it script compile your js, scss and font files. To do so, you can run script directly in VSCode or type npm run build in the terminal.

If you’re editing client cartridge files (like js or scss) you must run again and again this command, otherwise those files won’t be compiled and your changes won’t be shown in your storefront. To avoid this you can run the watch command so whenever you change and save any modification on your javascript and/or SCSS, it will recompile the needed files. Type npm run watch

Creating a Server Connection

The last configuration needed is to create a connection between your local code and your sandbox so that your changes are actually uploaded to the sandbox and can be implemented on your storefront site.
In order for that to work, you need to create a configuration file, which will contain your credentials plus some data from your sandbox.

You must configure the file inside your root folder, which will be read by Prophet so that it can sync with your Sandbox and upload your code. It is a one-way push connection; you cannot pull code into a local computer from the Prophet.

Considering you have your project opened in VS Code, create a file named dw.json (more details can be found in the official docs)

  1. Fill out your sandbox URL (ignore the part https:// and also what comes after .com)
  2. Fill out your username
  3. Fill out your password
  4. Fill out the code version you are using
  5. Save the file
  6. Open the menu View → Terminal
  7. In the dropdownlist, select Prophet Uploader (this will allow you to see Prophet’s actions)
  8. Open the menu View → Command Palette (CTRL + SHIFT + P)
  9. Type Prophet
  10. Select Clean Project/Upload All

Once it is done uploading your files, it will start watching for changes. From this point onwards you any change you make to any file will be uploaded to your sandbox.
Your project is now connected to your sandbox. You will use that connection to upload all your cartridges files to that sandbox.

dw.json file example

Browser Extension

Demandware With Ease

To make your life easier when dealing with log files (amongst other things) we will be using a browser extension that will help us with that.

  1. If you use Chrome: https://chrome.google.com/webstore/detail/demandware-with-ease/ffhabonelknmejmdnekedmijlhebpcio/reviews?hl=en-US
  2. If you use Firefox: https://addons.mozilla.org/en-US/firefox/addon/dwithease/
  3. If you use Edge: https://microsoftedge.microsoft.com/addons/detail/demandware-with-ease/peefidlcfhcdelglpfhfbmniafbocgag

BM Extender

This extension creates a duplicate of your administration and merchant tools menu on your left side of the screen for easiness of access:

BM extension looks like this in the Business Manager

How to be a Certified Salesforce Commerce Cloud Developer for FREE

Unlock a FREE PDF with SFCC B2C Certification questions from our Udemy Course. Join our newsletter!
Check your email, you’ll receive a copy in a few seconds. If you don’t see it, please check your spam folder.

Udemy Salesforce Commerce Cloud 303 – POD Alerts Cartridge
SFRA Course on Udemy
About Us
Salesforce Certifications

Do you like cookies? 🍪 We use cookies to ensure you get the best experience on our website. Learn more.

I agree