SDK Configuration

After deploying your static component files to a CDN, configure your app's Myop SDK to load components from there.

Basic Setup

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

// Call once at app startup, before rendering any components
enableSelfHosted('https://cdn.yourcompany.com/myop-static');

This switches the SDK to static mode: instead of calling https://cloud.myop.dev/consume?id=..., it fetches:

https://cdn.yourcompany.com/myop-static/components/{componentId}/{environment}.json

Framework Examples

React

// src/App.tsx
import { enableSelfHosted } from '@myop/react';
import { MyopComponent } from '@myop/react';

// Configure once at the top level
enableSelfHosted('https://cdn.yourcompany.com/myop-static');

function App() {
  return (
    <MyopComponent
      componentId="comp-uuid-1"
      data={{ user: currentUser }}
      on={(action, payload) => handleAction(action, payload)}
    />
  );
}

Vue

// src/main.ts
import { enableSelfHosted } from '@myop/vue';

enableSelfHosted('https://cdn.yourcompany.com/myop-static');

Angular

// src/app/app.module.ts
import { enableSelfHosted } from '@myop/angular';

enableSelfHosted('https://cdn.yourcompany.com/myop-static');

Vanilla JavaScript

<script src="https://cdn.myop.dev/sdk/next/myop_sdk.min.js"></script>
<script>
  myop.enableSelfHosted('https://cdn.yourcompany.com/myop-static');
</script>

Environment Configuration

By default, the SDK uses the production environment. To use a different environment:

import { enableSelfHosted, setEnvironment } from '@myop/sdk';

enableSelfHosted('https://cdn.yourcompany.com/myop-static');
setEnvironment('staging');

This will fetch:

.../components/{componentId}/staging.json

Hybrid Setup

You can use self-hosting for production while keeping Myop cloud for development:

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

if (process.env.NODE_ENV === 'production') {
  enableSelfHosted('https://cdn.yourcompany.com/myop-static');
}
// In development, the SDK defaults to https://cloud.myop.dev

Preloading

Preloading works the same in self-hosted mode:

import { enableSelfHosted, preloadComponents } from '@myop/sdk';

enableSelfHosted('https://cdn.yourcompany.com/myop-static');

// Preload critical components at app startup
await preloadComponents([
  'comp-pricing-table',
  'comp-onboarding-flow'
]);

Caching

Static JSON files are highly cacheable. Configure your CDN with appropriate cache headers:

Strategy	Cache-Control	Use Case
Aggressive	public, max-age=86400	Components change rarely
Balanced	public, max-age=300	Moderate update frequency
None	no-cache	Testing / development

The SDK also caches fetched components in memory for the page session, so each component is fetched at most once.