Getting Started: Salesforce Commerce Cloud with PWA 

Share on facebook
Share on twitter
Share on linkedin

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. PWA offers all these features for you. 

2. Behaves like Mobile App 

PWA is designed like mobile apps but offers helpful and 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 provides impressive user experiences compared to classic websites. Still, PWAs work like websites and are listable and indexable by all search engines, which help 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 make use of advantages of the device hardware features such as geolocation or camera. Also, push notification is another 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 and no need to check manually.  

3) Quick installation and is 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/project creation 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 fine tuning is color change. So, open 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! 

Image download failed.

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.  

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.