How it's supposed to work

fronnt is meant to be a middleware, which serves as a single API interface for storefronts on the one side and allows connecting different backends and services on the other side.

fronnt architecture


The heart of fronnt is a GraphQL schema, which should cater all needs of modern eCommerce storefronts. It defines the structure of things like products, categories, carts, etc.

The schema itself resides in the @fronnt/core package. A printed overview can be found in the documentation.

The schema can be extended by connectors.


fronnt comes as an envelop plugin, which can be used in any envelop based environment, fronnt is actually a GraphQL server, preconfigured with an opinionated GraphQL schema for eCommerce storefronts.

To make it easy to get started, the @fronnt/server package provides an optionated GraphQL HTTP server implementation based on fastify and graphql-helix.


Connectors provide the actual implementation of the schema.

You can hook up multiple connectors to the server. In this case, they will be applied in the order of definition, which allows us to overwrite specific resolvers. That way, you could for example use a pre-build connector for your shop system and implement custom features with an additional custom connector, which is programmed explicitely for your project's needs.


The API is the actual GraphQl endpoint. It's the single interface for your storefront applciations.

The server supports introspection as well, which allows you the generate schema files, TypeScript types and much more.