mix3d/sfcc-composable-storefront-starter

SFCC + Builder.io Composable Storefront

This starter kit is an isomorphic JavaScript storefront and Progressive Web App built using React and Express connected with Builder.io. It uses a modern headless architecture that enables developers to decouple front-end code from back-end systems. It leverages popular open-source libraries in the React ecosystem, such as Chakra UI components, Emotion (CSS-in-JS), Webpack, and many more.

Developers don’t have to worry about the underlying infrastructure, whether they’re developing their app locally, deploying it to a Managed Runtime environment, or testing the app live.

Requirements

Before you begin, ensure that you have the following accounts set up:

• Salesforce Commerce API client
• Builder.io Account
• Node 14
• npm 6.14.4 or later

Getting started with Builder.io :

• 1: Create an account for Builder.io
• 2: Your Builder.io private key
• 3: Clone this repository and initialize a Builder.io space

1: Create an account for Builder.io

Before we start, head over to Builder.io and create an account.

2: Your Builder.io private key

Head over to your organization settings page fint your organization private key and copy it for the next step.

• Visit the organization settings page, or select an organization from the list

• Click the edit icon for the "Private keys" row

• Copy the value of the auto-generated key, or create a new one with a name that's meaningful to you

3: Clone this repository and initialize a Builder.io space

First, we'll need to install Builder's CLI:

npm install -g @builder.io/cli

Next, we'll create a copy of the starter project, and create a new space for it's content to live in.

In the example below, replace <private-key> with the key you copied in the previous step, and change <space-name> to something that's meaningful to you -- don't worry, you can change it later!

builder create --key "<private-key>" --name "<space-name>" --debug

If this was a success you should be greeted with a message that includes a public API key for your newly minted Builder.io space.

Note: This command will also publish some starter builder.io cms content from the ./builder directory to your new space when it's created.

  ____            _   _       _                     _                    _   _ 
| __ )   _   _  (_) | |   __| |   ___   _ __      (_)   ___       ___  | | (_)
|  _ \  | | | | | | | |  / _` |  / _ \ | '__|     | |  / _ \     / __| | | | |
| |_) | | |_| | | | | | | (_| | |  __/ | |     _  | | | (_) |   | (__  | | | |
|____/   \__,_| |_| |_|  \__,_|  \___| |_|    (_) |_|  \___/     \___| |_| |_|

|████████████████████████████████████████| product-footer writing schema.json | 1/1
|████████████████████████████████████████| announcement-bar: writing schema.json | 1/1
|████████████████████████████████████████| category-hero: writing schema.json | 1/1
|████████████████████████████████████████| page: writing schema.json | 2/2


Your new space "sfcc pwa kit starter" public API Key: d1ed12c3338144da8dd6b63b35d14c30

Copy the public API key ("d1ed12c3338144da8dd6b63b35d14c30" in the example above) for the next step.

This starter project uses a configuration file to set the builder api key. Open the file builder.js and set the value you just copied from your terminal to 'apiKey' property.

export default {
    apiKey: 'YOUR API KEY GOES HERE',
    announcementBarModel: 'announcement-bar',
    categoryHeroModel: 'category-hero',
    productFooterModel: 'product-footer',
    pageModel: 'page',
    cartUpsellModel: 'cart-modal-upsell'
}

Up and Running

To start your web server for local development, run the following command in your project directory:

npm start

Now that the development server is running, you can open a browser and preview your commerce app:

• Go to http://localhost:3000/

Localization

See the Localization README.md for important setup instructions for localization.

Configuration Files

The Retail React App's configuration files are located in the app/config folder. For more details, see Configuration Files in the documentation.

Documentation

The full documentation for PWA Kit is hosted on the Salesforce Developers portal.

Useful Links for SFCC:

• Getting Started
• Setting Up API Access
• Configuration Files
• Pushing and Deploying Bundles
• The Retail React App
• Proxying Requests