What's Frontastic?

Hi, there 👋

Welcome to the Frontastic documentation, but before we go through 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 with our 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.
  2. Build, deploy, and iterate on websites faster by using our component layer
  3. Create, manage, and optimize websites 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`.
  4. Serve your websites as PWAs, optimized for performance and mobile first with our delivery layer

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.

With the 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., you can connect to any backend API and use the content and data from them when building websites. With 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., you get a unified way of connecting and working with your technology stack as it takes care of all the complex wiring that usually comes with composable architectures.

All extensions to backend APIs are written as JavaScript cloud functions. A ready-to-use extension to commercetools is included.

Frontastic comes with a component librarycomponent library - Frontastic components that are available with a Frontastic project that are copied and pasted into their own project to use. Part of our developer tooling. for the most common commerce use cases, like product listings, details pages, cart, and checkout. You can copy these into your project to get started quickly.

Components are made available 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`., where anyone in your team can manage the full website without needing a developer. Here, you can edit and optimize your sites, including pages, components, navigation, and layouts.

Frontastic provides the delivery layer that serves the website as a Progressive Web App (PWA). Frontastic uses Next.js, which is based on React and is known for its performance and features for developing web applications. We also provide auto-scaling and fail-safe hosting and Server Side Rendering (SSR).

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 create extensions, 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 the 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?