Skip to main content

Basic Host Application

Hosting Myop Components in a JavaScript Application​

This tutorial provides a step-by-step guide to integrating Myop, into a standard JavaScript application without using frameworks like React, Vue or Angular. Myop enables dynamic UI management, allowing real-time updates without redeploying your application.

Prerequisites​

Before you begin, ensure you have the following:

1. Set Up Your Project Directory​

Create a new directory for your project and navigate into it:

mkdir myop-js-app
cd myop-js-app

2. Initialize the Project​

Initialize a new Node.js project:

npm init -y

3. Install the Myop SDK​

Install the Myop SDK package:

npm install vite @myop/sdk

This command adds the Myop SDK to your project, providing the tools needed to integrate Myop components.

4. Create the Vite Configuration​

Create a vite.config.js file in your project root directory with the following content:

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    open: true, // Automatically open the browser on server start
  },
});

This configuration enables a simple setup to run the application with Vite.

5. Create the HTML File​

Create an index.html file in your project directory with the following content:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Myop JavaScript Integration</title>
  </head>
  <body>
    <h1>Myop Component Integration</h1>
    <div id="myop-container"></div>
    <script src="./index.js" type="module"></script>
  </body>
</html>

This HTML file includes a <div> element with the ID myop-container, which will serve as the container for the Myop component. It also references an index.js script that you'll create next.

6. Create the JavaScript File​

Create an index.js file in your project directory with the following content:

import { getHostModule } from '@myop/sdk';

async function loadMyopComponent() {
  const { hostSDK } = await getHostModule();

  /*
   get your real component config
   you can load it directly from Myop cloud, read more about it at : 
   https://docs.myop.dev/docs/myopCloud/ 
   */

  const flowId = '49283058-a787-4fa5-b0d2-516b2e6dc5e3';
  const componentId = '8c72d29b-c8a0-41cf-b08f-4acca96c7a16';
  const res = await fetch(
    `https://cloud.myop.dev/flow?id=${flowId}&resolve=components`
  );
  const json = await res.json();
  const userFlow = json.item;
  const componentConfig = userFlow.components.find(
    (c) => c.type.id === componentId
  );

  const container = document.getElementById('myop-container');
  const myopComponent = await hostSDK.loadComponent(componentConfig, container);
}

loadMyopComponent();

In this script:

  • We import getHostModule from the Myop SDK.
  • We define an asynchronous function loadMyopComponent that:
    • Retrieves and initializes the hostSDK.
    • Get a componentConfig object containing the configuration for your Myop component.
      • there is few options from where and how to get componentConfig at runtime for the simplicity of this tutorial read here how to load it directly from the Myop cloud.
    • Selects the myop-container <div> from the DOM.
    • Loads the specified Myop component into the selected container.
    • After you load Myop component you can start passing and getting props, interacting with refs and change component lifecycle events.

7. Run the Application​

To run your application, use Vite's development server. Add a script to your package.json:

{
  "scripts": {
    "dev": "vite"
  }
}

Now, start the development server:

npm run dev

This will start the Vite development server, and the application will be available at http://localhost:3000 in your browser.

Additional Resources​

By following these steps, you've should be able to integrating Myop components into a standard JavaScript application, enabling dynamic and real-time UI updates.

For more detailed information and advanced configurations, refer to the Myop Documentation.