# Basic Host Application ## Hosting Myop Components in a JavaScript Application This tutorial provides a step-by-step guide to integrating [Myop](https://www.myop.dev/), 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: - **Node.js**: [Download and install Node.js](https://nodejs.org/). - **npm**: Node.js includes npm, the Node package manager. ## 1. Set Up Your Project Directory Create a new directory for your project and navigate into it: ```bash mkdir myop-js-app cd myop-js-app ``` ## 2. Initialize the Project Initialize a new Node.js project: ```bash npm init -y ``` ## 3. Install the Myop SDK Install the Myop SDK package: ```bash 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: ```js 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: ```html Myop JavaScript Integration

Myop Component Integration

``` This HTML file includes a `
` 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: ```js import {hostSDK} from '@myop/sdk/host'; import {CloudRepository} from '@myop/sdk/helpers'; async function loadMyopComponent() { /* 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 componentConfig = await CloudRepository.Main.fetchComponent('8c72d29b-c8a0-41cf-b08f-4acca96c7a16'); /* OR const flowConfig = await CloudRepository.Main.fetchFlow('49283058-a787-4fa5-b0d2-516b2e6dc5e3'); const componentConfig = flowConfig.components.find(c=>c.type.id === '8c72d29b-c8a0-41cf-b08f-4acca96c7a16') */ const container = document.getElementById('myop-container'); const myopComponent = await hostSDK.loadComponent(componentConfig, container); } loadMyopComponent(); ``` In this script: - 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](https://docs.myop.dev/docs/myopCloud/) how to load it directly from the Myop cloud. - Selects the `myop-container` `
` 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. - Read more about [interacting with components](https://docs.myop.dev) ## 7. Run the Application To run your application, use Vite's development server. Add a script to your `package.json`: ```json { "scripts": { "dev": "vite" } } ``` Now, start the development server: ```bash 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](https://docs.myop.dev/docs/intro).