Frontastic extensions

Frontastic provides 3 types of extensions:

  • A data source is used to provide data to a page that can be configured by Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. user
  • An action allows you to perform arbitrary API requests through 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.
  • The dynamic page handler gives you the power to resolve Frontastic page folder URLs dynamically

Any such extension is implemented in JavaScript (or preferably TypeScript) and run in the Frontastic API hub extension runner.

This article explains the basics for extension development which apply to all extension types. If you're familiar with this process, you can dig deeper into developing individual extension types:

Developing a data source extension
Developing an action extension
Developing a dynamic page extension

📘

Frontastic currently supports Node 14.

Defining extensions

The Frontastic API hub extension runner expects a single JavaScript file to be run, which includes the full code (including all required library dependencies). This JavaScript file default-exports a standardized object that configures functions to be run as extensions. The object keys define the extension type and an identifier for the extension. For example:

export default {
  'data-sources': {
    'example/star.wars-movie': function () {/* ... */},
    'example/star.wars-movie-list': function () {/* ... */},
  },
  'actions': {
    'cart': {
      'add':  function () {/* ... */},
      'remove':  function () {/* ... */},
    },
    'account': {
      'login': function () {/* ... */},
      'logout': function () {/* ... */},
    }
  },
  'dynamic-page-handler': function () {/* ... */},
}

Here, you can see functions assigned for each extension type without going into detail on the corresponding extension. These details are explained in the detailed extension type documentation.

Developing extensions

👍

Prerequisites

The Frontastic extension development process works like this:

  1. You edit an extension source file locally
  2. A build process picks up this change and creates a new build instantly
  3. If the build is successful, it's synchronized to your 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.
  4. The Frontastic API hub extension runner picks up the change instantly
  5. You can now trigger the corresponding extension depending on the extension type

To start the Frontastic extension build process, execute the following commands on your shell in the root directory of your Git checkout:

frontastic init
frontastic run

The first command will ask you for the hostname of your Frontastic sandbox (for more information, see the Frontastic sandbox article).

The second will bring you to the Frontastic CLIFrontastic CLI - Our Commandline Interface (CLI) that you can use for frontend development. dashboard with all relevant information:

Using the hotkeys, press the b key to show the build log of your extensionsextensions - Data connectors that you add specifically to your project.:

This example shows a successful build. The build process is automatically re-triggered whenever you change any source file in your extension.

Using the f hotkey, you can see the synchronization log up to your 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.. An empty screen here (or no red number for it on the dashboard) means that synchronization works flawlessly.

The hotkey a shows the extension runner log from your 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.. You can see any errors that occur in the runner, information about when your extension build is reloaded (after every re-compile), when an extension is executed, and also any console.log calls from your extensions during execution:

Compiling extensions

The compilation mechanism for extensions can be chosen freely under 1 constraint: The output must be a single JavaScript file that was compiled to be run in Node.js.

If you're using the Frontastic extension libraryFrontastic extension library - Extensions that are available with a Frontastic project that are copied and pasted into their own project to use. Part of our developer tooling., there's a pre-configured, minimal webpack build process in place that's automatically started through Frontastic CLIFrontastic CLI - Our Commandline Interface (CLI) that you can use for frontend development..


Did this page help you?