---
sidebar_position: 5
title: SDK Configuration
description: Configure the Myop SDK to load components from your self-hosted registry. One line of code to switch from Myop cloud to your own CDN.
keywords: [myop sdk, enableSelfHosted, static mode, cdn config, self-hosted sdk]
---
# SDK Configuration

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

## Basic Setup

```typescript
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

```tsx
// 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

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

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

### Angular

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

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

### Vanilla JavaScript

```html
<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:

```typescript
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:

```typescript
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:

```typescript
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`:

```typescript
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.:

```typescript
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:

```typescript
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.