docs
  1. Storefront Application
  2. Getting Started
  3. What Is Storefront?

What is Storefront?

About Storefront

The SCAYLE Storefront is a powerful and flexible solution that combines modern technologies with a modular architecture, making it easy to create high-performance, customizable e-commerce shops for for the SCAYLE Commerce Engine. This makes it quick and easy to build a best-in-class shop frontend.

Benefits

  • Progressive Technology: SCAYLE Storefront relies on modern technologies to deliver a best-in-class user experience and fast performance.
  • Fully featured: Out of the box, the Storefront Application provides:
  • Reusability/Scaling: Modular features that you can easily integrate and reuse.
  • Easy Configuration: Configuration is done via .env files.
  • Well-tested: The Storefront SDKs and Storefront Application are proven in production, serving dozens of SCAYLE clients, and are backed by comprehensive unit and end-to-end test coverage.
  • Customization: Our flexible UI and design options empower you to create a shop frontend tailored to your vision.

The Storefront Application is built to make it easy to change or extend the shop design. This approach drastically reduces the effort required to launch a new e-commerce shop, as you only have to focus on customizing the UI and design layer to your specific needs.

Storefront Structure

The SCAYLE Storefront consists of two deeply integrated main parts:

  • Storefront SDKs: The headless storefront that provides design-agnostic business logic, feature packages, composables, and several helpers and utilities to simplify the development of Nuxt-based e-commerce applications on top of the SCAYLE Commerce Engine.
  • Storefront Application: This is the complete starter application based on Nuxt and Vue 3, which includes the Storefront SDKs along with all the features and pages required for a modern e-commerce frontend.

What's Next?

Whether you're building a new storefront or customizing an existing one, this documentation will help you get started:

  • Setup your Storefront - Step-by-step instructions on how to set up your SCAYLE Storefront. From configuring your environment to running your first application, this page will walk you through the process of getting your storefront up and running.
  • Basic Theming - Discover how to customize the look and feel of your storefront. Learn about the theming structure and how to modify the UI to match your brand’s vision.

Architecture

SCAYLE provides a modular package architecture for its storefront solution. This approach enables you to upgrade or customize specific features without disrupting the entire application. Instead of requiring a complete overhaul with each major update, functionality is divided into independent, manageable packages.

Key Benefits:

  • Flexibility & Scalability – Developers can selectively update or modify features without impacting other application parts.
  • Easier Upgrades – Projects with limited resources can adopt changes at their own pace.

Each feature’s core logic is extracted into dedicated packages, while the user interface components (Vue components) remain within the Storefront Application to ensure consistency in design. This separation allows for efficient feature delivery while minimizing complexity and dependencies.

At the heart of this architecture is @scayle/storefront-nuxt, which acts as the central hub connecting all independent feature packages. This ensures seamless integration and communication across different functionalities.

As part of this transition, existing feature-specific functions within the current system will be phased out and migrated to their corresponding feature packages, making the platform more maintainable and future-proof.

Storefront SDK (Storefront) Solution Overview.

1. Storefront SDKs

The Storefront SDKs are a headless solution. They are an NPM package registered as a module inside a Nuxt application. The SDK provides additional functionality but does not include any UI code; that is the responsibility of the Storefront Application.

Storefront SDKs also simplify the development of Nuxt-based e-commerce applications on top of the SCAYLE Commerce Engine. They provide essential e-commerce building blocks, including product management, shopping cart handling, and user authentication.

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.
  • Features: Packages encapsulate the essential logic of a specific feature, allowing for independent upgrades or customization without affecting other parts of the application.
Components of Storefront SDKs

Designed for seamless integration with Vue and Nuxt, the SDKs offer sensible defaults and best practices, reducing implementation effort. They also streamline data flow by connecting to the SCAYLE Backend through designated APIs.

Additionally, the SDKs consolidate interactions with SCAYLE APIs into ergonomic composable functions while providing caching, redirects, sessions, and authentication modules.

2. Storefront Application

The Storefront Application provides a ready-to-use starter kit built on the popular Nuxt framework. It comes pre-integrated with the Storefront SDKs and demonstrates the implementation of standard e-commerce features and pages, giving developers a significant head start. Beyond just a starting point, the Storefront Application showcases best practices for integrating and utilizing various features, serving as a valuable reference point for guidance and inspiration.

Browser Support

Since the Storefront Application is built using the Nuxt framework, we follow the same guidelines defined by Nuxt for browser support:

  • Nuxt 3 officially supports evergreen browsers only.
  • The core browser set targets the two most recent major versions of Chrome, Firefox, and Edge on a monthly basis and Safari on a yearly basis.

Further Education – SCAYLE Academy

Next up
Set up your Storefront