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.

Cache-Busting with Query Parameters

When using aggressive CDN caching, you need a way to bust the cache after deploying new component versions. Pass a queryParams object as the second argument to enableSelfHosted:

enableSelfHosted('https://cdn.yourcompany.com/myop-static', {
  lastupdate: '11112026'
});

This appends the query parameters to every component fetch URL:

https://cdn.yourcompany.com/myop-static/components/{componentId}/production.json?lastupdate=11112026

You can use any key/value pairs — a deploy timestamp, a build hash, a version number, etc.:

enableSelfHosted('https://cdn.yourcompany.com/myop-static', {
  v: 'abc123',          // git commit hash
  t: Date.now().toString()  // deploy timestamp
});

Tip: Pair this with aggressive Cache-Control: public, max-age=86400 headers on your CDN. When you deploy new components, update the query parameter value — the CDN treats the new URL as a cache miss and fetches the fresh file.

You can also update query parameters at any point after initialization:

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

getCloudRepository().setQueryParams({ v: 'def456' });

Note that updating query parameters does not re-fetch components that were already loaded in the current page session (the SDK's in-memory cache still holds them). The new parameters apply to components fetched after the update.