New CoreMedia Studio Client packages can be added to the project using the Blueprint extensions mechanism or by adding them as direct dependencies of the @coremedia-blueprint/studio-client.main.base-app or @coremedia-blueprint/studio-client.main.app package. Using the extension mechanism is the preferred way. But as it is based on the same steps of adding a package directly, this is firstly covered and the additional required steps for adding Studio Client packages as extensions are described at the end of the section.

pnpm Configuration

Create a jangaroo project in apps/studio-client/apps/main/extensions in a directory named after your extension, e.g. for the extension "sample", by triggering the starter kit and following the steps:

pnpm create @jangaroo/project apps/studio-client/apps/main/extensions/sample

The starter kit will also offer to add the newly created package to the studio-client workspace. Confirm this option.

Make sure to also run pnpm install from the workspace root after the package has been added.

Source Files and Folders

A Studio plugin package contains at least two files: the plugin descriptor file located in the package's root folder (jangaroo.config.js) and the initializing plugin class (src/SampleStudioPlugin.ts).

The plugin class only implements the init method of the EditorPlugin interface:

import EditorPlugin from "@coremedia/studio-client.main.editor-components/sdk/EditorPlugin";
import IEditorContext from "@coremedia/studio-client.main.editor-components/sdk/IEditorContext";

class SampleStudioPlugin implements EditorPlugin {

  init(editorContext: IEditorContext): void {
    // ...
  }
}

export default SampleStudioPlugin;
}

Now it's time to add the plugin descriptor to the jangaroo.config.js file. The plugin descriptor specified therein is read after a user logs in to the Studio web app. It contains a reference to your plugin class and a user-friendly name of the Studio plugin.

module.exports = jangarooConfig({
  // ...
  sencha: {
    // ...
    namespace: "com.coremedia.blueprint.studio.sample",
    studioPlugins: [
      {
        name: "Sample Plug-in",
        mainClass: "com.coremedia.blueprint.studio.sample.SampleStudioPlugin"
      }
    ]
  }
}

Each JSON object in the studioPlugins array may use the attributes defined by the class EditorPluginDescriptor, especially name and mainClass as shown above. In addition, the name of a group may be specified using the attribute requiredGroup, resulting in the plugin only being loaded if a user logs in who is a member of that group.

Additional CSS files or other resources required for the plugin can be declared in the sencha configuration of the jangaroo.config.js.

When set up correctly, your project structure should build successfully using

pnpm -r run build

Note

Additional steps would be adding resource bundles and plugin rules to your plugin. For more details about this and developing Studio plugins and property editors have a look at the Studio Developer Manual.

Adding Studio Client Packages as Blueprint extensions

How to work with Blueprint extensions is described in detail in Section 4.1.5, “Project Extensions”. For Studio client packages there are three extension points:

The Studio client packages are packaged into apps. CoreMedia distinguishes between so-called (base) apps and app overlays. An app is a Sencha Ext JS app and includes the Ext JS framework, Studio core packages and generally all packages that participate in theming. Packages of an app are included in the Sencha Cmd build of the Sencha Ext JS app and are thus statically linked into the app. An app overlay in contrast references an app and adds further packages to this app. These packages are not included in the Sencha Cmd build of the Sencha Ext JS app and instead can be loaded at runtime into the app. Consequently, they are dynamically linked into the app.

The CoreMedia Blueprint features one Studio app, namely the @coremedia-blueprint/studio-client.main.base-app package with Jangaroo type app. In addition, there is one app overlay, namely the @coremedia-blueprint/studio-client.main.app package with Jangaroo type app-overlay. It references the studio-client.main.base-app. If something is wrong with the overall Studio app, it is typically sufficient to just re-compile studio-client.main.base-app.

Both apps come with their own extension points. Use the extension point studio-client.main-static (for the studio-client.main.base-app) for new packages that do theming and the extension point studio-client.main (for the studio-client.main.app) for packages that come without theming. Also, note that there must never be a dependency of a studio-client.main-static extension package to a studio-client.main extension package.

Adding Studio Server Packages as Blueprint extensions

Additional packages for the Studio REST Service (Java / Maven) use the studio-server extension point.