11 Days of Salesforce Storefront Reference Architecture (SFRA) — Day 2: Setting Up Your Development Environment
Now that we know what SFRA is (and if you’ve already forgotten just check Day 1), it’s time to create a development environment for it!
If you are coming from SGJC then you are probably familiar with Eclipse and its UX Studio plugin. Back then, you wouldn’t be able to do much without them. In SFRA this is no longer the case.
Since SFRA is based on NodeJS, you don’t need any special IDE (or any IDE for that matter) or plugin to develop for it. The only prerequisite is to have NodeJS and Git installed on your development machine.
Getting Started
The first thing we need to do when starting to develop for SFRA is cloning the SFRA repo from Github:
Make sure you have access to Commerce Cloud’s Github repositories.
On your local machine, clone the storefront-reference-architecture repository by running
git clone git@github.com:SalesforceCommerceCloud/storefront-reference-architecture.git
With the repository locally cloned on your machine, let’s install its dependencies:
- cd to the repository folder (cd storefront-reference-architecture).
- run npm install. After a few seconds, you should have a new node_modules folder in your repository folder, containing all of the packages the module depends on.
Next, let’s install the SFRA CLI tools package. These tools are helpful when dealing with different aspects of cartridge development, such as uploading and unit testing:
To install the SFRA CLI tools globally run npm install -g sgmf-scripts. If you prefer to install these tools locally (only for this project) run npm install sgmf-scripts.
🦏 If you want to dig deeper on global vs local installation of NPM packages, refer to this guide.
Building the SFRA Base Cartridge
Now that we have everything installed, its time to build the base cartridge. The base cartridge contains the default controllers, CSS, fonts and JavaScript files for the site. To build the cartridge:
- cd to the repository folder (cd storefront-reference-architecture) (if you’re not already there).
- run npm run compile:js && npm run compile:scss && npm run compile:fonts
🦏 All of the build commands (such as compile) are defined within the package.json file in the root of the repository. Feel free to have a look and edit them to your needs
And that's it. You now have all you need to start developing for SFRA! 🎉
In tomorrow’s post, we will discuss how to create a storefront and upload cartridges and other resources to it.
As always, looking forward to your comments either here or on Twitter 😎
Top comments (2)
Good write-up. You may want to expand on Getting Started as
git clone git@github.com:SalesforceCommerceCloud/storefront-reference-architecture.gitwill result in this error by default:ERROR: The `SalesforceCommerceCloud' organization has enabled or enforced SAML SSO. To access this repository, you must use the HTTPS remote with a personal access token or SSH with an SSH key and passphrase that has been authorized for this organization.
How did you clone it, I am not able to do it. Getting the below error:
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.