Skip to main content

Self-hosted embedded viewer

Foxglove offers a fully self-hosted embedded viewer, available on Enterprise plans. This viewer is hosted on your own infrastructure and can be used to embed Foxglove in your application or website without relying on Foxglove's servers or requiring users to sign in to a Foxglove account.

Installation​

Contact Foxglove for deployment documentation.

Basic setup​

For the case of the fully self-hosted embedded viewer, you need to provide the parent element to which the iframe will be appended and the URL from which the embedded viewer will be served. The organization slug is not required for the self-hosted embedded viewer, so you can pass undefined.

import { FoxgloveViewer } from "@foxglove/embed";

// Create a frame with a parent element
const viewer = new FoxgloveViewer({
  parent: document.getElementById("container")!,
  orgSlug: undefined,
  src: "http://localhost:8080/",
});

Extensions​

warning

Since the self-hosted embedded viewer runs on your own infrastructure, you won't be able to access your organization's extensions hosted on Foxglove's servers.

You can install extensions to the embedded viewer using the installExtensions method. You can pass a list of .foxe file handles or URLs to a .foxe file.

The following example shows how to open a file picker and install the selected extension.

window
  .showOpenFilePicker({
    multiple: false,
    types: [
      {
        description: ".foxe",
        accept: {
          "application/zip": [".foxe"],
        },
      },
    ],
  })
  .then(async (handles) => {
    const file = await handles[0]!.getFile();
    viewer.installExtensions([file]);
  });