This example 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.
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
- 1: Create an account for Builder.io
- 2: Your Builder.io private key
- 3: Clone this repository and initialize a Builder.io space
Before we start, head over to Builder.io and create an account.
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
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: d1ed12c3338144da8dd6b63b35d14c30Copy 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'
}
To start your web server for local development, run the following command in your project directory:
npm startNow that the development server is running, you can open a browser and preview your commerce app:
- Go to http://localhost:3000/
See the Localization README.md for important setup instructions for localization.
The Retail React App's configuration files are located in the app/config folder. For more details, see Configuration Files in the documentation.
The full documentation for PWA Kit is hosted on the Salesforce Developers portal.