{"version":"https://jsonfeed.org/version/1","title":"Human Who Codes","home_page_url":"https://humanwhocodes.com","feed_url":"https://humanwhocodes.com/feeds/snippets.json","description":"The Official Web Site of Nicholas C. Zakas","expired":false,"author":{"name":"Nicholas C. Zakas"},"items":[{"id":"https://humanwhocodes.com/snippets/2026/02/using-your-own-supabase-signing-keys/","url":"https://humanwhocodes.com/snippets/2026/02/using-your-own-supabase-signing-keys/","title":"Using your own Supabase signing keys","author":{"name":"Nicholas C. Zakas"},"summary":"Supabase generates JWT signing keys automatically, but you can also use your own if you want to share keys across multiple instances or generate tokens manually.","content_text":"\n[Supabase](https://supabase.com) uses JWT signing keys to sign authentication tokens. By default, Supabase generates a new signing key on startup, but you can also use your own signing keys. This is useful if you want to generate your own tokens or if you want to use the same signing keys across multiple Supabase instances.\n\n## Generate a signing key\n\nFirst, generate a new signing key using the Supabase CLI:\n\n```shell\nnpx supabase gen signing-key --algorithm ES256\n```\n\nThis will output a new signing key in JSON format to the terminal.\n\n**Note:** If you already have a `supabase/signing_key.json` file, the CLI will ask if you want to overwrite it. If you want to keep the existing signing key, you can choose \"No\" and the CLI will not output a new signing key.\n\n## Local Development\n\nFor local development, save the signing key in your `supabase` directory, such as `supabase/signing_key.json`. Supabase requires the local signing key to be contained in an array, so you need to wrap the output in square brackets. For example, if your output looks like this:\n\n```json\n{\n \"kty\": \"EC\",\n \"d\": \"N8sXo9n2e5Z19sXo9n2e5Z1\",\n \"use\": \"sig\",\n \"crv\": \"P-256\",\n \"kid\": \"my-key-id\",\n \"x\": \"f83OJ3D2xF4\",\n \"y\": \"x_FEzRu9c\"\n}\n```\n\nYou need to wrap it like this:\n\n```json\n[\n {\n \"kty\": \"EC\",\n \"d\": \"N8sXo9n2e5Z19sXo9n2e5Z1\",\n \"use\": \"sig\",\n \"crv\": \"P-256\",\n \"kid\": \"my-key-id\",\n \"x\": \"f83OJ3D2xF4\",\n \"y\": \"x_FEzRu9c\"\n }\n]\n```\n\nSave this into a file called `supabase/signing_key.json`.\n\nThen, edit the `config.toml` file and add the following lines to the `[auth]` section:\n\n```toml\n[auth]\nsigning_keys_path = \"./signing_key.json\"\n```\n\nThis will tell Supabase to use your signing key instead of generating a new one on startup. After editing `config.toml`, you need to restart Supabase to reload the configuration:\n\n```shell\nnpx supabase stop\nnpx supabase start\n```\n\n## Hosted Supabase\n\nIf you are using the hosted version of Supabase, you can set the signing keys in the Supabase dashboard. Go to the \"Settings\" tab, then click on \"JWT Signing Keys\".\n\nIf you already have a standby key, you'll need to remove it before you can add a new one. To remove a standby key, click the three dots next to the key and select \"Move to previously used\". After removing the existing standby key, you can add your new signing key as described above.\n\n**Important:** This signing key must *not* by in an array. It should be the raw JSON object that was generated by the Supabase CLI. \n\nClick \"Create Standby Key\". In the dialog select \"Import an existing key\" and paste in your previously generated signing key. Click the \"Create Standby Key\" button to save the new signing key.\n\nClick \"Rotate Keys\" to make the new signing key active. This will rotate the keys and make the new signing key the active key for signing tokens.\n\n## Important Notes\n\n* The Supabase CLI-generated signing key contains both `verify` and `sign` keys because Supabase itself needs to do both. However, some tools like [`jose`](https://npmjs.com/package/jose) will fail signing if object contains a `verify` key. If you encounter this issue, you can remove the `verify` key from the signing key JSON file before using it with `jose`.\n* If your app has users with a persisted session, changing the signing key will invalidate all existing tokens. This means that users will need to log in again to obtain new tokens signed with the new key. Make sure to communicate this change to your users if you are changing the signing key in a production environment. If you're using the JavaScript client, you can call `supabase.auth.refreshSession()` to refresh the session and obtain a new token without requiring the user to log in again.\n* You can tell if a user has an invalid JWT by checking the `error` property of the user object returned by `supabase.auth.getUser()`. If the JWT is invalid, the `error` property will contain a `code` property of `\"bad_jwt\"`.\n\n ","content_html":"<p><a href="https://supabase.com">Supabase</a> uses JWT signing keys to sign authentication tokens. By default, Supabase generates a new signing key on startup, but you can also use your own signing keys. This is useful if you want to generate your own tokens or if you want to use the same signing keys across multiple Supabase instances.</p>\n<h2 id="generate-a-signing-key">Generate a signing key</h2>\n<p>First, generate a new signing key using the Supabase CLI:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #B392F0">npx</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">supabase</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">gen</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">signing-key</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">--algorithm</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">ES256</span></span></code></pre>\n<p>This will output a new signing key in JSON format to the terminal.</p>\n<p><strong>Note:</strong> If you already have a <code>supabase/signing_key.json</code> file, the CLI will ask if you want to overwrite it. If you want to keep the existing signing key, you can choose “No” and the CLI will not output a new signing key.</p>\n<h2 id="local-development">Local Development</h2>\n<p>For local development, save the signing key in your <code>supabase</code> directory, such as <code>supabase/signing_key.json</code>. Supabase requires the local signing key to be contained in an array, so you need to wrap the output in square brackets. For example, if your output looks like this:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #E1E4E8">{</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"kty"</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">"EC"</span><span style="color: #E1E4E8">,</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"d"</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">"N8sXo9n2e5Z19sXo9n2e5Z1"</span><span style="color: #E1E4E8">,</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"use"</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">"sig"</span><span style="color: #E1E4E8">,</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"crv"</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">"P-256"</span><span style="color: #E1E4E8">,</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"kid"</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">"my-key-id"</span><span style="color: #E1E4E8">,</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"x"</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">"f83OJ3D2xF4"</span><span style="color: #E1E4E8">,</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"y"</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">"x_FEzRu9c"</span></span>\n<span class="line"><span style="color: #E1E4E8">}</span></span></code></pre>\n<p>You need to wrap it like this:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #E1E4E8">[</span></span>\n<span class="line"><span style="color: #E1E4E8"> {</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"kty"</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">"EC"</span><span style="color: #E1E4E8">,</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"d"</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">"N8sXo9n2e5Z19sXo9n2e5Z1"</span><span style="color: #E1E4E8">,</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"use"</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">"sig"</span><span style="color: #E1E4E8">,</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"crv"</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">"P-256"</span><span style="color: #E1E4E8">,</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"kid"</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">"my-key-id"</span><span style="color: #E1E4E8">,</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"x"</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">"f83OJ3D2xF4"</span><span style="color: #E1E4E8">,</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"y"</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">"x_FEzRu9c"</span></span>\n<span class="line"><span style="color: #E1E4E8"> }</span></span>\n<span class="line"><span style="color: #E1E4E8">]</span></span></code></pre>\n<p>Save this into a file called <code>supabase/signing_key.json</code>.</p>\n<p>Then, edit the <code>config.toml</code> file and add the following lines to the <code>[auth]</code> section:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #E1E4E8">[</span><span style="color: #B392F0">auth</span><span style="color: #E1E4E8">]</span></span>\n<span class="line"><span style="color: #E1E4E8">signing_keys_path = </span><span style="color: #9ECBFF">"./signing_key.json"</span></span></code></pre>\n<p>This will tell Supabase to use your signing key instead of generating a new one on startup. After editing <code>config.toml</code>, you need to restart Supabase to reload the configuration:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #B392F0">npx</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">supabase</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">stop</span></span>\n<span class="line"><span style="color: #B392F0">npx</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">supabase</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">start</span></span></code></pre>\n<h2 id="hosted-supabase">Hosted Supabase</h2>\n<p>If you are using the hosted version of Supabase, you can set the signing keys in the Supabase dashboard. Go to the “Settings” tab, then click on “JWT Signing Keys”.</p>\n<p>If you already have a standby key, you’ll need to remove it before you can add a new one. To remove a standby key, click the three dots next to the key and select “Move to previously used”. After removing the existing standby key, you can add your new signing key as described above.</p>\n<p><strong>Important:</strong> This signing key must <em>not</em> by in an array. It should be the raw JSON object that was generated by the Supabase CLI.</p>\n<p>Click “Create Standby Key”. In the dialog select “Import an existing key” and paste in your previously generated signing key. Click the “Create Standby Key” button to save the new signing key.</p>\n<p>Click “Rotate Keys” to make the new signing key active. This will rotate the keys and make the new signing key the active key for signing tokens.</p>\n<h2 id="important-notes">Important Notes</h2>\n<ul>\n<li>\n<p>The Supabase CLI-generated signing key contains both <code>verify</code> and <code>sign</code> keys because Supabase itself needs to do both. However, some tools like <a href="https://npmjs.com/package/jose"><code>jose</code></a> will fail signing if object contains a <code>verify</code> key. If you encounter this issue, you can remove the <code>verify</code> key from the signing key JSON file before using it with <code>jose</code>.</p>\n</li>\n<li>\n<p>If your app has users with a persisted session, changing the signing key will invalidate all existing tokens. This means that users will need to log in again to obtain new tokens signed with the new key. Make sure to communicate this change to your users if you are changing the signing key in a production environment. If you’re using the JavaScript client, you can call <code>supabase.auth.refreshSession()</code> to refresh the session and obtain a new token without requiring the user to log in again.</p>\n</li>\n<li>\n<p>You can tell if a user has an invalid JWT by checking the <code>error</code> property of the user object returned by <code>supabase.auth.getUser()</code>. If the JWT is invalid, the <code>error</code> property will contain a <code>code</code> property of <code>"bad_jwt"</code>.</p>\n</li>\n</ul>","tags":["Supabase","JWT","Security"],"date_published":"2026-02-16T00:00:00.000Z","date_updated":"2026-02-16T00:00:00.000Z"},{"id":"https://humanwhocodes.com/snippets/2025/08/setup-local-supabase-oauth-logins/","url":"https://humanwhocodes.com/snippets/2025/08/setup-local-supabase-oauth-logins/","title":"Set up local Supabase OAuth logins","author":{"name":"Nicholas C. Zakas"},"summary":"While it's easy to set up Supabase OAuth logins in the cloud product, setting it up for a local development environment is a bit tricky.","content_text":"\nOne of the benefits of [Supabase](https://supabase.com) is its integrated login system that supports many OAuth providers, including Google and GitHub. While there is plenty of documentation explaining how to set up OAuth providers in hosted Supabase, the [instructions for local Supabase](https://supabase.com/docs/guides/local-development/overview#use-auth-locally) are fairly terse and are missing several steps. \n\nFirst, create a callback endpoint in your application, for example, `/auth/callback`. This is the callback that will receive the OAuth information from Supabase. Specifically, you should receive either a `code` query string parameter that will allow the user to login or an `error` parameter indicating there was an error logging in. Note that for server-side authentication you must use [`@supabase/ssr`](https://npmjs.com/package/@supabase/ssr). Here's an example written using [Astro](https://astro.build).\n\n```ts\n// Astro example\nimport { createServerClient, parseCookieHeader } from \"@supabase/ssr\";\n\nconst supabaseUrl = import.meta.env.SUPABASE_URL;\nconst supabaseAnonKey = import.meta.env.SUPABASE_ANON_KEY;\n\nexport const GET: APIRoute = async ({ url, request, cookies, redirect }) => {\n\n // if there's no code then redirect to login\n const code = url.searchParams.get(\"code\");\n if (!code) {\n redirect(\"/login?error=no-code\");\n }\n \n // there is a code, try to log in\n const supabase = createServerClient(supabaseUrl, supabaseAnonKey, {\n cookies: {\n getAll() {\n return parseCookieHeader(request.headers.get(\"cookie\") || \"\");\n },\n setAll(cookiesToSet) {\n cookiesToSet.forEach(({ name, value, options }) =>\n cookies.set(name, value, options)\n );\n },\n },\n });\n \n const { data, error } = await supabase.auth.exchangeCodeForSession(code);\n if (error || !data?.session) {\n return redirect(\"/login?error=unauthorized\");\n }\n\n return redirect(\"/\");\n}\n```\n\nWith the callback set up, you now need to let Supabase know how to call it. In general, there are three steps to the OAuth login process for Supabase:\n\n1. Your application links off to the OAuth provider's authentication service.\n2. The OAuth provider redirects to the Supabase auth service.\n3. Supabase redirects to your application callback.\n\nTo ensure that happens locally, you need to edit the `config.toml` file. First, locate the `[auth]` section at the top and make sure the value for `site_url` is your local application URL and `additional_redirect_urls` contains the full URL for the callback endpoint. Here's an example:\n\n```toml\n[auth]\nenabled = true\n# The base URL of your website. Used as an allow-list for redirects and for constructing URLs used\n# in emails.\nsite_url = \"http://localhost:4321\"\n# A list of *exact* URLs that auth providers are permitted to redirect to post authentication.\nadditional_redirect_urls = [\"http://localhost:4321/auth/callback\"]\n```\n\n(Without specifying `additional_redirect_urls`, you'll always have to redirect back to the application homepage.)\n\nNext, create an entry for your OAuth provider including the client ID, client secret, and redirect URI. For GitHub, it would look like this:\n\n```toml\n[auth.external.github]\nenabled = true\nclient_id = \"env(GITHUB_CLIENT_ID)\"\nsecret = \"env(GITHUB_CLIENT_SECRET)\"\nredirect_uri = \"http://localhost:54321/auth/v1/callback\"\n```\n\nThe `redirect_uri` here needs to be the local Supabase URL for OAuth callbacks. The default port is 54321, so double-check the port.\n\nAfter editing `config.toml`, you need to restart Supabase to reload the configuration:\n\n```shell\nnpx supabase stop\nnpx supabase start\n```\n\nNext, you need to generate the OAuth URL to use in your application. Here's an example generating a URL to login with GitHub:\n\n```ts\nimport { createServerClient, parseCookieHeader } from \"@supabase/ssr\";\n\nconst supabaseUrl = import.meta.env.SUPABASE_URL;\nconst supabaseAnonKey = import.meta.env.SUPABASE_ANON_KEY;\n\nconst supabaseUrl = import.meta.env.SUPABASE_URL;\nconst supabaseAnonKey = import.meta.env.SUPABASE_ANON_KEY;\n\nexport const GET: APIRoute = async ({ url, request, cookies, redirect }) => {\n\n // if there's no code then redirect to login\n const code = url.searchParams.get(\"code\");\n if (!code) {\n redirect(\"/login?error=no-code\");\n }\n \n // there is a code, try to log in\n const supabase = createServerClient(supabaseUrl, supabaseAnonKey, {\n cookies: {\n getAll() {\n return parseCookieHeader(request.headers.get(\"cookie\") || \"\");\n },\n setAll(cookiesToSet) {\n cookiesToSet.forEach(({ name, value, options }) =>\n cookies.set(name, value, options)\n );\n },\n },\n });\n \n const { data, error } = await supabase.auth.signInWithOAuth({\n provider: \"github\",\n options: {\n // must be listed as additional_redirect_urls\n redirectTo: `http://localhost:4321/auth/callback`\n }\n });\n\n if (error || !data?.url) {\n // handle error\n }\n\n redirect(data.url);\n}\n```\n\nEverything is now wired up for the correct end-to-end flow.\n","content_html":"<p>One of the benefits of <a href="https://supabase.com">Supabase</a> is its integrated login system that supports many OAuth providers, including Google and GitHub. While there is plenty of documentation explaining how to set up OAuth providers in hosted Supabase, the <a href="https://supabase.com/docs/guides/local-development/overview#use-auth-locally">instructions for local Supabase</a> are fairly terse and are missing several steps.</p>\n<p>First, create a callback endpoint in your application, for example, <code>/auth/callback</code>. This is the callback that will receive the OAuth information from Supabase. Specifically, you should receive either a <code>code</code> query string parameter that will allow the user to login or an <code>error</code> parameter indicating there was an error logging in. Note that for server-side authentication you must use <a href="https://npmjs.com/package/@supabase/ssr"><code>@supabase/ssr</code></a>. Here’s an example written using <a href="https://astro.build">Astro</a>.</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #6A737D">// Astro example</span></span>\n<span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> { createServerClient, parseCookieHeader } </span><span style="color: #F97583">from</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">"@supabase/ssr"</span><span style="color: #E1E4E8">;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">supabaseUrl</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">import</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">meta</span><span style="color: #E1E4E8">.env.</span><span style="color: #79B8FF">SUPABASE_URL</span><span style="color: #E1E4E8">;</span></span>\n<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">supabaseAnonKey</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">import</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">meta</span><span style="color: #E1E4E8">.env.</span><span style="color: #79B8FF">SUPABASE_ANON_KEY</span><span style="color: #E1E4E8">;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #F97583">export</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">GET</span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">APIRoute</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">async</span><span style="color: #E1E4E8"> ({ </span><span style="color: #FFAB70">url</span><span style="color: #E1E4E8">, </span><span style="color: #FFAB70">request</span><span style="color: #E1E4E8">, </span><span style="color: #FFAB70">cookies</span><span style="color: #E1E4E8">, </span><span style="color: #FFAB70">redirect</span><span style="color: #E1E4E8"> }) </span><span style="color: #F97583">=></span><span style="color: #E1E4E8"> {</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #6A737D">// if there's no code then redirect to login</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">code</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> url.searchParams.</span><span style="color: #B392F0">get</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">"code"</span><span style="color: #E1E4E8">);</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (</span><span style="color: #F97583">!</span><span style="color: #E1E4E8">code) {</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #B392F0">redirect</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">"/login?error=no-code"</span><span style="color: #E1E4E8">);</span></span>\n<span class="line"><span style="color: #E1E4E8"> }</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #6A737D">// there is a code, try to log in</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">supabase</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">createServerClient</span><span style="color: #E1E4E8">(supabaseUrl, supabaseAnonKey, {</span></span>\n<span class="line"><span style="color: #E1E4E8"> cookies: {</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #B392F0">getAll</span><span style="color: #E1E4E8">() {</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">parseCookieHeader</span><span style="color: #E1E4E8">(request.headers.</span><span style="color: #B392F0">get</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">"cookie"</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">||</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">""</span><span style="color: #E1E4E8">);</span></span>\n<span class="line"><span style="color: #E1E4E8"> },</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #B392F0">setAll</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">cookiesToSet</span><span style="color: #E1E4E8">) {</span></span>\n<span class="line"><span style="color: #E1E4E8"> cookiesToSet.</span><span style="color: #B392F0">forEach</span><span style="color: #E1E4E8">(({ </span><span style="color: #FFAB70">name</span><span style="color: #E1E4E8">, </span><span style="color: #FFAB70">value</span><span style="color: #E1E4E8">, </span><span style="color: #FFAB70">options</span><span style="color: #E1E4E8"> }) </span><span style="color: #F97583">=></span></span>\n<span class="line"><span style="color: #E1E4E8"> cookies.</span><span style="color: #B392F0">set</span><span style="color: #E1E4E8">(name, value, options)</span></span>\n<span class="line"><span style="color: #E1E4E8"> );</span></span>\n<span class="line"><span style="color: #E1E4E8"> },</span></span>\n<span class="line"><span style="color: #E1E4E8"> },</span></span>\n<span class="line"><span style="color: #E1E4E8"> });</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> { </span><span style="color: #79B8FF">data</span><span style="color: #E1E4E8">, </span><span style="color: #79B8FF">error</span><span style="color: #E1E4E8"> } </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">await</span><span style="color: #E1E4E8"> supabase.auth.</span><span style="color: #B392F0">exchangeCodeForSession</span><span style="color: #E1E4E8">(code);</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (error </span><span style="color: #F97583">||</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">!</span><span style="color: #E1E4E8">data?.session) {</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">redirect</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">"/login?error=unauthorized"</span><span style="color: #E1E4E8">);</span></span>\n<span class="line"><span style="color: #E1E4E8"> }</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">redirect</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">"/"</span><span style="color: #E1E4E8">);</span></span>\n<span class="line"><span style="color: #E1E4E8">}</span></span></code></pre>\n<p>With the callback set up, you now need to let Supabase know how to call it. In general, there are three steps to the OAuth login process for Supabase:</p>\n<ol>\n<li>Your application links off to the OAuth provider’s authentication service.</li>\n<li>The OAuth provider redirects to the Supabase auth service.</li>\n<li>Supabase redirects to your application callback.</li>\n</ol>\n<p>To ensure that happens locally, you need to edit the <code>config.toml</code> file. First, locate the <code>[auth]</code> section at the top and make sure the value for <code>site_url</code> is your local application URL and <code>additional_redirect_urls</code> contains the full URL for the callback endpoint. Here’s an example:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #E1E4E8">[</span><span style="color: #B392F0">auth</span><span style="color: #E1E4E8">]</span></span>\n<span class="line"><span style="color: #E1E4E8">enabled = </span><span style="color: #79B8FF">true</span></span>\n<span class="line"><span style="color: #6A737D"># The base URL of your website. Used as an allow-list for redirects and for constructing URLs used</span></span>\n<span class="line"><span style="color: #6A737D"># in emails.</span></span>\n<span class="line"><span style="color: #E1E4E8">site_url = </span><span style="color: #9ECBFF">"http://localhost:4321"</span></span>\n<span class="line"><span style="color: #6A737D"># A list of *exact* URLs that auth providers are permitted to redirect to post authentication.</span></span>\n<span class="line"><span style="color: #E1E4E8">additional_redirect_urls = [</span><span style="color: #9ECBFF">"http://localhost:4321/auth/callback"</span><span style="color: #E1E4E8">]</span></span></code></pre>\n<p>(Without specifying <code>additional_redirect_urls</code>, you’ll always have to redirect back to the application homepage.)</p>\n<p>Next, create an entry for your OAuth provider including the client ID, client secret, and redirect URI. For GitHub, it would look like this:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #E1E4E8">[</span><span style="color: #B392F0">auth</span><span style="color: #E1E4E8">.</span><span style="color: #B392F0">external</span><span style="color: #E1E4E8">.</span><span style="color: #B392F0">github</span><span style="color: #E1E4E8">]</span></span>\n<span class="line"><span style="color: #E1E4E8">enabled = </span><span style="color: #79B8FF">true</span></span>\n<span class="line"><span style="color: #E1E4E8">client_id = </span><span style="color: #9ECBFF">"env(GITHUB_CLIENT_ID)"</span></span>\n<span class="line"><span style="color: #E1E4E8">secret = </span><span style="color: #9ECBFF">"env(GITHUB_CLIENT_SECRET)"</span></span>\n<span class="line"><span style="color: #E1E4E8">redirect_uri = </span><span style="color: #9ECBFF">"http://localhost:54321/auth/v1/callback"</span></span></code></pre>\n<p>The <code>redirect_uri</code> here needs to be the local Supabase URL for OAuth callbacks. The default port is 54321, so double-check the port.</p>\n<p>After editing <code>config.toml</code>, you need to restart Supabase to reload the configuration:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #B392F0">npx</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">supabase</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">stop</span></span>\n<span class="line"><span style="color: #B392F0">npx</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">supabase</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">start</span></span></code></pre>\n<p>Next, you need to generate the OAuth URL to use in your application. Here’s an example generating a URL to login with GitHub:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> { createServerClient, parseCookieHeader } </span><span style="color: #F97583">from</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">"@supabase/ssr"</span><span style="color: #E1E4E8">;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">supabaseUrl</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">import</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">meta</span><span style="color: #E1E4E8">.env.</span><span style="color: #79B8FF">SUPABASE_URL</span><span style="color: #E1E4E8">;</span></span>\n<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">supabaseAnonKey</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">import</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">meta</span><span style="color: #E1E4E8">.env.</span><span style="color: #79B8FF">SUPABASE_ANON_KEY</span><span style="color: #E1E4E8">;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">supabaseUrl</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">import</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">meta</span><span style="color: #E1E4E8">.env.</span><span style="color: #79B8FF">SUPABASE_URL</span><span style="color: #E1E4E8">;</span></span>\n<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">supabaseAnonKey</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">import</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">meta</span><span style="color: #E1E4E8">.env.</span><span style="color: #79B8FF">SUPABASE_ANON_KEY</span><span style="color: #E1E4E8">;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #F97583">export</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">GET</span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">APIRoute</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">async</span><span style="color: #E1E4E8"> ({ </span><span style="color: #FFAB70">url</span><span style="color: #E1E4E8">, </span><span style="color: #FFAB70">request</span><span style="color: #E1E4E8">, </span><span style="color: #FFAB70">cookies</span><span style="color: #E1E4E8">, </span><span style="color: #FFAB70">redirect</span><span style="color: #E1E4E8"> }) </span><span style="color: #F97583">=></span><span style="color: #E1E4E8"> {</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #6A737D">// if there's no code then redirect to login</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">code</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> url.searchParams.</span><span style="color: #B392F0">get</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">"code"</span><span style="color: #E1E4E8">);</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (</span><span style="color: #F97583">!</span><span style="color: #E1E4E8">code) {</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #B392F0">redirect</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">"/login?error=no-code"</span><span style="color: #E1E4E8">);</span></span>\n<span class="line"><span style="color: #E1E4E8"> }</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #6A737D">// there is a code, try to log in</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">supabase</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">createServerClient</span><span style="color: #E1E4E8">(supabaseUrl, supabaseAnonKey, {</span></span>\n<span class="line"><span style="color: #E1E4E8"> cookies: {</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #B392F0">getAll</span><span style="color: #E1E4E8">() {</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">parseCookieHeader</span><span style="color: #E1E4E8">(request.headers.</span><span style="color: #B392F0">get</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">"cookie"</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">||</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">""</span><span style="color: #E1E4E8">);</span></span>\n<span class="line"><span style="color: #E1E4E8"> },</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #B392F0">setAll</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">cookiesToSet</span><span style="color: #E1E4E8">) {</span></span>\n<span class="line"><span style="color: #E1E4E8"> cookiesToSet.</span><span style="color: #B392F0">forEach</span><span style="color: #E1E4E8">(({ </span><span style="color: #FFAB70">name</span><span style="color: #E1E4E8">, </span><span style="color: #FFAB70">value</span><span style="color: #E1E4E8">, </span><span style="color: #FFAB70">options</span><span style="color: #E1E4E8"> }) </span><span style="color: #F97583">=></span></span>\n<span class="line"><span style="color: #E1E4E8"> cookies.</span><span style="color: #B392F0">set</span><span style="color: #E1E4E8">(name, value, options)</span></span>\n<span class="line"><span style="color: #E1E4E8"> );</span></span>\n<span class="line"><span style="color: #E1E4E8"> },</span></span>\n<span class="line"><span style="color: #E1E4E8"> },</span></span>\n<span class="line"><span style="color: #E1E4E8"> });</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> { </span><span style="color: #79B8FF">data</span><span style="color: #E1E4E8">, </span><span style="color: #79B8FF">error</span><span style="color: #E1E4E8"> } </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">await</span><span style="color: #E1E4E8"> supabase.auth.</span><span style="color: #B392F0">signInWithOAuth</span><span style="color: #E1E4E8">({</span></span>\n<span class="line"><span style="color: #E1E4E8"> provider: </span><span style="color: #9ECBFF">"github"</span><span style="color: #E1E4E8">,</span></span>\n<span class="line"><span style="color: #E1E4E8"> options: {</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #6A737D">// must be listed as additional_redirect_urls</span></span>\n<span class="line"><span style="color: #E1E4E8"> redirectTo: </span><span style="color: #9ECBFF">`http://localhost:4321/auth/callback`</span></span>\n<span class="line"><span style="color: #E1E4E8"> }</span></span>\n<span class="line"><span style="color: #E1E4E8"> });</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (error </span><span style="color: #F97583">||</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">!</span><span style="color: #E1E4E8">data?.url) {</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #6A737D">// handle error</span></span>\n<span class="line"><span style="color: #E1E4E8"> }</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #B392F0">redirect</span><span style="color: #E1E4E8">(data.url);</span></span>\n<span class="line"><span style="color: #E1E4E8">}</span></span></code></pre>\n<p>Everything is now wired up for the correct end-to-end flow.</p>","tags":["JavaScript","Supabase","OAuth","Login"],"date_published":"2025-08-27T00:00:00.000Z","date_updated":"2025-08-27T00:00:00.000Z"},{"id":"https://humanwhocodes.com/snippets/2025/08/run-multiple-cloudflare-workers-locally/","url":"https://humanwhocodes.com/snippets/2025/08/run-multiple-cloudflare-workers-locally/","title":"Run multiple Cloudflare workers locally","author":{"name":"Nicholas C. Zakas"},"summary":"Wrangler is made primarily to run one worker at a time. You can also use it to run all of your workers at the same time.","content_text":"\nWhen you're testing an application locally, you ideally want an environment that\nmimics production as much as possible. Especially when you're using multiple\n[Cloudflare workers](https://workers.cloudflare.com/), you'll want to make sure\nyou can run them together for end-to-end testing during development. Without\nthis ability, you either need to run everything in the cloud (problematic when\nyour internet connection is down or slow) and test each worker individually.\n\n[Wrangler](https://developers.cloudflare.com/workers/wrangler/) is capable of\nrunning multiple workers at the same time, like this:\n\n```shell\nnpx wrangler dev -c worker1/wrangler.jsonc -c worker2/wrangler.jsonc\n```\n\nThis is important because workers run together in one dev session share\nresources, including queues, and can communicate with one another. That's key\nfor creating a production-like environment locally.\n\nHowever, Wrangler only starts _one server_ for all workers and there's no way to\nroute between them. After some digging, I found this note in the\n[docs](https://developers.cloudflare.com/workers/wrangler/commands/#dev):\n\n> You can provide multiple configuration files to run multiple Workers in one\n> dev session like this:\n> `wrangler dev -c ./wrangler.toml -c ../other-worker/wrangler.toml`. The first\n> config will be treated as the _primary Worker_, which will be exposed over\n> HTTP. The remaining config files will only be accessible via a service binding\n> from the primary Worker.\n\nThat means we need the first worker listed to both list other workers as service\nbindings and route requests to the correct worker.\n\n## The `http` worker\n\nYou can create a simple worker, that I name `http`, to handle this for you. The\nfirst step is to list your other services in the `wrangler.jsonc` file:\n\n```jsonc\n{\n \"$schema\": \"node_modules/wrangler/config-schema.json\",\n \"name\": \"http\",\n \"main\": \"src/index.ts\",\n \"compatibility_date\": \"2025-08-22\",\n \"services\": [\n {\n \"binding\": \"worker1\",\n \"service\": \"worker1\"\n },\n {\n \"binding\": \"worker2\",\n \"service\": \"worker2\"\n }\n ]\n}\n```\n\nNext, you'll use [Hono](https://hono.dev) to route requests based on the request\npath. To make things easy, the path will be the worker binding name, which means\nyou'll only need to update the `wrangler.jsonc` file when you want to add or\nremove workers. Here's the code:\n\n```typescript\nimport { Hono } from \"hono\";\n\ninterface Bindings {\n [binding: string]: Fetcher;\n}\n\nconst app = new Hono<{ Bindings: Bindings }>();\n\napp.all(\"/:worker/*\", (c) => {\n const worker = c.req.param(\"worker\");\n const binding = c.env[worker];\n\n if (!binding || typeof binding.fetch !== \"function\") {\n return c.text(`Worker binding '${worker}' not found`, 404);\n }\n\n // Rewrite the URL to remove the worker prefix\n const url = URL.parse(c.req.url) as URL;\n url.pathname = url.pathname.slice(`/${worker}`.length) || \"/\";\n\n // create a new request object to avoid issues with reused requests\n const request = new Request(url, c.req.raw.clone());\n\n return binding.fetch(request);\n});\n\nexport default app;\n```\n\nNote that you need to pass `c.req.raw` to the worker rather than `c.req`, which\nis a Hono-specific object. In this way, all of the request information is passed\ndirectly to the worker. (You can, optionally, modify it as necessary.)\n\nNow, make sure that the `http` worker is the first one passed to Wrangler:\n\n```shell\nnpx wrangler dev -c http/wrangler.jsonc -c worker1/wrangler.jsonc -c worker2/wrangler.jsonc\n```\n\nThen you can test out your workers locally:\n\n```shell\n# call worker1\ncurl -i -X POST http://localhost:8787/worker1 \\\n -H \"Content-Type: application/json\" \\\n -d '{\"message\":\"Hello worker1!\"}'\n\n# call worker2\ncurl -i -X POST http://localhost:8787/worker2 \\\n -H \"Content-Type: application/json\" \\\n -d '{\"message\":\"Hello worker2!\"}'\n```\n\nEnjoy your local multi-worker development environment!\n\n**Updated (2025-08-25):** Cleaned up TypeScript code to match best practices for\nHono.\n\n**Updated (2025-09-08):** Enhanced the Hono app so that it handles URL rewriting\nand all HTTP verbs.\n","content_html":"<p>When you’re testing an application locally, you ideally want an environment that\nmimics production as much as possible. Especially when you’re using multiple\n<a href="https://workers.cloudflare.com/">Cloudflare workers</a>, you’ll want to make sure\nyou can run them together for end-to-end testing during development. Without\nthis ability, you either need to run everything in the cloud (problematic when\nyour internet connection is down or slow) and test each worker individually.</p>\n<p><a href="https://developers.cloudflare.com/workers/wrangler/">Wrangler</a> is capable of\nrunning multiple workers at the same time, like this:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #B392F0">npx</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">wrangler</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">dev</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-c</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">worker1/wrangler.jsonc</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-c</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">worker2/wrangler.jsonc</span></span></code></pre>\n<p>This is important because workers run together in one dev session share\nresources, including queues, and can communicate with one another. That’s key\nfor creating a production-like environment locally.</p>\n<p>However, Wrangler only starts <em>one server</em> for all workers and there’s no way to\nroute between them. After some digging, I found this note in the\n<a href="https://developers.cloudflare.com/workers/wrangler/commands/#dev">docs</a>:</p>\n<blockquote>\n<p>You can provide multiple configuration files to run multiple Workers in one\ndev session like this:\n<code>wrangler dev -c ./wrangler.toml -c ../other-worker/wrangler.toml</code>. The first\nconfig will be treated as the <em>primary Worker</em>, which will be exposed over\nHTTP. The remaining config files will only be accessible via a service binding\nfrom the primary Worker.</p>\n</blockquote>\n<p>That means we need the first worker listed to both list other workers as service\nbindings and route requests to the correct worker.</p>\n<h2 id="the-http-worker">The <code>http</code> worker</h2>\n<p>You can create a simple worker, that I name <code>http</code>, to handle this for you. The\nfirst step is to list your other services in the <code>wrangler.jsonc</code> file:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #E1E4E8">{</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"$schema"</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">"node_modules/wrangler/config-schema.json"</span><span style="color: #E1E4E8">,</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"name"</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">"http"</span><span style="color: #E1E4E8">,</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"main"</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">"src/index.ts"</span><span style="color: #E1E4E8">,</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"compatibility_date"</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">"2025-08-22"</span><span style="color: #E1E4E8">,</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"services"</span><span style="color: #E1E4E8">: [</span></span>\n<span class="line"><span style="color: #E1E4E8"> {</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"binding"</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">"worker1"</span><span style="color: #E1E4E8">,</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"service"</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">"worker1"</span></span>\n<span class="line"><span style="color: #E1E4E8"> },</span></span>\n<span class="line"><span style="color: #E1E4E8"> {</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"binding"</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">"worker2"</span><span style="color: #E1E4E8">,</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"service"</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">"worker2"</span></span>\n<span class="line"><span style="color: #E1E4E8"> }</span></span>\n<span class="line"><span style="color: #E1E4E8"> ]</span></span>\n<span class="line"><span style="color: #E1E4E8">}</span></span></code></pre>\n<p>Next, you’ll use <a href="https://hono.dev">Hono</a> to route requests based on the request\npath. To make things easy, the path will be the worker binding name, which means\nyou’ll only need to update the <code>wrangler.jsonc</code> file when you want to add or\nremove workers. Here’s the code:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> { Hono } </span><span style="color: #F97583">from</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">"hono"</span><span style="color: #E1E4E8">;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #F97583">interface</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">Bindings</span><span style="color: #E1E4E8"> {</span></span>\n<span class="line"><span style="color: #E1E4E8"> [</span><span style="color: #FFAB70">binding</span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">string</span><span style="color: #E1E4E8">]</span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">Fetcher</span><span style="color: #E1E4E8">;</span></span>\n<span class="line"><span style="color: #E1E4E8">}</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">app</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">new</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">Hono</span><span style="color: #E1E4E8">&#x3C;{ </span><span style="color: #FFAB70">Bindings</span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">Bindings</span><span style="color: #E1E4E8"> }>();</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #E1E4E8">app.</span><span style="color: #B392F0">all</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">"/:worker/*"</span><span style="color: #E1E4E8">, (</span><span style="color: #FFAB70">c</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">=></span><span style="color: #E1E4E8"> {</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">worker</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> c.req.</span><span style="color: #B392F0">param</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">"worker"</span><span style="color: #E1E4E8">);</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">binding</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> c.env[worker];</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (</span><span style="color: #F97583">!</span><span style="color: #E1E4E8">binding </span><span style="color: #F97583">||</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">typeof</span><span style="color: #E1E4E8"> binding.fetch </span><span style="color: #F97583">!==</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">"function"</span><span style="color: #E1E4E8">) {</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> c.</span><span style="color: #B392F0">text</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">`Worker binding '${</span><span style="color: #E1E4E8">worker</span><span style="color: #9ECBFF">}' not found`</span><span style="color: #E1E4E8">, </span><span style="color: #79B8FF">404</span><span style="color: #E1E4E8">);</span></span>\n<span class="line"><span style="color: #E1E4E8"> }</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #6A737D">// Rewrite the URL to remove the worker prefix</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">url</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">URL</span><span style="color: #E1E4E8">.</span><span style="color: #B392F0">parse</span><span style="color: #E1E4E8">(c.req.url) </span><span style="color: #F97583">as</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">URL</span><span style="color: #E1E4E8">;</span></span>\n<span class="line"><span style="color: #E1E4E8"> url.pathname </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> url.pathname.</span><span style="color: #B392F0">slice</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">`/${</span><span style="color: #E1E4E8">worker</span><span style="color: #9ECBFF">}`</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">length</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">||</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">"/"</span><span style="color: #E1E4E8">;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #6A737D">// create a new request object to avoid issues with reused requests</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">request</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">new</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">Request</span><span style="color: #E1E4E8">(url, c.req.raw.</span><span style="color: #B392F0">clone</span><span style="color: #E1E4E8">());</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> binding.</span><span style="color: #B392F0">fetch</span><span style="color: #E1E4E8">(request);</span></span>\n<span class="line"><span style="color: #E1E4E8">});</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #F97583">export</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">default</span><span style="color: #E1E4E8"> app;</span></span></code></pre>\n<p>Note that you need to pass <code>c.req.raw</code> to the worker rather than <code>c.req</code>, which\nis a Hono-specific object. In this way, all of the request information is passed\ndirectly to the worker. (You can, optionally, modify it as necessary.)</p>\n<p>Now, make sure that the <code>http</code> worker is the first one passed to Wrangler:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #B392F0">npx</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">wrangler</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">dev</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-c</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">http/wrangler.jsonc</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-c</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">worker1/wrangler.jsonc</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-c</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">worker2/wrangler.jsonc</span></span></code></pre>\n<p>Then you can test out your workers locally:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #6A737D"># call worker1</span></span>\n<span class="line"><span style="color: #B392F0">curl</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-i</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-X</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">POST</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">http://localhost:8787/worker1</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">\\</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-H</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">"Content-Type: application/json"</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">\\</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-d</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">'{"message":"Hello worker1!"}'</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #6A737D"># call worker2</span></span>\n<span class="line"><span style="color: #B392F0">curl</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-i</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-X</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">POST</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">http://localhost:8787/worker2</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">\\</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-H</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">"Content-Type: application/json"</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">\\</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-d</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">'{"message":"Hello worker2!"}'</span></span></code></pre>\n<p>Enjoy your local multi-worker development environment!</p>\n<p><strong>Updated (2025-08-25):</strong> Cleaned up TypeScript code to match best practices for\nHono.</p>\n<p><strong>Updated (2025-09-08):</strong> Enhanced the Hono app so that it handles URL rewriting\nand all HTTP verbs.</p>","tags":["JavaScript","Cloudflare","Edge Workers"],"date_published":"2025-08-22T00:00:00.000Z","date_updated":"2025-08-22T00:00:00.000Z"},{"id":"https://humanwhocodes.com/snippets/2025/02/passing-github-action-step-output-to-script/","url":"https://humanwhocodes.com/snippets/2025/02/passing-github-action-step-output-to-script/","title":"Passing GitHub Actions workflow step output to JavaScript","author":{"name":"Nicholas C. Zakas"},"summary":"When you want your JavaScript code to access all of the data from a previous GitHub Actions workflow step.","content_text":"\nGitHub Actions workflows allow each step to create output that is available in other steps, such as:\n\n```yaml\nname: Test Steps Output\non: workflow_dispatch\njobs:\n test:\n runs-on: ubuntu-latest\n steps:\n - id: release\n run: |\n echo \"release_created=true\" >> \"$GITHUB_OUTPUT\"\n echo \"project_name=MyProject\" >> \"$GITHUB_OUTPUT\"\n\n - run: echo ${{ steps.release.outputs.release_created }}\n```\n\nThis outputs the `release_created` value from the `release` step in the next step. You can pass this individually into a JavaScript file by creating environment variables:\n\n```yaml\nname: Test Steps Output\non: workflow_dispatch\njobs:\n test:\n runs-on: ubuntu-latest\n steps:\n - name: Check out repo\n uses: actions/checkout@v4\n\n - name: Set up Node.js\n uses: actions/setup-node@v4\n\n - id: release\n run: |\n echo \"release_created=true\" >> \"$GITHUB_OUTPUT\"\n echo \"project_name=MyProject\" >> \"$GITHUB_OUTPUT\"\n\n - run: node extract.mjs\n env:\n RELEASE_CREATED: ${{ steps.release.outputs.release_created }}\n PROJECT_NAME: ${{ steps.release.outputs.project_name }}\n```\n\nHowever, that can get unwieldy if there are more than a few step outputs, and especially if you're unsure exactly which outputs will be created. \n\nInstead, you can use the `toJSON()` helper to serialize all of the step outputs into a JSON object and create one environment variable to capture it:\n\n```yaml\nname: Test Steps Output\non: workflow_dispatch\njobs:\n test:\n runs-on: ubuntu-latest\n steps:\n - name: Check out repo\n uses: actions/checkout@v4\n\n - name: Set up Node.js\n uses: actions/setup-node@v4\n\n - id: release\n run: |\n echo \"release_created=true\" >> \"$GITHUB_OUTPUT\"\n echo \"project_name=MyProject\" >> \"$GITHUB_OUTPUT\"\n\n - run: node extract.mjs\n env:\n RELEASE_OUTPUTS: ${{ toJSON(steps.release.outputs) }}\n```\n\nNow, inside of `extract.mjs`, you can use retrieve all of the data from the `release` step by parsing the `RELEASE_OUTPUTS` environment variable:\n\n```js\nconst releaseOutputs = JSON.parse(process.env.RELEASE_OUTPUTS || \"{}\");\n\nconsole.log(releaseOutputs.released_created); // true\nconsole.log(releaseOutputs.project_name); // MyProject\n```\n\nThis makes it a lot easier to create JavaScript files to work in your GitHub Actions workflow.\n","content_html":"<p>GitHub Actions workflows allow each step to create output that is available in other steps, such as:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #85E89D">name</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">Test Steps Output</span></span>\n<span class="line"><span style="color: #79B8FF">on</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">workflow_dispatch</span></span>\n<span class="line"><span style="color: #85E89D">jobs</span><span style="color: #E1E4E8">:</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">test</span><span style="color: #E1E4E8">:</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">runs-on</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">ubuntu-latest</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">steps</span><span style="color: #E1E4E8">:</span></span>\n<span class="line"><span style="color: #E1E4E8"> - </span><span style="color: #85E89D">id</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">release</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">run</span><span style="color: #E1E4E8">: </span><span style="color: #F97583">|</span></span>\n<span class="line"><span style="color: #9ECBFF"> echo "release_created=true" >> "$GITHUB_OUTPUT"</span></span>\n<span class="line"><span style="color: #9ECBFF"> echo "project_name=MyProject" >> "$GITHUB_OUTPUT"</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #E1E4E8"> - </span><span style="color: #85E89D">run</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">echo ${{ steps.release.outputs.release_created }}</span></span></code></pre>\n<p>This outputs the <code>release_created</code> value from the <code>release</code> step in the next step. You can pass this individually into a JavaScript file by creating environment variables:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #85E89D">name</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">Test Steps Output</span></span>\n<span class="line"><span style="color: #79B8FF">on</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">workflow_dispatch</span></span>\n<span class="line"><span style="color: #85E89D">jobs</span><span style="color: #E1E4E8">:</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">test</span><span style="color: #E1E4E8">:</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">runs-on</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">ubuntu-latest</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">steps</span><span style="color: #E1E4E8">:</span></span>\n<span class="line"><span style="color: #E1E4E8"> - </span><span style="color: #85E89D">name</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">Check out repo</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">uses</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">actions/checkout@v4</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #E1E4E8"> - </span><span style="color: #85E89D">name</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">Set up Node.js</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">uses</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">actions/setup-node@v4</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #E1E4E8"> - </span><span style="color: #85E89D">id</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">release</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">run</span><span style="color: #E1E4E8">: </span><span style="color: #F97583">|</span></span>\n<span class="line"><span style="color: #9ECBFF"> echo "release_created=true" >> "$GITHUB_OUTPUT"</span></span>\n<span class="line"><span style="color: #9ECBFF"> echo "project_name=MyProject" >> "$GITHUB_OUTPUT"</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #E1E4E8"> - </span><span style="color: #85E89D">run</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">node extract.mjs</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">env</span><span style="color: #E1E4E8">:</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">RELEASE_CREATED</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">${{ steps.release.outputs.release_created }}</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">PROJECT_NAME</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">${{ steps.release.outputs.project_name }}</span></span></code></pre>\n<p>However, that can get unwieldy if there are more than a few step outputs, and especially if you’re unsure exactly which outputs will be created.</p>\n<p>Instead, you can use the <code>toJSON()</code> helper to serialize all of the step outputs into a JSON object and create one environment variable to capture it:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #85E89D">name</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">Test Steps Output</span></span>\n<span class="line"><span style="color: #79B8FF">on</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">workflow_dispatch</span></span>\n<span class="line"><span style="color: #85E89D">jobs</span><span style="color: #E1E4E8">:</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">test</span><span style="color: #E1E4E8">:</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">runs-on</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">ubuntu-latest</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">steps</span><span style="color: #E1E4E8">:</span></span>\n<span class="line"><span style="color: #E1E4E8"> - </span><span style="color: #85E89D">name</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">Check out repo</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">uses</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">actions/checkout@v4</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #E1E4E8"> - </span><span style="color: #85E89D">name</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">Set up Node.js</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">uses</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">actions/setup-node@v4</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #E1E4E8"> - </span><span style="color: #85E89D">id</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">release</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">run</span><span style="color: #E1E4E8">: </span><span style="color: #F97583">|</span></span>\n<span class="line"><span style="color: #9ECBFF"> echo "release_created=true" >> "$GITHUB_OUTPUT"</span></span>\n<span class="line"><span style="color: #9ECBFF"> echo "project_name=MyProject" >> "$GITHUB_OUTPUT"</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #E1E4E8"> - </span><span style="color: #85E89D">run</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">node extract.mjs</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">env</span><span style="color: #E1E4E8">:</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">RELEASE_OUTPUTS</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">${{ toJSON(steps.release.outputs) }}</span></span></code></pre>\n<p>Now, inside of <code>extract.mjs</code>, you can use retrieve all of the data from the <code>release</code> step by parsing the <code>RELEASE_OUTPUTS</code> environment variable:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">releaseOutputs</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">JSON</span><span style="color: #E1E4E8">.</span><span style="color: #B392F0">parse</span><span style="color: #E1E4E8">(process.env.</span><span style="color: #79B8FF">RELEASE_OUTPUTS</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">||</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">"{}"</span><span style="color: #E1E4E8">);</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #E1E4E8">console.</span><span style="color: #B392F0">log</span><span style="color: #E1E4E8">(releaseOutputs.released_created); </span><span style="color: #6A737D">// true</span></span>\n<span class="line"><span style="color: #E1E4E8">console.</span><span style="color: #B392F0">log</span><span style="color: #E1E4E8">(releaseOutputs.project_name); </span><span style="color: #6A737D">// MyProject</span></span></code></pre>\n<p>This makes it a lot easier to create JavaScript files to work in your GitHub Actions workflow.</p>","tags":["JavaScript","GitHub","GitHub Actions","Environment Variables"],"date_published":"2025-02-21T00:00:00.000Z","date_updated":"2025-02-21T00:00:00.000Z"},{"id":"https://humanwhocodes.com/snippets/2024/03/publishing-to-jsr-release-please/","url":"https://humanwhocodes.com/snippets/2024/03/publishing-to-jsr-release-please/","title":"Publishing to JSR using release-please","author":{"name":"Nicholas C. Zakas"},"summary":"With a little work, you can use release-please and GitHub Actions to publish to JSR.","content_text":"\nThere is no JSR-specific release strategy for [release-please](https://github.com/google-github-actions/release-please-action), so you'll need to use the `\"node\"` strategy and include a `package.json` file in your root. Then, you'll need to tell release-please to update your `jsr.json` file version (in addition to the `package.json` file) when a new release is created. To do so, update your `release-please-config.json` file to use `extra-files`, like this:\n\n```json\n{\n \"packages\": {\n \".\": {\n \"release-type\": \"node\",\n \"extra-files\": [\n {\n \"type\": \"json\",\n \"path\": \"jsr.json\",\n \"jsonpath\": \"$.version\"\n }\n ]\n }\n }\n}\n```\n\nThe `\"path\"` should be to the location of your `jsr.json` file. The `\"jsonpath\"` specifies the location of the field with a version number to update.\n\nThen, you can publish to JSR using a GitHub action. Assuming you want to publish to both npm and JSR, it's easiest to use the `jsr` npm module, like this:\n\n```yaml\non:\n push:\n branches:\n - main\nname: release-please\n\npermissions:\n contents: write\n pull-requests: write\n id-token: write\n\njobs:\n release-please:\n runs-on: ubuntu-latest\n steps:\n - uses: GoogleCloudPlatform/release-please-action@v4\n id: release\n with:\n token: ${{ secrets.GITHUB_TOKEN }}\n \n - uses: actions/checkout@v4\n if: ${{ steps.release.outputs.release_created }}\n\n - uses: actions/setup-node@v4\n with:\n node-version: lts/*\n registry-url: 'https://registry.npmjs.org'\n if: ${{ steps.release.outputs.release_created }}\n\n - run: npm ci\n if: ${{ steps.release.outputs.release_created }}\n\n - name: Publish to npm\n run: npm publish\n env:\n NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}\n if: ${{ steps.release.outputs.release_created }}\n\n - name: Publish to JSR\n run: |\n npm run build --if-present\n npx jsr publish\n if: ${{ steps.release.outputs.release_created }}\n```\n\nKeep in mind that `jsr publish` does not run any scripts beforehand, so if you want to run something like `npm run build`, you'll need to explicitly specify it as part of your `run` command.\n","content_html":"<p>There is no JSR-specific release strategy for <a href="https://github.com/google-github-actions/release-please-action">release-please</a>, so you’ll need to use the <code>"node"</code> strategy and include a <code>package.json</code> file in your root. Then, you’ll need to tell release-please to update your <code>jsr.json</code> file version (in addition to the <code>package.json</code> file) when a new release is created. To do so, update your <code>release-please-config.json</code> file to use <code>extra-files</code>, like this:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #E1E4E8">{</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"packages"</span><span style="color: #E1E4E8">: {</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"."</span><span style="color: #E1E4E8">: {</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"release-type"</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">"node"</span><span style="color: #E1E4E8">,</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"extra-files"</span><span style="color: #E1E4E8">: [</span></span>\n<span class="line"><span style="color: #E1E4E8"> {</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"type"</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">"json"</span><span style="color: #E1E4E8">,</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"path"</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">"jsr.json"</span><span style="color: #E1E4E8">,</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">"jsonpath"</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">"$.version"</span></span>\n<span class="line"><span style="color: #E1E4E8"> }</span></span>\n<span class="line"><span style="color: #E1E4E8"> ]</span></span>\n<span class="line"><span style="color: #E1E4E8"> }</span></span>\n<span class="line"><span style="color: #E1E4E8"> }</span></span>\n<span class="line"><span style="color: #E1E4E8">}</span></span></code></pre>\n<p>The <code>"path"</code> should be to the location of your <code>jsr.json</code> file. The <code>"jsonpath"</code> specifies the location of the field with a version number to update.</p>\n<p>Then, you can publish to JSR using a GitHub action. Assuming you want to publish to both npm and JSR, it’s easiest to use the <code>jsr</code> npm module, like this:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #79B8FF">on</span><span style="color: #E1E4E8">:</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">push</span><span style="color: #E1E4E8">:</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">branches</span><span style="color: #E1E4E8">:</span></span>\n<span class="line"><span style="color: #E1E4E8"> - </span><span style="color: #9ECBFF">main</span></span>\n<span class="line"><span style="color: #85E89D">name</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">release-please</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #85E89D">permissions</span><span style="color: #E1E4E8">:</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">contents</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">write</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">pull-requests</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">write</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">id-token</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">write</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #85E89D">jobs</span><span style="color: #E1E4E8">:</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">release-please</span><span style="color: #E1E4E8">:</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">runs-on</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">ubuntu-latest</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">steps</span><span style="color: #E1E4E8">:</span></span>\n<span class="line"><span style="color: #E1E4E8"> - </span><span style="color: #85E89D">uses</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">GoogleCloudPlatform/release-please-action@v4</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">id</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">release</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">with</span><span style="color: #E1E4E8">:</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">token</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">${{ secrets.GITHUB_TOKEN }}</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span></span>\n<span class="line"><span style="color: #E1E4E8"> - </span><span style="color: #85E89D">uses</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">actions/checkout@v4</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">if</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">${{ steps.release.outputs.release_created }}</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #E1E4E8"> - </span><span style="color: #85E89D">uses</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">actions/setup-node@v4</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">with</span><span style="color: #E1E4E8">:</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">node-version</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">lts/*</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">registry-url</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">'https://registry.npmjs.org'</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">if</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">${{ steps.release.outputs.release_created }}</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #E1E4E8"> - </span><span style="color: #85E89D">run</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">npm ci</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">if</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">${{ steps.release.outputs.release_created }}</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #E1E4E8"> - </span><span style="color: #85E89D">name</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">Publish to npm</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">run</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">npm publish</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">env</span><span style="color: #E1E4E8">:</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">NODE_AUTH_TOKEN</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">${{secrets.NPM_TOKEN}}</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">if</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">${{ steps.release.outputs.release_created }}</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #E1E4E8"> - </span><span style="color: #85E89D">name</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">Publish to JSR</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">run</span><span style="color: #E1E4E8">: </span><span style="color: #F97583">|</span></span>\n<span class="line"><span style="color: #9ECBFF"> npm run build --if-present</span></span>\n<span class="line"><span style="color: #9ECBFF"> npx jsr publish</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #85E89D">if</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">${{ steps.release.outputs.release_created }}</span></span></code></pre>\n<p>Keep in mind that <code>jsr publish</code> does not run any scripts beforehand, so if you want to run something like <code>npm run build</code>, you’ll need to explicitly specify it as part of your <code>run</code> command.</p>","tags":["JavaScript","TypeScript","npm","JSR"],"date_published":"2024-03-19T00:00:00.000Z","date_updated":"2024-03-19T00:00:00.000Z"},{"id":"https://humanwhocodes.com/snippets/2023/11/how-to-setup-known-hosts-jenkins-pipeline/","url":"https://humanwhocodes.com/snippets/2023/11/how-to-setup-known-hosts-jenkins-pipeline/","title":"How to setup a known_hosts file for a Jenkins pipeline job","author":{"name":"Nicholas C. Zakas"},"summary":"The builtin Git Host Key Verification for Jenkins doesn't work in pipeline jobs. Here's what to do instead.","content_text":"\n[Jenkins](https://jenkins.io) pipelines are a great way to programmatically describe your build steps. Unforunately, that power also comes with responsibility, as a lot of the built-in Jenkins functionality may not work the way you imagine. Specifically, the Git Host Key Verification setting for Jenkins isn't used with pipeline jobs, making it common to get \"Host key verification errors\" when using Git. If you're using Git in a pipeline job, you'll need to set up your own `known_hosts` file.\n\nFirst, SSH into your host with an account that has `sudo` access.\n\nThen, make sure you have a `known_hosts` file that has all of the host information already present. In my case, I needed to add the keys for `github.com`, so I used this (via [GitHub blog](https://github.blog/2023-03-23-we-updated-our-rsa-ssh-host-key/)):\n\n```sh\ncurl -L https://api.github.com/meta | jq -r '.ssh_keys | .[]' | sed -e 's/^/github.com /' >> ~/.ssh/known_hosts\n```\n\nNext, verify that `/var/lib/jenkins/.ssh` exists. If it doesn't, then create it like this:\n\n```sh\n# create directory\nsudo mkdir /var/lib/jenkins/.ssh\n\n# ensure the directory is owned by the Jenkins user\nchown -R jenkins:jenkins /var/lib/.ssh\n```\n\nCopy your `known_hosts` file over:\n\n```sh\nsudo cp ~/.ssh/known_hosts /var/lib/jenkins/.ssh\n```\n\nAt this point, your Jenkins pipeline job has access to the new `known_hosts` file so you should be able to run it without any problem.\n","content_html":"<p><a href="https://jenkins.io">Jenkins</a> pipelines are a great way to programmatically describe your build steps. Unforunately, that power also comes with responsibility, as a lot of the built-in Jenkins functionality may not work the way you imagine. Specifically, the Git Host Key Verification setting for Jenkins isn’t used with pipeline jobs, making it common to get “Host key verification errors” when using Git. If you’re using Git in a pipeline job, you’ll need to set up your own <code>known_hosts</code> file.</p>\n<p>First, SSH into your host with an account that has <code>sudo</code> access.</p>\n<p>Then, make sure you have a <code>known_hosts</code> file that has all of the host information already present. In my case, I needed to add the keys for <code>github.com</code>, so I used this (via <a href="https://github.blog/2023-03-23-we-updated-our-rsa-ssh-host-key/">GitHub blog</a>):</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #B392F0">curl</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-L</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">https://api.github.com/meta</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">|</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">jq</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-r</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">'.ssh_keys | .[]'</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">|</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">sed</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-e</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">'s/^/github.com /'</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">>></span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">~/.ssh/known_hosts</span></span></code></pre>\n<p>Next, verify that <code>/var/lib/jenkins/.ssh</code> exists. If it doesn’t, then create it like this:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #6A737D"># create directory</span></span>\n<span class="line"><span style="color: #B392F0">sudo</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">mkdir</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">/var/lib/jenkins/.ssh</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #6A737D"># ensure the directory is owned by the Jenkins user</span></span>\n<span class="line"><span style="color: #B392F0">chown</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-R</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">jenkins:jenkins</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">/var/lib/.ssh</span></span></code></pre>\n<p>Copy your <code>known_hosts</code> file over:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #B392F0">sudo</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">cp</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">~/.ssh/known_hosts</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">/var/lib/jenkins/.ssh</span></span></code></pre>\n<p>At this point, your Jenkins pipeline job has access to the new <code>known_hosts</code> file so you should be able to run it without any problem.</p>","tags":["Jenkins","Continuous Integration","Automation"],"date_published":"2023-11-15T00:00:00.000Z","date_updated":"2023-11-15T00:00:00.000Z"},{"id":"https://humanwhocodes.com/snippets/2023/01/mimicking-dirname-filename-nodejs-esm/","url":"https://humanwhocodes.com/snippets/2023/01/mimicking-dirname-filename-nodejs-esm/","title":"Mimicking __dirname and __filename in ESM modules in Node.js","author":{"name":"Nicholas C. Zakas"},"summary":"One of the things that I miss most about using ESM is the lack of __dirname and __filename. Here's how to recreate those variables.","content_text":"\nCommonJS files running in Node.js have access to two very helpful variables:\n\n1. `__dirname` - the directory in which the current file lives.\n1. `__filename` - the full path to the current file.\n\nIn ECMAScript modules, however, these are no longer available by default. Fortunately, you can recreate them yourself to get the same information that to the `import.meta.url` property:\n\n```js\nimport { fileURLToPath } from \"node:url\";\nimport path from \"node:path\";\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n```\n\nThe `import.meta.url` property is a file URL, not a file path, so you first have to convert it into a file path. After that, you just need to use `path.dirname()` to pull off the directory.\n","content_html":"<p>CommonJS files running in Node.js have access to two very helpful variables:</p>\n<ol>\n<li><code>__dirname</code> - the directory in which the current file lives.</li>\n<li><code>__filename</code> - the full path to the current file.</li>\n</ol>\n<p>In ECMAScript modules, however, these are no longer available by default. Fortunately, you can recreate them yourself to get the same information that to the <code>import.meta.url</code> property:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> { fileURLToPath } </span><span style="color: #F97583">from</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">"node:url"</span><span style="color: #E1E4E8">;</span></span>\n<span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> path </span><span style="color: #F97583">from</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">"node:path"</span><span style="color: #E1E4E8">;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">__filename</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">fileURLToPath</span><span style="color: #E1E4E8">(</span><span style="color: #F97583">import</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">meta</span><span style="color: #E1E4E8">.url);</span></span>\n<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">__dirname</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> path.</span><span style="color: #B392F0">dirname</span><span style="color: #E1E4E8">(__filename);</span></span></code></pre>\n<p>The <code>import.meta.url</code> property is a file URL, not a file path, so you first have to convert it into a file path. After that, you just need to use <code>path.dirname()</code> to pull off the directory.</p>","tags":["Node.js","ECMAScript Modules"],"date_published":"2023-01-18T00:00:00.000Z","date_updated":"2023-01-18T00:00:00.000Z"},{"id":"https://humanwhocodes.com/snippets/2022/02/eleventy-npm-modules-client/","url":"https://humanwhocodes.com/snippets/2022/02/eleventy-npm-modules-client/","title":"How to add npm packages for client-side use in Eleventy","author":{"name":"Nicholas C. Zakas"},"summary":"It's not immediately obvious how to use npm packages in an Eleventy website front end. Here's how to do it.","content_text":"\nSuppose that you want to use my [ArrayWithDefault](https://npmjs.com/package/@humanwhocodes/array-with-default) package on the front end of an [Eleventy](https://www.11ty.dev/) site. What's the easiest way to make that package available for inclusion in HTML?\n\nFirst, install the package:\n\n```\nnpm install @humanwhocodes/array-with-default\n```\n\nThen, in your Eleventy config file (`.eleventy.js`), add this inside of your default config function:\n\n```js\nmodule.exports = function(eleventyConfig) {\n\n eleventyConfig.addPassthroughCopy({\n \"./node_modules/@humanwhocodes/array-with-default/dist/array-with-default.js\": \"/assets/js/array-with-default.js\"\n });\n\n};\n```\n\nNow, `array-with-default.js` is placed inside the `/assets/js` directory, and you can modify, process, or reference that file the same way that you do any other files in that directory.\n\nThis process works for any npm package that has a defined `dist` directory with standalone files; for other package you may need to first generate a distributable file before copying over into the correct location.\n","content_html":"<p>Suppose that you want to use my <a href="https://npmjs.com/package/@humanwhocodes/array-with-default">ArrayWithDefault</a> package on the front end of an <a href="https://www.11ty.dev/">Eleventy</a> site. What’s the easiest way to make that package available for inclusion in HTML?</p>\n<p>First, install the package:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #e1e4e8">npm install @humanwhocodes/array-with-default</span></span></code></pre>\n<p>Then, in your Eleventy config file (<code>.eleventy.js</code>), add this inside of your default config function:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">function</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">eleventyConfig</span><span style="color: #E1E4E8">) {</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #E1E4E8"> eleventyConfig.</span><span style="color: #B392F0">addPassthroughCopy</span><span style="color: #E1E4E8">({</span></span>\n<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">"./node_modules/@humanwhocodes/array-with-default/dist/array-with-default.js"</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">"/assets/js/array-with-default.js"</span></span>\n<span class="line"><span style="color: #E1E4E8"> });</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #E1E4E8">};</span></span></code></pre>\n<p>Now, <code>array-with-default.js</code> is placed inside the <code>/assets/js</code> directory, and you can modify, process, or reference that file the same way that you do any other files in that directory.</p>\n<p>This process works for any npm package that has a defined <code>dist</code> directory with standalone files; for other package you may need to first generate a distributable file before copying over into the correct location.</p>","tags":["Eleventy","Static Site Generators","JavaScript"],"date_published":"2022-02-17T00:00:00.000Z","date_updated":"2022-02-17T00:00:00.000Z"},{"id":"https://humanwhocodes.com/snippets/2021/03/create-user-linux-ssh-key/","url":"https://humanwhocodes.com/snippets/2021/03/create-user-linux-ssh-key/","title":"Creating a new user with an SSH key on Linux","author":{"name":"Nicholas C. Zakas"},"summary":"The various steps to successfully setup a new user with the best security.","content_text":"\nFirst, create a new user with `useradd`:\n\n```bash\nsudo useradd -m -d /home/username -s /bin/bash username\n```\n\nNext, set the user's password:\n\n```bash\npasswd username\n```\n\n**Note:** Even if you don't want the user to have a password, you should set the password to an empty string.\n\nThen, create the user's `.ssh` directory:\n\n```bash\nmkdir /home/username/.ssh\n```\n\nAnd copy the user's public key into the `authorized_keys` file. This is a plain text file where you can paste one public key per line. Here's an example of downloading the public key from their GitHub profile:\n\n```bash\ncurl https://github.com/.keys > /home/username/.ssh/authorized_keys\n```\n\nAfter that, set up the correct permissions for both the `.ssh` directory and the `authorized_keys` file:\n\n```bash\n# ensure the directory ir owned by the new user\nchown -R username:username /home/username/.ssh\n\n# make sure only the new user has permissions\nchmod 700 /home/username/.ssh\nchmod 600 /home/username/.ssh/authorized_keys\n```\n\nLast, if you want the new user to have sudo access, be sure to add them to the `sudo` group:\n\n```bash\nsudo usermod -a -G sudo username\n```\n\nIf you don't have a `sudo` group, you can manually edit the `/etc/sudoers` file.\n","content_html":"<p>First, create a new user with <code>useradd</code>:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #B392F0">sudo</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">useradd</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-m</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-d</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">/home/username</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-s</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">/bin/bash</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">username</span></span></code></pre>\n<p>Next, set the user’s password:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #B392F0">passwd</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">username</span></span></code></pre>\n<p><strong>Note:</strong> Even if you don’t want the user to have a password, you should set the password to an empty string.</p>\n<p>Then, create the user’s <code>.ssh</code> directory:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #B392F0">mkdir</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">/home/username/.ssh</span></span></code></pre>\n<p>And copy the user’s public key into the <code>authorized_keys</code> file. This is a plain text file where you can paste one public key per line. Here’s an example of downloading the public key from their GitHub profile:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #B392F0">curl</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">https://github.com/</span><span style="color: #F97583">&#x3C;</span><span style="color: #9ECBFF">usernam</span><span style="color: #E1E4E8">e</span><span style="color: #F97583">></span><span style="color: #9ECBFF">.keys</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">></span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">/home/username/.ssh/authorized_keys</span></span></code></pre>\n<p>After that, set up the correct permissions for both the <code>.ssh</code> directory and the <code>authorized_keys</code> file:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #6A737D"># ensure the directory ir owned by the new user</span></span>\n<span class="line"><span style="color: #B392F0">chown</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-R</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">username:username</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">/home/username/.ssh</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #6A737D"># make sure only the new user has permissions</span></span>\n<span class="line"><span style="color: #B392F0">chmod</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">700</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">/home/username/.ssh</span></span>\n<span class="line"><span style="color: #B392F0">chmod</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">600</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">/home/username/.ssh/authorized_keys</span></span></code></pre>\n<p>Last, if you want the new user to have sudo access, be sure to add them to the <code>sudo</code> group:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #B392F0">sudo</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">usermod</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-a</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">-G</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">sudo</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">username</span></span></code></pre>\n<p>If you don’t have a <code>sudo</code> group, you can manually edit the <code>/etc/sudoers</code> file.</p>","tags":["Linux","Users"],"date_published":"2021-03-01T00:00:00.000Z","date_updated":"2021-03-01T00:00:00.000Z"},{"id":"https://humanwhocodes.com/snippets/2021/02/how-to-setup-deploy-web-application-dokku/","url":"https://humanwhocodes.com/snippets/2021/02/how-to-setup-deploy-web-application-dokku/","title":"How to setup and deploy a web application on Dokku","author":{"name":"Nicholas C. Zakas"},"summary":"The path to set up a web application on Dokku is straightforward if you know the correct steps.","content_text":"\n[Dokku](https://dokku.com) is a lightweight, Heroku-like utility for deploying web applications. While there is a quickstart, web-based UI for getting started, there are a bunch of steps you'll need to go through in order to get your application deployed.\n\n## Create the app\n\nThe first step is to SSH into the droplet and create the application. I'll use the name `appname` for this post:\n\n```bash\ndokku apps:create appname\n```\n\n## Add a domain for the app\n\nDokku can use virtual hosts to identify which application to route a request to. You can [add a hostname](https://dokku.com/docs/configuration/domains/) to your application like this:\n\n```bash\ndokku domains:add appname app.example.com\n```\n\nHere, the hostname is set to `app.example.com`, so all requests coming in to that host will route to `appname`.\n\n**Important:** Don't forget to setup the DNS settings for your hostname.\n\n## Add a deploy key\n\nIf you are using your Dokku application in production, you probably want to [add a separate key](https://dokku.com/docs/deployment/user-management/#adding-ssh-keys) for a deployment account.\n\n```bash\ndokku ssh-keys:add KEY_NAME /path/to/key.pub\n```\n\n`KEY_NAME` is just the name of the key so you can refer to it later.\n\n## Setup SSL\n\nBy default, your Dokku application will be running over plain HTTP without any SSL certificates. To enable SSL, you'll need to install the [Let's Encrypt Dokku plugin](https://github.com/dokku/dokku-letsencrypt). To enable Let's Encrypt on your Dokku application, follow these steps (credit: [Setup Dokku on Digital Ocean](https://www.robertcooper.me/setup-dokku-digital-ocean)):\n\n```bash\n# Install the plugin\nsudo dokku plugin:install https://github.com/dokku/dokku-letsencrypt.git\n\n# Set an email address for Let's Encrypt to use\ndokku config:set --no-restart appname DOKKU_LETSENCRYPT_EMAIL=name@example.com\n\n# Install Let's Encrypt for the given app\ndokku letsencrypt appname\n\n# Set a cron job to automatically renew Let's Encrypt certificates\ndokku letsencrypt:cron-job --add\n```\n\n## Deploy your application\n\nWith all of that setup, you're now ready to deploy your application. To do so, add a Git remote that points to the Dokku location:\n\n```bash\ngit remote add dokku dokku@app.example.com:appname\n```\n\nThen, you can deploy by pushing the code to Dokku:\n\n```bash\ngit push dokku master\n```\n\nDokku expects the primary branch to be `master`, so if your primary branch is `main`, then use this command:\n\n```bash\ngit push dokku main:master\n```\n\nEnjoy your newly deployed Dokku app!\n","content_html":"<p><a href="https://dokku.com">Dokku</a> is a lightweight, Heroku-like utility for deploying web applications. While there is a quickstart, web-based UI for getting started, there are a bunch of steps you’ll need to go through in order to get your application deployed.</p>\n<h2 id="create-the-app">Create the app</h2>\n<p>The first step is to SSH into the droplet and create the application. I’ll use the name <code>appname</code> for this post:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #B392F0">dokku</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">apps:create</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">appname</span></span></code></pre>\n<h2 id="add-a-domain-for-the-app">Add a domain for the app</h2>\n<p>Dokku can use virtual hosts to identify which application to route a request to. You can <a href="https://dokku.com/docs/configuration/domains/">add a hostname</a> to your application like this:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #B392F0">dokku</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">domains:add</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">appname</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">app.example.com</span></span></code></pre>\n<p>Here, the hostname is set to <code>app.example.com</code>, so all requests coming in to that host will route to <code>appname</code>.</p>\n<p><strong>Important:</strong> Don’t forget to setup the DNS settings for your hostname.</p>\n<h2 id="add-a-deploy-key">Add a deploy key</h2>\n<p>If you are using your Dokku application in production, you probably want to <a href="https://dokku.com/docs/deployment/user-management/#adding-ssh-keys">add a separate key</a> for a deployment account.</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #B392F0">dokku</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">ssh-keys:add</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">KEY_NAME</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">/path/to/key.pub</span></span></code></pre>\n<p><code>KEY_NAME</code> is just the name of the key so you can refer to it later.</p>\n<h2 id="setup-ssl">Setup SSL</h2>\n<p>By default, your Dokku application will be running over plain HTTP without any SSL certificates. To enable SSL, you’ll need to install the <a href="https://github.com/dokku/dokku-letsencrypt">Let’s Encrypt Dokku plugin</a>. To enable Let’s Encrypt on your Dokku application, follow these steps (credit: <a href="https://www.robertcooper.me/setup-dokku-digital-ocean">Setup Dokku on Digital Ocean</a>):</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #6A737D"># Install the plugin</span></span>\n<span class="line"><span style="color: #B392F0">sudo</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">dokku</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">plugin:install</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">https://github.com/dokku/dokku-letsencrypt.git</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #6A737D"># Set an email address for Let's Encrypt to use</span></span>\n<span class="line"><span style="color: #B392F0">dokku</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">config:set</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">--no-restart</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">appname</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">DOKKU_LETSENCRYPT_EMAIL=name@example.com</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #6A737D"># Install Let's Encrypt for the given app</span></span>\n<span class="line"><span style="color: #B392F0">dokku</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">letsencrypt</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">appname</span></span>\n<span class="line"></span>\n<span class="line"><span style="color: #6A737D"># Set a cron job to automatically renew Let's Encrypt certificates</span></span>\n<span class="line"><span style="color: #B392F0">dokku</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">letsencrypt:cron-job</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">--add</span></span></code></pre>\n<h2 id="deploy-your-application">Deploy your application</h2>\n<p>With all of that setup, you’re now ready to deploy your application. To do so, add a Git remote that points to the Dokku location:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #B392F0">git</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">remote</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">add</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">dokku</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">dokku@app.example.com:appname</span></span></code></pre>\n<p>Then, you can deploy by pushing the code to Dokku:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #B392F0">git</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">push</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">dokku</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">master</span></span></code></pre>\n<p>Dokku expects the primary branch to be <code>master</code>, so if your primary branch is <code>main</code>, then use this command:</p>\n<pre is:raw="" class="astro-code github-dark" style="background-color: #24292e; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color: #B392F0">git</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">push</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">dokku</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">main:master</span></span></code></pre>\n<p>Enjoy your newly deployed Dokku app!</p>","tags":["Dokku","Docker","Web Applications"],"date_published":"2021-02-25T00:00:00.000Z","date_updated":"2021-02-25T00:00:00.000Z"}]}