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
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.
NOTE: In order to access to this repository you must (more info can be found here):
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:
Now let’s proceed to have your IDE up and running so we can start having fun. First of all, install “Visual Studio Code.
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:
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:
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.
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)
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.
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.
This extension creates a duplicate of your administration and merchant tools menu on your left side of the screen for easiness of access: