1. Scayle Resource Center
  2. Storefront
  3. Getting Started
  4. What is Storefront?

What is Storefront?

About Storefront Boilerplate

Storefront Boilerplate is an all-in-one starter kit for building high-performance e-commerce shops for the SCAYLE Commerce Engine. It makes it quick and easy to build a best-in-class shop frontend. The latest version of Storefront Boilerplate is based on Nuxt and Vue 3 and consists of two parts:

  • Storefront Core (SFC): the headless storefront that provides design-agnostic business logic and integrations with the SCAYLE backend.
  • Storefront Boilerplate (SFB): the complete starter Nuxt application which includes the Storefront Core along with all features and pages that are required for a modern e-commerce frontend.

The Storefront Boilerplate is built in a way that makes it easy to change or extend the shop design. An advantage of this approach is that the effort for launching a new e-commerce shop is drastically reduced because you only have to focus on the UI and design layer.

Benefits

  • Progressive Technology: Storefront Core provides fast performance while still delivering optimal SEO and mobile experiences due to hybrid rendering.
  • Fully featured: out of the box, the Storefront Boilerplate provides:
    • Product Listings and Detail Pages
    • Category tree navigation and filtering
    • Wishlist and basket functionality
    • A complete checkout integration
    • Best-of-class user tracking
    • Internationalization
    • Integration with a headless CMS for managing content
  • Reusability/Scaling: modular features, which you can easily integrate and reuse.
  • Easy Configuration: configuration is done via .env files.
  • Well-tested: Covered by a suite of unit and end-to-end tests, the Storefront Core and Boilerplate are also used with confidence in production by the majority of SCAYLE clients
  • Customization: the UI and design are customizable, allowing you to deliver a shop frontend according to your wishes.

Architecture

Storefront Core makes it easy to build a Nuxt-based storefront application on top of the SCAYLE Commerce Engine. It consolidates interactions with various SCAYLE APIs and middlewares into a set of ergonomic composable functions. Additionally, it provides modules to handle caching, redirects, sessions, and authentication.

Storefront Core solution overview.

Headless Storefront

The Storefront Core is a headless solution. It is an NPM package that is registered as a module inside a Nuxt application. It provides additional functionality functions but does not include any UI code. That is the responsibility of the Storefront Boilerplate and your application. The package includes:

  • API Layer: An auto-generated API and RPC methods for interacting with the SCAYLE engine. This is used internally by the composables.
  • Composables: Methods for interacting with data like products, categories, etc.
  • Utilities: Functions for managing and interacting with shop data like product attributes.

Components of Storefront Core