Skip to content

Deploying Extensions

The extension framework allows developers the freedom to host their extensions on the platform of their choosing. Popular hosting providers include Netlify, Vercel, and GitHub Pages.

Example of Deploying Your Extension to Netlify

  1. Create your app using a front-end library/framework (like React, Angular, etc.).
  2. Build the app (usually by running a command like "npm run build").
  3. Deploy the app to Netlify - Simple video explaining how to deploy react app on netlify.
  4. Update the iframeUrl with the Netlify URL where your app/extension now lives. Remember: The iframeUrl is how VibeIQ displays your app/extension!

VibeIQ also offers a managed hosting service for extensions that allows developers to deploy their extensions without the need to manage the hosting infrastructure.

Deploying a VibeIQ Managed Extension

Warning

All VibeIQ managed extensions are deployed publicly and can be accessed through their URL. Please consider this when developing the extension's functionality.

Info

VibeIQ managed extension deployments currently only support Angular extensions. If you are interested in deploying a non-Angular extension, please reach out to your VibeIQ CSM.

Deploying an Extension Package

We will refer to a specific version of the extension as an "extension package". This is to distinguish and differentiate it from "app versions", since they are different concepts and can be used independently (creating an extension package deployment does not automatically publish a new version of tha app, nor change any existing extension deployment).

To create an extension package from the current local state of your extension code, you simply run the following command in the root directory of your app (where the app.yml file is located), and specify the extension identifier with the -i flag.

contrail app extension deploy -i <extension-identifier>

The extension identifier is in your app.yml file

extensions:
  - identifier: demo-extension-identifier # (1)
    name: Data Exporter
    userApps:
      - BOARD
    modalDimensions:
      width: 660px
      height: 375px
      maxWidth: 95vw
    iframeUrl: http://example.com/
    extensionType: BOARD_EXTENSION
  1. The extension identifier is in your app.yml file

When you run this command the following happens:

  1. The CLI will look into the app.yml file and find the extension with the specified identifier.
  2. The CLI will look into the extensions/<extension-identifier> directory to find your code. If your extension is not in this directory, or your extension identifier does not match the folder name, the CLI will throw an error.
  3. The CLI will install the production dependencies in package.json of your extension.
  4. The CLI will build your extension and upload the build to the VibeIQ servers, where it will be hosted.
  5. The CLI will print out the URL where the extension is hosted in the VibeIQ servers.
Sample CLI Output
contrail app extension deploy -i some-extension-identifier
.
.
.
# Build process logs...
.
.
.
SUCCESS Extension package is ready.
SUCCESS Extension deployment URL: https://d2ja3jpe4d2noo.cloudfront.net/packages/8REZp3p0TsWJxPVM/index.html

You can use this url in the local You can now use this URL in your app.yml file to publish the app the extension 

extensions:
  - identifier: demo-data-exporter
    name: Data Exporter
    userApps:
      - BOARD
    modalDimensions:
      width: 660px
      height: 375px
      maxWidth: 95vw
    iframeUrl: https://d2ja3jpe4d2noo.cloudfront.net/packages/8REZp3p0TsWJxPVM/index.html   # (1)
    extensionType: BOARD_EXTENSION

  1. You can use the URL printed by the CLI in the iframeUrl field of the extension definition.

Listing Available Deployments

To get a list of all available deployments for an extension, you can run the following command. If a package fails to deploy, it will not have an associated URL. 

contrail app extension deployment list --all

┌─────────┬────────────────────────────┬────────────────────┬────────────┬──────────────────────────────────────────────────────────────────────────────┐
│ (index) │ Created At                 │ Package ID         │ Status     │ URL                                                                          │
├─────────┼────────────────────────────┼────────────────────┼────────────┼──────────────────────────────────────────────────────────────────────────────┤
│ 0       │ '2025-06-10T21:35:19.111Z' │ '7y9wS9kLRX0R8nnG' │ 'DEPLOYED' │ 'https://d1cjl68pu6szkr.cloudfront.net/packages/7y9wS9kLRX0R8nnG/index.html' │
│ 1       │ '2025-06-10T20:16:17.373Z' │ 'vZk0u_Tdyky0hFXk' │ 'DEPLOYED' │ 'https://d1cjl68pu6szkr.cloudfront.net/packages/vZk0u_Tdyky0hFXk/index.html' │
│ 2       │ '2025-06-10T20:15:27.595Z' │ 'XbwjGketIXW2I9Oh' │ '-'        │ '-'                                                                          │
└─────────┴────────────────────────────┴────────────────────┴────────────┴──────────────────────────────────────────────────────────────────────────────┘

Info

The contrail app extension commands, like the contrail app commands operate on your local current directory. This means that the command contrail app extension deployment list will only list the deployments of your current app, not the extension deployments for all apps in your org.

Conversely, if your app exposes multiple extensions, the contrail app extension deployment list command will list all deployments for all these extensions.