Explore  

Aha! Develop | Create an extension

At its simplest, an extension is made up of at least two files:

  • package.json — a configuration file that declares the contributions in the extension.

  • a JavaScript source code file containing the code for the extension contributions.

More complex extensions may contain many separate source code files and may include other file types like TypeScript, JSX, or CSS.

Please see Aha! web components for common UI elements that you can use inside your extensions.

The Aha! Develop CLI can create the skeleton of an extension, making it easier to get started.

You need to be an administrator with customization permissions to install an extension in your Aha! Develop account. Once installed, every Aha! Develop user can choose to Enable an extension in their personal settings.

Click any of the following links to skip ahead:

Install the Aha! Develop CLI

Before you can create an extension, you first need to install the Aha! Develop CLI, using:

$ npm install -g aha-cli

Top

Create a template extension

Now you are ready to create an extension.

$ aha extension:create

Give your extension a human readable name: my-awesome-extension
Who are you? Your personal or organization GitHub handle is a good identifier: aha-app
Each extension must have a universally unique identifer that is also a valid NPM package name.
Generally a good identifier is <organization-name>.<extension-name>.
Extension identifier: aha-app.my-awesome-extension
Creating... Extension created in directory 'my-awesome-extension'

This will create a new directory containing a simple package.json and the skeleton implementation of each type of contribution.

When you have your first set of changes and want to see them on Aha! Develop, run extension:install to install it:

$ aha extension:install
Installing extension 'aha-app.my-awesome-extension' to 'https://my-account.aha.io'
contributes views: 'samplePage'
contributes commands: 'sampleCommand'
Compiling... done
Uploading... done

Top

Update an extension

Finally, once an extension is installed, run extension:watch to quickly iterate on it:

$ aha extension:watch
Watching for changes in the current directory ...
... detected file change: src/commands/sampleCommand.js
Installing extension 'aha-app.my-awesome-extension' to 'http://my-account.aha.io'
contributes views: 'samplePage'
contributes commands: 'sampleCommand'
Compiling... done
Uploading... done

extension:watch will automatically upload changes to your account and will automatically update the page with your changes so they take effect immediately. This makes it very fast to make small changes and see the result.

Top

Suite overview
Aha! Roadmaps
Aha! Ideas
Aha! Whiteboards
Aha! Develop
    Develop
      Release notes