Storefront API

# Introduction

Storefront API is a customizable, modular eCommerce API gateway. You can use this product to provide all your frontends - including mobile applications - with a single data source. GraphQL support lets you easily implement the BFF (Backend for Frontend) pattern. It unifies the interfaces between all the systems backing your frontend, and lets you query multiple data sources with a single HTTP request.

Storefront API is backend agnostic. That means it's not an eCommerce backend itself. Out of the box it's provided with Read/Write integrations with Magento1, EpiServer, Magento2, OpenCart, and SpreeCommerce

The architecture is modular. Out of the box, we provide a set of modules (default-catalog, default-vsf, default-img) implementing our agnostic eCommerce data formats. By default, all the catalog information is stored in ElasticSearch (read operations). The write operations are forwarded to dedicated API drivers (Magento1, Magento2, Spree, and others available).

GraphQL Playground is included This is a screen showing the GraphQL Playground on storefront-api schema. Check the schema docs. It can be 100% customized.

# Key features

  • Fully functional and extendbable eCommerce API Gateway,
  • Read/Write integrations with Magento1, EpiServer, Magento2, OpenCart, and SpreeCommerce,
  • Additional integrations including Prismic with GraphQL support,
  • Vue Storefront PWA frontend support,
  • Blazingly Fast - based on ElasticSearch with an average response time < 100ms,
  • GraphQL API with 100% Customizable GraphQL schema,
  • REST API with ElasticSearch DSL support,
  • Catalog, Cart, User, Stock, Review, Order, and Image resizer modules available through the REST API,
  • Multistore support based on the store-views (aka. sales channels) concept,
  • Dynamic tax calculation engine,
  • Extendable via custom extensions (including GraphQL schema and resolver extensions),
  • ElasticSearch maintenance tools - dump/restore/schema maintenance/migrations,
  • Custom eCommerce Backend integrations via integration sdk.

# Modules

Storefront API provides all features, GraphQL schemas, ElasticSearch resolvers and API handlers via Modules. That's it. The default schema and the features described in the later parts of the documentation have been implemented by the default-catalog, default-img and default-vsf modules. You can customize, clone or disable them.

Each module presents its own:

  • GraphQL schema and resolvers,
  • ElasticSearch mappings,
  • API methods - via express.js handlers and middlewares.

Read more about Storefront API modules Read more about The Default modules

Storefront API architecture

# How does it connect with backend platforms?

This product manages to be platform-agnostic thanks to dedicated API connectors for eCommerce backend platforms. The data format in storefront-api is always the same for any platform, which means no matter which eCommerce backend you use, your frontend remains the same without any change.

This means you can easily migrate from one platform to another (or one version to another, e.g. Magento 1 to 2) without touching your frontend.

The API connector, by default, works in two phases:

  • The data pump pulls static data (catalog, orders, etc.) from your eCommerce platform to Storefront API Elasticsearch and changes its format to our data schema. Once it is finished pulling the data, you can query the product catalog. After pumping the data into Elasticsearch is done, it will stay in sync with changes made on the backend platform and update its content accordingly.

  • The dynamic calls API is a set of REST API modules: user, cart, review, etc. The dynamic API endpoints are located in the src/api folder and can be extended by custom extensions. The default API endpoints make use of the PlatformFactory which calls the platform-specific API clients defined under src/platform. Platform drivers work like a Proxy to the real eCommerce backend. Check the API specification

Some of the most popular backend platforms already have working integrations (Magento 2, Magento 1, CoreShop, BigCommerce, WooCommerce), but you can easily make your own with the integration sdk.

Read the integration tutorial

# Storefront API config file

Most of the Storefront configuration (like the active theme, backend API addresses, multistore setup, etc.) is done through its config file which can be found under the config folder. The default.json file contains all the default setup information.

For your implementation, you should create a local.json file in the same directory and include the fields from default.json that you want to override. These two files will be merged in favor of local.json during the build process.

Read more on configs

# What else

You may not believe me, but this is all you need to know to start working with Storefront API! Once you are done wrapping your head around the basics, look around the docs and visit our community slack to dig deeper into the project.

Installation →