Browser Platform

The purpose of the Main app is to handle complex and important operations, but its setup is extremely simple and easy. The following sections describe how to create a Main app for your io.Connect Browser project and install and initialize properly the respective libraries depending on the web framework you are using - JavaScript ( @interopio/browser-platform), React (@interopio/react-hooks) or Angular (@interopio/ng). All libraries are free to install from the public NPM registry, but require a valid license to operate.

For information on purchasing the io.Connect Browser platform or requesting a trial license, contact us.

JavaScript

Install the @interopio/browser-platform library in your project:

npm install @interopio/browser-platform

Import the package in your Main app and initialize the @interopio/browser-platform library using the IOBrowserPlatform() factory function. It's required to provide a valid license key in the configuration object for the library:

import IOBrowserPlatform from "@interopio/browser-platform";

// Configuration for initializing the library.
// The only required property is `licenseKey`.
const config = {
    licenseKey: "my-license-key"
};

// Use the `io` property of the object returned by
// the factory function to access the io.Connect APIs.
const { io } = await IOBrowserPlatform(config);

The factory function will initialize and configure everything needed for a fully functioning io.Connect Browser project.

React

Install the @interopio/react-hooks library in your project:

npm install @interopio/react-hooks

Initialize the @interopio/react-hooks library in one of the following ways. It's required to provide a valid license key in the configuration object for the library:

• using the <IOConnectProvider /> component:

import IOBrowserPlatform from "@interopio/browser-platform";
import { IOConnectProvider } from "@interopio/react-hooks";

const settings = {
    browserPlatform: {
        factory: IOBrowserPlatform,
        config: {
            licenseKey: "my-license-key"
        }
    }
};

ReactDOM.render(
    <IOConnectProvider fallback={<h2>Loading...</h2>} settings={settings}>
        <App />
    </IOConnectProvider>,
    document.getElementById("root")
);

• using the useIOConnectInit() hook:

import IOBrowserPlatform from "@interopio/browser-platform";
import { useIOConnectInit } from "@interopio/react-hooks";

const App = () => {
    const settings = {
        browserPlatform: {
            factory: IOBrowserPlatform,
            config: {
                licenseKey: "my-license-key"
            }
        }
    };

    const io = useIOConnectInit(settings);

    return io ? <Main io={io} /> : <Loader />;
};

export default App;

For more details on using the @interopio/react-hooks library, see the Browser Client > React section.

Angular

Install the @interopio/ng library in your project:

npm install @interopio/ng

Initialize the @interopio/ng library. It's required to provide a valid license key in the configuration object for the library:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { IOConnectNg } from "@interopio/ng";
import IOBrowserPlatform from "@interopio/browser-platform";

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        IOConnectNg.forRoot({ browserPlatform: { factory: IOBrowserPlatform, config: { licenseKey: "my-license-key" } } })
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

For more details on using the @interopio/ng library, see the Browser Client > Angular section.

Besides the required valid license key, you can specify other optional configuration settings for the io.Connect environment, APIs, libraries and Plugins initialized by the IOBrowserPlatform() function:

import IOBrowserPlatform from "@interopio/browser-platform";
import IOWorkspaces from "@interopio/workspaces-api";

const config = {
    // Providing a valid license key.
    licenseKey: "my-license-key",
    browser: {
        // Enabling the Workspaces API.
        libraries: [IOWorkspaces]
    },
    workspaces: {
        // Specifying the location of the Workspaces App.
        src: "https://my-workspaces-app.com"
    },
    // Configuration for Global Layouts.
    layouts: {
        mode: "session"
    },
    // Configuration for connecting to io.Manager.
    manager: {
        url: "https://my-io-manager.com:4242/api",
        auth: {
            basic: {
                username: "username",
                password: "password"
            }
        },
        fetchIntervalMS: 10000,
        tokenRefreshIntervalMS: 15000,
        critical: true
    }
};

const { io } = await IOBrowserPlatform(config);

The configuration object for the @interopio/browser-platform library has the following properties:

If you want to get acquainted and experiment with a basic project built with the io.Connect Browser platform, skipping the required setup and configurations, you can use the io.Connect Browser Seed Project in GitHub. All you need to activate the project is your valid license key.

The project provides a fully configured multi-app - a Workspaces App acting as a Main app, with an open Workspace containing several apps, including the Interop Viewer and Context Viewer apps.