Headless Salesforce Commerce Cloud with Vue Storefront Next

We strongly believe that headless is the future for eCommerce platforms. At Divante, we’ve proven our commitment to that, first by creating Vue Storefront then through our work on the Spartacus project for Hybris. It was, therefore, a natural next step for us to join the Salesforce Commerce Cloud Headless Beta program.

Our goal for this partnership was not only to test out the new set of APIs that SFCC is providing for the program members; we want to actually make most of them integrate with Salesforce through Vue Storefront Next.

Here you have our findings from creating an SFCC PWA frontend PoC based on Vue Storefront Next.

The new paradigm

The idea of using the best-in-class services under a single frontend—a so-called umbrella application—is becoming more and more popular. Headless architecture gives you this opportunity and allows you to develop frontend and backend applications at different paces, letting you experiment and deploy frontend changes much more quickly than the backend changes, which usually involve a lot more security and reliability concerns.

The business can now decide which elements of the puzzle they’d like to own and which just to just buy and use.

Vue Storefront

Vue Storefront is a standalone PWA storefront for eCommerce which can connect through an API with any eCommerce backend, including Salesforce, Magento, commercetools, About You, and Shopware 6. You can integrate different auxiliary services like payment providers, enterprise search, or CDN under a single UI for the customers.

Vue Storefront is open source with a strong community behind it. Anyone can use and support the project which is in the production phase and is designed as a tool for the improvement of shopping experiences.

The key features of Vue Storefront:

Platform-agnostic
Focus on performance
Mobile-first approach
Cutting-edge tech
No limitations in theming and customization
Open-source with an MIT license
Exciting developer experience
Out-of-the-box Server-Side Rendering (for SEO)
Offline mode

The desired architecture

The PoC integrates Salesforce Commerce Cloud with the Vue Storefront Next. The architecture we’ve been aiming for is shown on the diagram below.

With this design, the frontend is actually a separate application that can be fully customized and developed on its own. It can also be integrated with the top-notch Search, CMS, and eCommerce platforms. In this case, it has been integrated with Salesforce Commerce Cloud and could potentially be extended by a CMS connector like CoreMedia or Prismic.

The Vue Storefront Next architecture actually makes integration quite straightforward. You need to create a platform-specific API client and embed the business logic into a set of composables – the JS classes that manage state, UI, and so on. You can then fully customize the theme based on the Storefront UI design systems provided by the Vue Storefront authors. This can be done based on the defaults or by creating one from scratch.

A short personal note; I wrote the first code for Vue Storefront myself a few years ago but have since stepped away having a hands-on role in the technology. Doing this PoC was my chance to finally work on the VSF Next architecture and I loved it.

The Salesforce APIs and GraphQL

As a member of the Beta Program, Divante was provided with the new developer’s portal with access to APIs and Salesforce Commerce development sandboxes.

The Salesforce team prepared really great documentation regarding the APIs and even provided some sample applications with a frontend based on LWC components.

Knowing that Vue Storefront would fit the bill perfectly, my goal was to provide an alternative mature frontend and connect it to the APIs. Shortly into my research, I discovered that I need a kind of bridge that will be an API Gateway handling the authorization, request throttling, security, and caching over standard Salesforce OCAPI clients. The folks from the Sample Apps teams provided a generic Apollo based server that I decided to develop further. I put it into the Salesforce GraphQL Bridge repo on Github.

Salesforce GraphQL Bridge in the GraphQL playground

Many people use Mulesoft for the same purpose. It is great but I felt like this bridge could also be a great starting point for developing Salesforce Commerce Cloud Headless Appliances.

I took the original sample application and extended it by adding:

Category listing
Additional product details
ENV variables-based configuration (to easily deploy it to Heroku)

I also removed the LWC based frontend to make it ready for a Vue Storefront replacement.

The project is BSD-3 licensed and can be a great starting point for extending the GraphQL interfaces. In fact, any contributions are more than welcome.

With the commerce endpoints, you can easily match any other data sources like external search services or CMS. It’s the unified data layer that powers the eCommerce frontend and can be used to mix-match any services of your choice in order to optimize the way the data is being fetched, cached, and processed.

Vue Storefront Next internals

When developing the new integration for Vue Storefront Next, I started with the project documentation. It states that, for the new platform to be integrated, we need to start with the boilerplate integration. It consists a mockups for the three required packages: api-clients, composables, and the theme.

API Client – A data layer of your application, not used directly in the UI. You can watch a video about the concept on our YouTube channel to learn more.
Composition API functions (aka Composables) – Functions using Vue Composition API. This is the actual business logic of the integration. It’s a mixed logic of core APIs with platform-specific code. Vue Storefront provides the following composables: useProduct, useCategory, useCart, useUser, useWishlist, useLocale, and useCheckout. Making an integration is all about providing those functions for your eCommerce platform.
Theme – This is basically a platform-specific part of your system that is using agnostic default themes under the hood. One of the most important requirements for any Vue Storefront integration is to work with common default themes. This is our way of ensuring that the quality of the UI layer, as well as developer experience, remains the same for every integration. Another reason why we keep a single theme is that it’s much easier to maintain and to retain quality. You can read more about the default theme here. You shouldn’t put there anything except plugins and modifications of nuxt.config.js

This is my Visual Studio Code with the api-client, composables, and theme modules that are building up for the SFCC integration.

SFCC recommends starting the integration with the API Client, so I started by installing the previously-created GraphQL bridge and setting it up for my sandbox SFCC instance.

I only needed about 8 hours to complete the API Client in the catalog scope (browsing products, filters, and pagination) and some extra time for adding the product details and navigation integration.

Can you imagine how quickly you can add a customized frontend using this framework? For me it was unbelievable and I believe that it is a significant step in the right direction.