# Quick Start

Source: https://docs.interop.io/browser/getting-started/quick-start/index.html

## 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](https://docs.interop.io/browser/developers/browser-platform/overview/index.md) app (Browser Platform) and optionally a second app - a [Browser Client](https://docs.interop.io/browser/developers/browser-client/overview/index.md).

### Main App

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

2. Reference the [`@interopio/browser-platform`](https://www.npmjs.com/package/@interopio/browser-platform) library and your `index.js` in the `index.html` file:

```html
<script src="https://unpkg.com/@interopio/browser-platform@latest/dist/browser.platform.umd.js"></script>
<script src="./index.js"></script>
```

3. Initialize the [`@interopio/browser-platform`](https://www.npmjs.com/package/@interopio/browser-platform) library in the `index.js` file using the `IOBrowserPlatform()` factory function and providing a valid license key:

```javascript
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`](https://www.npmjs.com/package/@interopio/browser) library and your `index.js` in the `index.html` file:

```html
<script src="https://unpkg.com/@interopio/browser@latest/dist/browser.umd.js"></script>
<script src="./index.js"></script>
```

3. Initialize the [`@interopio/browser`](https://www.npmjs.com/package/@interopio/browser) library in the `index.js` file using the `IOBrowser()` factory function:

```javascript
const io = await IOBrowser();

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

Now you have a fully functioning [Browser Client](https://docs.interop.io/browser/developers/browser-client/overview/index.md) app that can be opened from the Main app - e.g., by using the [Window Management](https://docs.interop.io/browser/capabilities/windows/window-management/index.md) API and the URL where the app was deployed:

```javascript
// 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](https://docs.interop.io/browser/getting-started/project-deployment/index.md) section.*

> ℹ️ *For more details on the Browser Platform and Browser Client apps, see the [Browser Platform](https://docs.interop.io/browser/developers/browser-platform/overview/index.md) and [Browser Client](https://docs.interop.io/browser/developers/browser-client/overview/index.md) sections.*

> ℹ️ *For more details on the [`@interopio/browser`](https://www.npmjs.com/package/@interopio/browser) library, see the [API Reference](https://docs.interop.io/browser/reference/javascript/io.connect%20browser/index.md) section.*