Quick Start

Guide

Starting a basic io.Connect Browser project is easy and intuitive, as this guide will show you. To quick start your project, you have to set up a Main app app (Browser Platform) and optionally a second app - a Browser Client.

Main App

  1. Create standard basic index.html and index.js files for your Main app.

  2. Reference the @interopio/browser-platform library and your index.js in the index.html file:

<script src="https://unpkg.com/@interopio/browser-platform@latest/dist/browser.platform.umd.js"></script>
<script src="./index.js"></script>
  1. Initialize the @interopio/browser-platform library in the index.js file using the IOBrowserPlatform() factory function and providing a valid license key:
const config = {
    licenseKey: "my-license-key"
};

const { io } = await IOBrowserPlatform(config);

console.log(`io.Connect initialized successfully! io.Connect version: ${io.version}`);

Now you have a fully functioning Main app.

Browser Client

  1. Create standard basic index.html and index.js files for your Browser Client app.

  2. Reference the @interopio/browser library and your index.js in the index.html file:

<script src="https://unpkg.com/@interopio/browser@latest/dist/browser.umd.js"></script>
<script src="./index.js"></script>
  1. Initialize the @interopio/browser library in the index.js file using the IOBrowser() factory function:
const io = await IOBrowser();

console.log(`io.Connect initialized successfully! io.Connect version: ${io.version}`);

Now you have a fully functioning Browser Client app that can be opened from the Main app - e.g., by using the Window Management API and the URL where the app was deployed:

// In index.js of the Main app.

const config = {
    licenseKey: "my-license-key"
};

const { io } = await IOBrowserPlatform(config);

console.log(`io.Connect initialized successfully! io.Connect version: ${io.version}`);

const name = "My Browser Client";
const url = "https://example.com";

// Opening the Browser Client from the Main app.
const myWin = await io.windows.open(name, url);

Next Steps

Congratulations, you have created your very first io.Connect Browser project!

ℹ️ For details on deploying your project, see the Project Deployment section.

ℹ️ For more details on the Browser Platform and Browser Client apps, see the Browser Platform and Browser Client sections.

ℹ️ For more details on the @interopio/browser library, see the API Reference section.