What's Frontastic?

Hi, there 👋

Welcome to the Frontastic documentation, but before we dive into how to work with us, let's introduce ourselves a little.

Frontastic removes the complexity when building commerce sites in a headless world.

Frontastic enables you to:

  1. Orchestrate data from different headless services
  2. Build, deploy, and iterate on websites faster by using components
  3. Create, manage, and optimize websites in a business UI
  4. Serve your websites as PWAs, optimized for performance and mobile first

What comes with Frontastic?

There are 4 parts to Frontastic:

  • API hubAPI hub - The API hub combines our code, your code, and APIs to create the backend of a commerce site. Any backend development or extensions are done here. Known as `Catwalk` in code.
  • Developer toolingDeveloper tooling - What comes included for developing a site with Frontastic, such as, Frontastic CLI, Frontastic sandbox, deployment pipeline, and more.
  • Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`.
  • Frontend deliveryFrontend delivery - What comes included for delivering your commerce site to your customers, such as, DevOps, SSR, monitoring, logging, and more.

They're represented in the image below.

Frontastic's API hubAPI hub - The API hub combines our code, your code, and APIs to create the backend of a commerce site. Any backend development or extensions are done here. Known as `Catwalk` in code. comes with standard integrations for headless services that help with all the complex wiring that usually comes with composable architectures. But you can also create extensions to any API. With the API hub, you get a unified way of connecting and working with your technology stack.

Frontastic provides a development framework and all the necessary tools to build, deploy, and iterate on a commerce site. At the heart of what we do are Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code., which are React components with a schema. They're built by developers, added to pages by business users, the data is brought in from the API hubAPI hub - The API hub combines our code, your code, and APIs to create the backend of a commerce site. Any backend development or extensions are done here. Known as `Catwalk` in code., and they're delivered optimized for performance to your customers. To get you started quickly, Frontastic comes with a set of starter componentsstarter components - Frontastic components that come with each Frontastic project can be copied into your own project to use. Known in code as `boost theme`. for the most common commerce use cases, like product listings, details pages, cart, and checkout.

The Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. is the interface you use to manage your projects. Here, you can edit and optimize your sites, including pages, components, navigation, and layouts.

Last but not least, Frontastic provides the delivery layer that serves the website as a Progressive Web App (PWA). We provide Server Side Rendering (SSR) along with auto-scaling and fail-safe hosting.

For more information, see our article about the Frontastic architecture and Frontastic stack.

How do you work with Frontastic?

As a developer, you'll interact with Frontastic in 2 different ways. To extend the API hubAPI hub - The API hub combines our code, your code, and APIs to create the backend of a commerce site. Any backend development or extensions are done here. Known as `Catwalk` in code. or modify the Server Side Rendering, you'll work with a Frontastic sandboxFrontastic sandbox - A virtual machine hosted in the cloud that you can use for backend and some frontend development. They're provisioned from the developer area of the Frontastic studio. that's provisioned automatically in the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`.. To build, modify, and deploy Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code., you'll use our Frontastic CLIFrontastic CLI - Our Commandline Interface (CLI) that you can use for frontend development. in combination with the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`..

As a business user, you'll be working within the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. to create, manage, and optimize your commerce site.

Support

If you can’t find what you're looking for in the documentation or if you have any general feedback, please send us a message using the Submit a ticket button at the top of your page.


Did this page help you?