Getting Started: Salesforce Commerce Cloud with PWA 

Salesforce offers a PWA kit for modern front-end development. Our commerce cloud store needs to give a wonderful experience and feel to the end-user, that is our goal here.  

PWA kit is based on Node.jsReact framework, the great single page app framework, and Express.js, the most popular JavaScript web app framework. Develop the app with the most popular bundler and testing frameworks (webpack, Jest, React Testing Library), and now you have a great base to build and deploy the app. 

Why Do We Need PWA for Commerce Cloud?  

1. Available in offline mode 

Web applications or websites will not show content properly if the internet connectivity is limited or there is no internet connection whatsoever. Compared with a mobile app, they are often self-contained and allow users to use them while internet connectivity is limited or has no internet connection. The result, it provides great availability, accessibility, and engagement. And PWA offers all this feature for you. 

2. Behaves like Mobile App 

PWA is designed like mobile apps but offers helpful, all kinds of website functionalities like dynamic data rendering in front end and backend database access. Most of the PWA offers from existing frameworks and UX/UI that providing awesome user experiences compared to classic websites. Still, PWAs work like websites and are listable and indexable by all search engines, which helps to increase business visibility on the online market. 

3. Quick and Smooth installation 

We do not want to use the play store or some other marketplace to install the PWA app, users can download the app directly onto their device from a website. PWA provides shortcuts for quick access, its own icon on smartphones and portable tablets, just like a smartphone app. The icons will differ based on the business identity. 

4. Appstore not involved here 

No need to publish PWA on app stores. The development team can push changes or latest updates without waiting for any approval. The changes or updates are automatically downloaded and updated when the end-users or customers relaunch the app. 

5. Use of device hardware features 

PWA can take the access and advantages of the device hardware features such as geolocation or camera. Also, push notification one a fantastic way to share data and business updates 

PWA apps’ benefit to the desktop users 

PWA can also be installed on desktop or PC devices like native mobile apps. 

1) Very small size than native application or hybrid application.  

2) Update will happen automatically, no need to check manually.  

3) Not a lengthy process to install and are reliable. 

Kick start with PWA Kit 

STEP 1: Setting up your environment based on your operating system. 

STEP 2: Create a new project with the help of the following pwa-kit command. 

npx pwa-kit-create-app 

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 shortcode in Business Manager? 

What is your API Client ID in the Einstein Configurator? (optional) 

STEP 3: Once the node module installation is done, I mean the project creation process is done. Just simply execute the command below to start the app. 

npm start 

Now access  http://localhost:3000/ 

Start customizing your base PWA App 

Our app front end is based on React framework so we must have some knowledge about React js, let us start to customize our store front-end. What are we going to do now?  

Let us add a new alert banner and change the app color. 

Just open the following index.jsx file and add Alert and AlertIcon React components 

/app/pages/home/index.jsx 

Here we are going to use Chakra UI so, we need to import that library in our index.jsx 

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

add the Alert component to the header section, right before the <Hero> component.  

<Alert status=”info” variant=”solid”> 

<AlertIcon /> 

MST Demo App 

</Alert> 

Final finetuning is color change So open up the following js file. 

app/theme/components/project/header.js 

Just change the background color to override the default color with the CSS in the JS file 

backgroundColor:’pink’ 

Now you can see the local development server rebuild and refreshed automatically. We do not want to refresh manually; you will see the following store’s front-end result! 

Conclusion 

The PWA Kit and Managed Runtime bundle are available to all B2C Commerce Cloud users, who are all looking to build great storefront experiences with the latest technology stack on top of the Salesforce APIs. We are looking excited to see what unique and functional experiences front-end teams affect. 

Reference 

Introduction to Progressive Web Application. 

Salesforce PWA kit 

About the author 

Kumaresan is currently a Front-End Developer at MST Solutions. He is a blogger and Salesforce Community Group Leader, Love to do the front-end development with the latest technology stack. 

About MST

At MST Solutions our cornerstone is to adapt, engage and create solutions which guarantee the success of our clients. The talent of our team and experiences in varied business verticals gives us an advantage over other competitors.

Recent Articles

Work with us.

Our people aren’t just employees, they are key to the success of our business. We recognize the strengths of each individual and allow them time and resources to further develop those skills, crafting a culture of leaders who are passionate about where they are going within our organization.