Elevating the Commerce Cloud Developer Experience with React, APIs, and Serverless | Salesforce Developers Blog

With the General Availability of the Progressive Web App (PWA) Kit and Managed Runtime, our goal is to make any front-end development team feel immediately comfortable and excited about the storefront developer experience from day zero.

This GA ushers in a new era for Commerce Cloud, where front-end storefront development is intentionally based on modern, API-first, open-sourced web approaches.

Making “boring” technology choices to build modern storefronts

One of my favorite talks is Dan McKinley’s Choose Boring Technology, based on his experience at Etsy and MailChimp, where he attempts to answer “how to make developers happy.” Dan proposes that “new tech typically has more known unknowns, and many more unknown unknowns,” and therefore, “new technology choices come with a great deal of baggage.”

When faced with the challenge of deciding how future headless storefront experiences should be built on Commerce Cloud, we went with popular and safe, what some might call “boring,” technology choices. These are ones that had large user communities that you could learn from and get help from without breaking your team or your budget.

We based the new PWA Kit on Node.js, the most popular JavaScript runtime, the React framework, the most popular single page app framework, and Express.js, the most popular JavaScript web app framework. See a pattern there? Combine that with the most popular build and testing frameworks (webpack, Jest, React Testing Library), and you have a winning combo. Any modern web developer, even one new to your team, should be able to build, extend and deploy within minutes.

We’ve even gone so far as to intentionally skip traditional state management libraries like Redux, for a plain old React Hooks and Context approach, reducing what teams need to learn, manage, and deploy. The one thing we did stretch on was embracing an open-source React Component library, where we’ve included the amazing Chakra UI, where we can reuse and contribute to base components that are focused heavily on mobile, accessibility, and opinionated ways to manage styles and themes.

Getting hands-on with the PWA Kit

Want to see what it’s like to start building a storefront with PWA Kit? Let’s take a look. Getting Started is as easy as running npx pwa-kit-create-app and answering a few questions about your Commerce Cloud setup.

npx pwa-kit-create-app

npx: installed 60 in 4.158s
See https://developer.commercecloud.com/s/article/CommerceAPI-ConfigurationValues for details on configuration values

What is your project ID (example-project) in Managed Runtime Admin?
What is the URL (https://example_instance_id.sandbox.us01.dx.commercecloud.salesforce.com) for your Commerce Cloud instance?
What is your Commerce API client ID in Account Manager?
What is your site ID (examples: RefArch, SiteGenesis) in Business Manager?
What is your Commerce API organization ID in Business Manager?
What is your Commerce API short code in Business Manager?
What is your API Client ID in the Einstein Configurator? (optional)

Once that’s done with the right values (or default values we supply for training), simply run npm start like any other Node application, and you’re all set for local development. Access http://localhost:3000/ and start adjusting the React code as needed.

What does an example tweak to the storefront look like? To get started with adjusting PWA Kit for a new brand, let’s add a new alert banner and tweak the color scheme .

To add a new alert banner, we open up /app/pages/home/index.jsx and add Alert and AlertIcon React components from Chakra UI to the imports:

import {Alert, AlertIcon, Box, Button, Grid, GridItem, SimpleGrid, Stack} from '@chakra-ui/react'

We’ll then add the Alert component to the header on the homepage, right before the <Hero> component:

  1. <Alert status=”info” variant=”solid”>
    <AlertIcon />
    Grand Opening Sale!
    </Alert>

Finally, we’re going to adjust the header with a new color. So open up app/theme/components/project/header.js and let’s adjust the background color to override the default theme with the CSS in JS approach:

  1. backgroundColor:’pink’

At this point, you should see the local development server rebuild and automatically refresh, so on the next browser reload, you’ll see the results! Simply deploy these changes to a Managed Runtime project, and you’ll see it live in production.