Storefront API

Storefront GraphQL API. Easy to use. Extendable. Blazingly fast. ElasticSearch included. BFF (Backend for frontend) driven. Works great with: Magento1, Magento2, Spree, OpenCart, and Pimcore - out of the box. Easy to integrate with custom backends.

You can use the Storefront GraphQL API to integrate all your backend systems with your eCommerce frontend under a single GraphQL/REST API. By default, all catalog information is stored in ElasticSearch, and all the write operations are forwarded to the platform driver (Magento1, Magento2, Spree, and others available).

How to get started?

Storefront API comes with a default product schema - compatible with the Vue Storefront project - and can be a drop-in replacement for vue-storefront-api. You can start a dev instance, including a demo data set integrated with a Magento 2.3 demo instance.

To run storefront-api in development mode, please run:

docker-compose up

Restore the demo data set: docker exec -it sfa_app_1 yarn restore7

After successful installation, you can start playing with GraphQL queries using your local GraphQL Playground, which is exposed under: http://localhost:8080/graphql

Details:

• Installation tutorial
• How to create a first module - tutorial
• GraphQL schema
• REST API
• Configuration file explained

Core Team

In case of any questions please contact our core team (we are on Slack)

• @resubaka - Jens Sadowski
• @pkarw - Piotr Karwatka
• @pandrzejewsky - Patryk Andrzejewski

Demo

You can play with the GraphQL endpoint over https://demo.storefrontapi.com/graphql/

Example query you can enter:

{ 
  products (filter:{
      type_id:{eq:"configurable"}
  }) {
    items { 
      name
      price
      description
      configurable_children { name, price }
    }
  }
}

Key features

• Fully functional and extendable eCommerce API Gateway,
• Modular architecture with easy customizable default e-Commerce module,
• Read/Write integrations with Magento1, EpiServer, Magento2, OpenCart, SpreeCommerce,
• Additional integrations including Prismic with GraphQL support,
• Vue Storefront PWA frontend support,
• Blazingly fast - based on ElasticSearch with avg. response times < 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 a 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 an integration SDK.

Modules

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

Each module provides it's own:

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

Read more on Storefront API modules Read more on The Default modules

Production-ready

Storefront API originated from the vue-storefront-api project and is currently backing 30+ production sites, including: Zadig&Voltaire, Klebefieber, Wonect and others.

Documentation

Please check our Official documentation. You will find there some integration and customization tutorials, and the API specification.

Example use cases

• Headless eCommerce data source for any React/Vue/Angular frontend connected to Magento or any other supported eCommerce platform,
• GraphQL Gateway which takes data from an existing REST API and mixes it with ElasticSearch or Database data,
• Custom GraphQL schema - optimized for your backend platform,
• Custom eCommerce Backend - by implementing custom Cart, User, Stock modules and re-using the Catalog service.

Requirements

• Docker and Docker Compose

The following are already included in the storefront-api Docker image, but required if you do not use containerization:

• Node.js 10.x or higher
• Yarn

REST Access

Catalog API calls are compliant with ElasticSearch (they work like a filtering proxy to ES). More on ES query here: ElasticSearch queries tutorial

The Elastic search endpoint is: http://localhost:8080/api/catalog/search/<INDEX_NAME>/. You can run the following command to check if everything is up and runing (it assumes vue_storefront_catalog as the default index name):

curl -i http://elastic:changeme@localhost:8080/api/catalog/vue_storefront_catalog/_search

Data formats

The data formats can be easily modified to suit your needs by modifying the src/graphql/elasticsearch/** schemas and resolvers. Check our GraphQL Schema documentation for the details regarding data formats.

Adding custom modules with their dependencies (Yarn only)

When adding custom modules(https://sfa-docs.now.sh/guide/modules/introduction.html), you might want to define some dependencies inside them. Thanks to Yarn workspaces, dependencies defined inside your custom module will be installed when you execute yarn at the project root level, so it's way easier and faster than installing all modules dependencies separately.

To do this, define the package.json with your dependencies in your custom module:

• src/modules/{your-custom-extension}/package.json
• src/platforms/{your-custom-platform}/package.json

NOTE: npm users will still have to install the dependencies individually in their modules.

Self-signed certificates

In non-production environments, other services often use self-signed certificates for secure connections. You can easily set up the application to trust them by putting them in the config/certs directory.

Contributing

If you like the idea behind Vue Storefront and want to become a contributor, do not hesitate and check our list of the issues or contact us directly via [email protected].

If you have discovered a bug, or have a feature suggestion, feel free to create an issue on Github.

The Story

Storefront API is brought to you by the Vue Storefront Team and is based on Vue Storefront API. The intention is to replace vue-storefront-api with a more general-purpose API Gateway which you may use with any web or mobile frontend, including Vue, React, Angular and native apps. Its a drop-in replacement for vue-storefront-api if you happened to use it before. It works great with Vue Storefront.

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

Partners

Storefront API is a Community effort brought to you by our great Vue Storefront Core Team and supported by the following companies:

Partners are encouraged to support the project in various ways - mostly by contributing to the source code, performing marketing activities, evangelizing and, of course, implementing production projects. We support our partners via dedicated contact channels, workshops, and by sharing leads from merchants interested in implementations.

If you would like to become our Partner, just let us know via [email protected].

License

MIT