---
sidebar_position: 0
title: Self-Hosting Overview
description: Serve Myop components from your own infrastructure (S3, CDN, or any static hosting) instead of the Myop cloud. Zero runtime dependency on Myop servers.
keywords: [myop self-hosting, enterprise, cdn, s3, static hosting, self-hosted components]
---
# Self-Hosting Components

Myop supports serving components from **your own infrastructure** — S3, CloudFront, Azure Blob Storage, GCS, or any static file server. Your app loads components entirely from your CDN with zero runtime dependency on Myop servers.

## How It Works

```
┌─────────────┐     webhook / schedule     ┌──────────────────┐
│ Myop Cloud   │ ─────────────────────────► │  Your CI/CD       │
│ (dashboard)  │    on every release        │  (GitHub Actions / │
└─────────────┘                             │   custom pipeline) │
                                            └────────┬─────────┘
                                                     │  npx myop export
                                                     ▼
                                            ┌──────────────────┐
                                            │  Your CDN / S3    │
                                            └────────┬─────────┘
                                                     │
                                                     ▼
                                            Your App + Myop SDK
                                            enableSelfHosted("https://cdn.yourco.com")
```

1. **You develop and publish** components using the Myop dashboard as usual
2. **On every release**, Myop notifies your CI/CD pipeline (via GitHub Actions or webhook)
3. **Your pipeline runs `npx myop export`** to pull static JSON files
4. **Files are deployed** to your S3/CDN
5. **Your app's SDK** fetches components from your CDN instead of Myop cloud

## Quick Start

### 1. Generate an API Key

Go to **Dashboard > Rollout > Settings (gear icon) > Self-Hosting** tab, then click **Create API Key**. Copy and save the key — it's only shown once.

![Self-Hosting settings tab](/assets/images/self-hosting-settings-84b3887789d8bb974eb088ad749dc514.png)

### 2. Export Components

```bash
npx myop export --api-key myop_sk_... --output ./myop-static
```

This creates a directory of static JSON files — one per component per environment. See [CLI Reference](#cli-reference) below for all options.

### 3. Deploy to Your CDN

Upload the `myop-static/` directory to your S3 bucket, CDN, or static hosting:

```bash
aws s3 sync ./myop-static s3://your-bucket --cache-control "public, max-age=300"
```

### 4. Configure Your App

```typescript
import { enableSelfHosted, setEnvironment } from '@myop/react';

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

That's it. Your app now loads components entirely from your infrastructure.

### 5. Automate (recommended)

Set up automated syncing so components stay up to date when you release new versions:

- **[GitHub Actions](/docs/self-hosting/github-actions)** — One-click setup from the dashboard. Recommended for GitHub users.
- **[Generic Webhooks](/docs/self-hosting/generic-webhooks)** — For any CI/CD system (Jenkins, GitLab CI, CircleCI, etc.)

---

## CLI Reference

### `npx myop export`

Exports your organization's components as static JSON files.

```bash
npx myop export [options]
```

#### Options

| Flag | Environment Variable | Default | Description |
|------|---------------------|---------|-------------|
| `-k, --api-key <key>` | `MYOP_API_KEY` | — | Your Myop API key (required) |
| `-o, --output <dir>` | `OUTPUT_DIR` | `./myop-static` | Directory to write exported files to |
| `-u, --url <url>` | `MYOP_API_URL` | `https://cloud.myop.dev` | Myop API URL |
| `--releases <json>` | — | — | JSON array of releases for incremental sync |
| `--component <id>` | — | — | Export a single component by ID |
| `--env <env>` | — | — | Environment to export (used with `--component`) |

Command-line flags take priority over environment variables. Environment variables take priority over defaults.

#### Output Directory

By default, files are written to `./myop-static` relative to where you run the command. You can change this in three ways:

```bash
# 1. Using the --output flag
npx myop export --output /var/www/myop-components

# 2. Using the OUTPUT_DIR environment variable
OUTPUT_DIR=/var/www/myop-components npx myop export

# 3. In a CI environment (e.g., GitHub Actions), set it as a workflow env
#    env:
#      OUTPUT_DIR: ./myop-static
```

The directory is created automatically if it doesn't exist.

#### Full Export

Exports all components across all environments. A `manifest.json` is also generated.

```bash
npx myop export --api-key myop_sk_... --output ./myop-static
```

#### Incremental Export

Exports only specific components that changed. Used in CI when triggered by a webhook — the `--releases` flag accepts the same JSON array from the [webhook payload](/docs/self-hosting/api-keys-webhooks#webhook-payload-generic).

```bash
npx myop export --releases '[{"componentId":"uuid-1","environment":"production","environmentId":"...","variantId":"..."}]'
```

Or export a single component:

```bash
npx myop export --component 2098cfba-5124-48ff-b87d-6cd71c14cf7a --env production
```

:::tip
Incremental exports also fetch the `preview.json` for each component, so your preview environment stays in sync too.
:::

#### Using in CI/CD

In CI pipelines, use environment variables instead of inline flags to keep secrets out of logs:

```bash
export MYOP_API_KEY=${{ secrets.MYOP_API_KEY }}
export OUTPUT_DIR=./myop-static

npx myop export
```

See [Sync with GitHub Actions](/docs/self-hosting/github-actions) for a complete workflow example.

---

## Guides

- [Sync with GitHub Actions](/docs/self-hosting/github-actions) — Automated sync with one-click setup
- [Generic Webhook Integration](/docs/self-hosting/generic-webhooks) — Custom CI/CD integration
- [API Keys & Webhooks Reference](/docs/self-hosting/api-keys-webhooks) — Authentication and webhook payload details
- [Static File Format](/docs/self-hosting/static-format) — Directory structure and JSON format
- [SDK Configuration](/docs/self-hosting/sdk-config) — Framework-specific setup