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 studio users
  • An action allows you to perform arbitrary API requests through our API hub
  • 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). We provide you with a pre-configured file packages/<project>/backend/index.ts in your GitHub customer repository.

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 the handler 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 sandbox
  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 repository:

frontastic init

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

frontastic run

The run command will start the build processes and bring you to the Frontastic CLI dashboard with all relevant information:

Using the hotkeys, press the b key to show the build log of your extensions:

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 sandbox. An empty screen here (or no red number for it on the dashboard) means that synchronization works flawlessly.

Using the s hotkey, you can see all the logs from your Frontastic sandbox. 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 library, there's a pre-configured, minimal webpack build process in place that's automatically started through Frontastic CLI.


Did this page help you?