Salesforce Commerce Cloud PWA-KIT and Managed Runtime
PWA stands for Progressive Web Apps. These are web apps that use service workers, manifests, and other web-platform features in combination with progressive enhancement to give users an experience on a par with native apps.
PWA Kit is a framework for creating storefronts with React and headless APIs. PWA kit alongside B2C Commerce APIs and Open Commerce APIs (OCAPIs) gives you access to various commerce services like product data, pricing, promotions, recommendations, and so on.
Since this is a progressive app, it provides you with all the features of Progressive Apps like Fast load times, smooth rendering and transitions, offline support, and home screen installation as these features are added one-at-a-time (or progressively), based on what the user’s device and browser can support.
Where can you deploy your PWA storefront?
Well, Salesforce provides a platform named Managed Runtime for this. Managed Runtime provides the infrastructure to deploy, host, and monitor your PWA Kit storefront on a public cloud platform. With Managed Runtime, you can focus on developing your storefront instead of managing servers.
You can learn more about Managed Runtime here- https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/mrt-overview.html
Environment setup for PWA-Kit
For developing with PWA Kit you need Node 14.x and NPM 6.14.x. Run node -v and npm -v commands to verify and update the node and npm versions if you don’t have these versions yet.
Next, let’s generate the project and run these commands in your terminal-
mkdir pwa-kit
cd pwa-kit
npx pwa-kit-create-app — preset retail-react-app-demo or you can run npx pwa-kit-create-app and choose between the demo and your own configured sandbox for the back-end. In the latter, you must provide configuration values.
Once done, you will find the folder pwa-kit-starter-project inside the pwa-kit folder, you can start exploring this folder for better understanding. Next let's run the project:
cd pwa-kit-starter-project
npm start
Now that the development server is running, you can open a browser and preview your storefront:
Go to http://localhost:3000/
If you have followed the steps shared above, you will land on the app homepage. This is a fully functional app and you can explore the various pages, like Homepage, PLP, PDP, Cart, and Checkout, and even create sample orders.
Note: this is not a live app, so the orders created here will not be saved. This brings us to the need to deploy this app to an environment where you can manage the app data, run promotions, fetch products, take orders, update inventory, etc. We will learn more about the PWA-KIT in the next articles.
Thanks for reading.
