npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

managed-component-to-cloudflare-worker-cli

v1.6.1

Published

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

Downloads

10

Readme

Managed Component To Cloudflare Worker

Managed Component To Cloudflare Worker provides an easy way for using custom Managed Components with Cloudflare Zaraz, by deploying them as a Cloudflare Worker. Deployed Managed Components can be configured as Tools within Cloudflare Zaraz 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 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 as follows:

    kv_namespaces = [
        { binding = "KV", id = "<YOUR_KV_ID>" }
       ]

    Option 2. After publishing this Managed Component as worker, follow these steps to add a KV binding as environment variable with variable name KV.

  6. Run npx wrangler publish

Environment Variables / Bindings

To use worker environment variables/secrets in your managed component, add variables via wrangler or via dashboard and use them in your component through the Manager.ext parameter: manager.ext.env.YOUR_ENV_VARIABLE