SFCC PWA KIT

Building Modern Shopping Experiences with Salesforce Commerce PWA Kit

Ecommerce businesses today need fast, intuitive and engaging online shopping experiences to attract and retain customers. However, developing and maintaining feature-rich native apps for multiple platforms can be time-consuming and expensive. This is where progressive web apps (PWAs) come in handy. 

Salesforce Commerce Cloud PWA Kit enables developers to quickly build PWA storefronts that deliver app-like experiences on the web. In this post, we'll explore what PWA Kit offers and how to use it to create modern omnichannel shopping experiences.

What is Salesforce Commerce PWA Kit?

Salesforce Commerce PWA Kit is an open-source JavaScript framework for developing PWA storefronts for Commerce Cloud. It is built using React and provides all the tools needed to build, develop and deploy PWAs that leverage the API capabilities of Commerce Cloud.

The key goals of PWA Kit are:

• Accelerated time-to-market for launching new storefronts
• Flexibility to use any UI framework for customized experiences
• Harness the scalability and reliability of Commerce Cloud 
• Follow PWA best practices for fast, engaging shopping experiences

Key Features and Benefits

Some of the standout features of Commerce PWA Kit include:

Streamlined Development Workflow

PWA Kit components like pwa-kit-create-app, pwa-kit-dev and pwa-kit-runtime help streamline the entire storefront development workflow.

• Scaffolding - The pwa-kit-create-app tool lets you quickly scaffold a new project using a starter template that already has Commerce Cloud integrations and PWA best practices built-in.
• Development Server - The pwa-kit-dev package provides a development server with hot reloading, source maps and other optimizations for faster iteration.
• Managed Hosting - PWA Kit enabled deploying to Managed Runtime, a secure and scalable cloud hosting service provided by Commerce Cloud.

Commerce Capabilities 

The commerce-sdk-react package provides React hooks to easily integrate with Commerce Cloud APIs and business logic. This includes customer, cart, catalog, pricing, promotions and more.

For example, you can fetch product data using:

const {data} = useShopperProducts({

  variables: {

    first: 12 

  }

})

And manage cart with:

const [addItemToCart] = useAddItemToCart() 

const [updateCart] = useUpdateCart()

Progressive Web App Features

PWA Kit helps make use of modern web capabilities for engaging experiences. This includes:

• Offline access with service workers
• Push notifications 
• Add to Home screen 
• Responsive design and mobile optimization

Performance Optimizations 

PWA Kit implements various performance best practices out-of-the-box:

• Code splitting and dynamic imports 
• Lazy loading components
• Image optimizations
• Caching and prefetching

This results in fast initial load times, quicker interactions and ability to work on slow networks.

Flexibility

Developers have full control over the front-end tech stack. PWA Kit works seamlessly with popular frameworks like React, Angular, Vue allowing you to reuse existing code.

You can also integrate third-party tools like:

• Payments (Stripe, PayPal)
• Reviews (Trustpilot) 
• Personalization
• CDNs, SSO, Analytics

Getting Started with PWA Kit

Let's briefly walk through the steps to create and run a new PWA project with the template-retail-react-app template.

1. Install Requirements

You need Node.js v18+ and npm v9+ installed. Access to a Commerce Cloud sandbox is also required.

2. Scaffold New Project

npx @salesforce/pwa-kit-create-app

3. Configure Sandbox Settings

Provide your Commerce Cloud sandbox details like hostname, site ID, api key etc. This will be saved in a `.env` file. 

4. Install Dependencies 

npm install

5. Start Development Server

npm start

This will start the app on localhost:3000 with hot reloading enabled.

6. Start Developing!

You can now access the starter storefront on localhost and start developing. Some ideas:

• Customize the homepage, product listing, PDP, cart experiences
• Add new pages like account, FAQ, content pages
• Update styles, components, theme 
• Add translations and localization
• Set up authentication
• Integrate payments, reviews etc.

7. Simulate PWA Features

To simulate PWA capabilities like offline mode, install tools like Workbox or use Chrome dev tools.

8. Build and Deploy

When ready, you can build and deploy the production assets to Managed Runtime:

npm run push -- -m "v1.0" 

This will handle hosting, scaling, security and enable distributing your PWA App.

Why Choose Commerce PWA Kit?

Here are some of the top reasons why Commerce PWA Kit is a great choice for developing storefronts for Commerce Cloud:

• Quicker Time-to-Market - The tools help you launch new stores faster without reinventing the wheel each time.
• Skill Reuse - Leverage existing skills in React, Angular, Vue instead of learning proprietary stacks.
• Cost Savings - Avoid expenses of native apps across platforms. Lower dev, hosting and maintenance costs.
• User Engagement - Deliver app-like experiences on the web that improve conversions.
• Flexibility - Fully customize experiences using your choice of UI components and frameworks.
• Scalability - Get the enterprise-grade scalability, reliability and security of Commerce Cloud.
• Omnichannel Commerce - Unified commerce across web, mobile, headless, IoT and more.

Conclusion

Salesforce Commerce PWA Kit enables developers to build fast, optimized and engaging shopping experiences as progressive web apps.

It streamlines commerce capabilities, PWA best practices and modern front-end tooling in one comprehensive package.

With its flexibility, developer experience and omnichannel readiness, Commerce PWA Kit is perfectly positioned to deliver the next generation of mobile and web shopping.