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.
2. 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 (
cdstorefront-reference-architecture). - run
npm install. After a few seconds, you should have a new nodemodules_ 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 (
cdstorefront-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 😎
