11 Days of Salesforce Storefront Reference Architecture (SFRA) — Day 2: Setting Up Your Development Environment
Tags: sfcc, sfra, salesforce
Published: 2020-05-18 19:34:48

---
title: 11 Days of Salesforce Storefront Reference Architecture (SFRA) — Day 2: Setting Up Your Development Environment
published: true
date: 2020-05-05 15:34:47 UTC
tags: sfcc,sfra,salesforce
series: 11 Days of Salesforce Storefront Reference Architecture (SFRA)
canonical_url: https://medium.com/perimeterx/11-days-of-salesforce-storefront-reference-architecture-sfra-day-2-setting-up-your-9d342dfce6d
---

### 11 Days of Salesforce Storefront Reference Architecture (SFRA) — Day 2: Setting Up Your Development Environment

![](https://cdn-images-1.medium.com/max/1024/1*0ibnfzRqKjE7XC3iXJ_oaA.jpeg)<figcaption>Photo by <a href="https://unsplash.com/@kaleidico?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Kaleidico</a> on <a href="https://unsplash.com/search/photos/development?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></figcaption>

Now that we know what SFRA is (and if you’ve already forgotten just check [Day 1](https://dev.to/pxjohnny/11-days-of-salesforce-storefront-reference-architecture-sfra-day-1-what-is-sfra-3bdo-temp-slug-3894003)), 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:

1. Make sure you have access to [Commerce Cloud’s Github repositories](https://github.com/SalesforceCommerceCloud/).

2. On your local machine, clone the [storefront-reference-architecture](https://github.com/SalesforceCommerceCloud/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:

1. cd to the repository folder (_cd storefront-reference-architecture_).
2. 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](https://nodejs.org/en/blog/npm/npm-1-0-global-vs-local-installation/).

### 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:

1. cd to the repository folder (_cd storefront-reference-architecture_) (if you’re not already there).
2. 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](https://twitter.com/fullstackj) 😎

* * *