# managed-component-to-cloudflare-worker

> Managed Component To Cloudflare Worker provides an easy way for using custom [Managed Components](https://managedcomponents.dev/) with Cloudflare Zaraz, by deploying them as a Cloudflare Worker. Deployed Managed Components can be configured as Tools withi

Latest version **1.7.1** (published 2025-08-06) · 0 weekly downloads

## Install

```sh
npm install managed-component-to-cloudflare-worker
pnpm add managed-component-to-cloudflare-worker
yarn add managed-component-to-cloudflare-worker
bun add managed-component-to-cloudflare-worker
```

Provides the command `managed-component-to-cloudflare-worker`.

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.7.1 |
| Published | 2025-08-06 |
| First published | 2023-05-15 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=17.0.0 |
| Dependencies | 2 |
| Unpacked size | 45.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | jonnyparris, bjesus, simonabadoiu, kubaflare |

## Links

- npm: https://www.npmjs.com/package/managed-component-to-cloudflare-worker
- npm.io page: https://npm.io/package/managed-component-to-cloudflare-worker

## Dependencies (2)

- [ts-node](https://npm.io/package/ts-node.md) ^10.9.2
- [create-temp-directory](https://npm.io/package/create-temp-directory.md) ^2.4.0

## Recent versions

- 1.7.1 (latest) — 2025-08-06
- 1.6.1 — 2024-02-27
- 1.6.0 — 2024-02-26
- 1.5.4 — 2024-02-26
- 1.5.3 — 2024-02-26
- 1.5.2 — 2024-02-16
- 1.5.1 — 2023-09-01
- 1.5.0 — 2023-08-02
- 1.4.0 — 2023-07-28
- 1.3.1 — 2023-07-04
- 1.3.0 — 2023-06-15
- 1.2.2 — 2023-06-02
- 1.2.1 — 2023-06-02
- 1.2.0 — 2023-05-15

## README

# Managed Component To Cloudflare Worker

Managed Component To Cloudflare Worker provides an easy way for using custom [Managed Components](https://managedcomponents.dev/) with Cloudflare Zaraz, by deploying them as a Cloudflare Worker. Deployed Managed Components can be configured as Tools within [Cloudflare Zaraz](https://dash.cloudflare.com/) from the "Add new Tool" page.

## Usage

> 💡 **Prerequisite:** To deploy a new Cloudflare Worker you need to first login with using `npx wrangler login`

### Recommended: Using `npx`

Your Managed Component should be bundled before trying to deploy it.

`npx managed-component-to-cloudflare-worker /path/to/managed/component.js component-name`

### Advanced: Custom wrangler.toml Configuration Using `npx`
Pass the path to your custom wrangler.toml file as an optional third argument. Passed in component name will override the name in the custom wrangler.toml file. Assumes that a KV binding is configured in the custom wrangler.toml file bound to `KV` if required by the component.

`npx managed-component-to-cloudflare-worker /path/to/managed/component.js component-name /path/to/wrangler.toml`

### Advanced: Manual Worker setup

This method gives you more flexibility but requires you to be familiar with `wrangler` and Cloudflare Workers in general.

1. Clone this repository
2. Copy your Managed Component files to `./src` (it's recommended to create a new directory within `./src` if you're not using an already bundled Managed Component)
3. Import your Managed Component in index.ts by replacing the line `import component from './component.js'` with your `import` command
4. Edit [wrangler.toml](wrangler.toml) if you need to change the Worker name or if you're using a more complex Worker configuration for your Managed Component. Your Worker name must start with `custom-mc-` for it to appear in the Cloudflare Dashboard.
5. If you're using any of the storage or cache methods (`get`, `set`, `useCache`, `invalidateCache`) in your component,
  you have to add a KV binding. There are two ways to do this:

     Option 1. Run `npx wrangler kv:namespace create <KV_NAMESPACE>`, copy the `id` string, and add binding in [wrangler.toml](wrangler.toml) as follows:

     ```
     kv_namespaces = [
         { binding = "KV", id = "<YOUR_KV_ID>" }
        ]
     ```
     Option 2. After publishing this Managed Component as worker, follow [these steps](https://developers.cloudflare.com/workers/configuration/environment-variables/#add-environment-variables-via-the-dashboard) to add a KV binding as environment variable with variable name `KV`.

1. Run `npx wrangler publish`

#### Environment Variables / Bindings

To use worker environment variables/secrets in your managed component, add variables [via wrangler](https://developers.cloudflare.com/workers/configuration/environment-variables/#add-environment-variables-via-wrangler) or [via dashboard](https://developers.cloudflare.com/workers/configuration/environment-variables/#add-environment-variables-via-the-dashboard) and use them in your component through the `Manager.ext` parameter: `manager.ext.env.YOUR_ENV_VARIABLE`

---
_Source: https://npm.io/package/managed-component-to-cloudflare-worker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._