Migration Steps for Cloud Apps Core

Copy

• Copy for LLM

  Copy page as Markdown for LLMs
• View as Markdown

  Open this page as Markdown
• Open in ChatGPT

  Get insights from ChatGPT
• Open in Claude

  Get insights from Claude
• Connect to Cursor

  Install MCP server on Cursor
• Connect to VS Code

  Install MCP server on VS Code

This document outlines the changes needed to migrate from the old plugin bridge system to the new Cloud Apps Core system.

Prerequisites

Install the New Package

First, install the required package:

yarn add @jtl-software/cloud-apps-core

Remove the Old Package

After completing the migration, remove the old package:

yarn remove @jtl-software/platform-plugins-core

Frontend Changes

Overview of Changes

The migration involves three main pattern changes:

1. Package and Import: Switch from platform-plugins-core to cloud-apps-core
2. Initialization: Update the AppBridge initialization to happen in before the App renders.
3. Method Calls: Add .method namespace to all bridge method calls
4. Event Handling: Add .event namespace to all event subscriptions

1. Import Changes

Before:

import { createPluginBridge, PluginBridge } from '@jtl-software/platform-plugins-core';

After:

import { AppBridge, createAppBridge } from '@jtl-software/cloud-apps-core';

2. Initialization

The main change in initialization is moving the AppBridge creation outside of your React component to happen before the app renders. This ensures the bridge is available immediately when your app starts.

Before:

function YourAppComponent() {
  // Store the AppBridge instance in component state
  const [appBridge, setAppBridge] = useState<AppBridge | undefined>(undefined);

  useEffect((): void => {
    console.log('[HelloWorldApp] createAppBridge...');
    createAppBridge().then(bridge => {
      console.log('[HelloWorldApp] bridge created!');
      // Store the bridge instance in state for use throughout your component
      setAppBridge(bridge);
    });
  }, []);

  // Rest of your component...
}

After:

import { createAppBridge } from '@jtl-software/cloud-apps-core';

createAppBridge().then(appBridge => {
  createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App appBridge={appBridge} />
  </StrictMode>,
  );
});

3. Method Calls

All bridge method calls now require the .method namespace to maintain better organization and prevent naming conflicts.

Before:

appBridge.callMethod('methodName', { param: 'value' });

After:

appBridge.method.call('methodName', { param: 'value' });

4. Event Handling

Before:

appBridge.subscribe('eventName', (data: EventDataType) => {
  // Handle event data
});

After:

appBridge.event.subscribe('eventName', (data: EventDataType) => {
  // Handle event data
});

Migration Checklist

• Install the new package: yarn add @jtl-software/cloud-apps-core
• Update import statements to use AppBridge and createAppBridge
• Replace bridge.callMethod() calls with bridge.method.call()
• Update event subscriptions to use appBridge.event.subscribe()
• Test all functionality after migration
• Update any TypeScript types if needed
• Remove the old package: yarn remove @jtl-software/platform-plugins-core