Guide

This guide will step you through creating an extension similar to the TsDemo example. This includes coding, bundling, testing and deploying the extension.

The main steps are:

1. Root Folder
   Create or select a folder under which you will create the motif extension(s). Let's call it, extensions-dev.

2. Install Motif
   Install the motif repository under the extensions-dev folder.

3. Custom Extensions Folder
   Create a folder for custom extensions under the custom-motif-extensions folder. In this case, ts-demo.

4. Create NPM Package file
   Create the NPM package file for the new motif extension in the extension (ts-demo) folder.

5. Extension
   Create the TsDemoExtension extension class.

6. Frame
   Create the BlueFrame Frame class.

7. Strings
   Create the translatable strings.

8. Entry Point
   Create the entry point (index.js) module.

9. Config
   Create the tsconfig.json file needed to compile the extension.

10. Bundling
    Create the webpack tsconfig.json file needed to compile the extension.

11. Test
    Test and debug the extension with Motif.

12. Deploy
    Include the extension in a Motif deployment.