In one terminal:

nuxt dev

Another terminal:

hookdeck listen 3000 {source}

The downside of this is that when port 3000 is occupied, Nuxt will fall back to 3001, 3002, and so on, using different ports. This can easily confuse engineers who need to frequently switch environments about which Hookdeck tunnel they are currently using.

Solutions 1: Use “concurrently”

NPM has a package called concurrently that allows us to run nuxt dev and hookdeck in parallel with a single command. When you stop the process, both threads will terminate at the same time, preventing confusion with multiple terminals.

Installation:

npm install concurrently

Change the dev command (if using Vite, use vite dev)

  "scripts": {
    ...
-    "dev": "nuxt dev",
+    "dev": "concurrently --names hook,nuxt 'hookdeck listen 3000 xxx' 'nuxt dev'",

Run:

npm run dev

This way, you can run two processes in parallel.

[hook] Dashboard
[hook] 👉 Inspect and replay events: https://dashboard.hookdeck.com?team_id=xxxxxxxxxxxx
[hook] 
[hook] Sources
[hook] 🔌 xxx URL: https://hkdk.events/xxxxxxxxxxxx
[hook] 
[hook] Connections
[hook] xxx -> xxx forwarding to /api/.../
[hook] 
[hook] Getting ready...
[nuxt] [nuxi] Nuxt 3.20.1 (with Nitro 2.12.9, Vite 7.2.2 and Vue 3.5.24)
[nuxt] 
[nuxt]   ➜ Local:    http://localhost:3000/
[nuxt]   ➜ Network:  use --host to expose
[nuxt] 
[nuxt]   ➜ DevTools: press Shift + Option + D in the browser (v3.1.0)

However, the downside of this approach is that we still can't make Hookdeck automatically detect the Nuxt dev server's port. We can only use port 3000 by default. A compromise is to specify the port each time we run it, so we tried modifying the command.

"dev": "concurrently --names hook,nuxt 'hookdeck listen ${PORT:-3000} rankwing' 'nuxt dev --port ${PORT:-3000}'"

Then you can customize the port when running.

# Use default 3000 port
npm run dev

# Use 3001 port
PORT=3001 npm run dev

Solutions 2: Custom Vite Plugin

The main drawback of the above solution is that it still can't automatically detect the Nuxt/Vite port. We tried using a Vite plugin to automatically use the current port when the Nuxt/Vite dev server starts.

What this plugin does is quite simple. It checks if there is a hookdeck.xxxx.pid stored in a certain tmp directory. If there is a pid, then no matter how many times the Nuxt dev server restarts, it won't repeatedly create a hookdeck process, preventing memory leaks or Zombie processes.

Note that this hookdeck.xxxx.pid must be stored in a tmp directory. If you are using a simple Vite project, please create a tmp directory to store it.

// plugins/hookdeck.ts
import { spawn } from 'node:child_process';
import fs from 'node:fs';
import { type Plugin } from 'vite';

export interface HookdeckOptions {
  hookdeckBinary?: string;
  source?: string;
  port?: number;
  pidFile?: string;
  urlMap?: Record<string, string>;
  enabled?: boolean;
}

export default function hookdeck(options: HookdeckOptions = {}): Plugin {
  return {
    name: 'hookdeck-concurrently',
    async configureServer(server) {
      const enabled = options.enabled ?? process.env.NUXT_HOOKDECK_ENABLED === '1';

      if (!enabled) {
        return;
      }

      const port = (server.httpServer?.address() as any)?.port ?? options.port ?? 3000;
      // NOTE: In vite, you must create a tmp folder and exclude it by .gitignore
      const pidFile = options.pidFile ?? `./.nuxt/hookdeck.${port}.pid`;
      const source = options.source || '';
      const hookdeckBinary = options.hookdeckBinary || 'hookdeck';

      if (!source) {
        console.warn('[vite hookdeck] No source provided, skipping hookdeck setup.');
        return;
      }

      if (fs.existsSync(pidFile)) {
        const oldPid = fs.readFileSync(pidFile, { encoding: 'utf-8' });

        try {
          process.kill(Number(oldPid), 0);
          console.log(`[vite hookdeck] Hookdeck is already running with PID: ${oldPid}`);
          return;
        } catch (e) {
          console.log(`[vite hookdeck] Old hookdeck process not found, starting a new one...`);
        }
      }

      console.log(`[vite hookdeck] Starting hookdeck on port ${port}`)

      const child = spawn(hookdeckBinary, ['listen', String(port), source], {
        shell: true, // Windows must add this
      });

      child.stdout.on('data', function (data) {
        console.log(data.toString().trim());
        const urlMap = options.urlMap;
        const matchProxy = data.toString().match(/URL: https:\/\/(hkdk\.events\/([a-zA-Z0-9]+))/);
        const matchDest = data.toString().match(/forwarding to ([a-zA-Z0-9_\-\/\:]+)/);

        if (urlMap && matchProxy && matchDest) {
          const url = matchProxy[1];
          const path = matchDest[1];
          const data: Record<string, string>[] = [];

          for (const [key, value] of Object.entries(urlMap)) {
            const endpoint = 'https://' + `${url}/${value}`.replace(/\/\//g, '/');
            const dest = 'http://' + `localhost:${port}${path}/${value}`.replace(/\/\//g, '/');

            // console.log(`  [${key}] ${endpoint} => ${dest}`);
            data.push({
              Name: key,
              Hook: endpoint,
              Dest: dest
            });
          }

          console.log('');
          console.log('HOOKDECK URL MAPPING:');
          console.table(data);
        }
      });

      fs.writeFileSync(pidFile, child.pid?.toString() || '', { encoding: 'utf-8' });

      child.on('error', (err) => {
        console.error('[vite hookdeck error]', err)
      })

      let exit = () => {
        console.log('[vite hookdeck] Shutting down hookdeck...')
        child?.kill('SIGTERM')
        fs.unlinkSync(pidFile);
      };

      server.httpServer?.on('close', exit);

      process.on('SIGINT', exit);
      process.on('SIGTERM', exit);
      process.on('exit', exit);
    }
  }
};

Register in nuxt.config.ts :

  vite: {
    plugins: [
      hookdeck({
        source: import.meta.env.NUXT_HOOKDECK_SOURCE || '{your hookdeck source}',
        urlMap: {
          Clerk: 'hook/clerk',
          Paddle: 'hook/paddle',
        },
        enabled: import.meta.env.NUXT_HOOKDECK_ENABLED === '1',
      }),
    ],

Register in vite.config.ts

    plugins: [
      hookdeck({
        source: import.meta.env.NUXT_HOOKDECK_SOURCE || '{your hookdeck source}',
        urlMap: {
          Clerk: 'hook/clerk',
          Paddle: 'hook/paddle',
        },
        enabled: import.meta.env.NUXT_HOOKDECK_ENABLED === '1',
      }),
    ],

When we start the dev server, we will see the following screen:

Connections
xxx -> xxx forwarding to /api/
                                                                                                                                                                                            4:07:08 PM
HOOKDECK URL MAPPING:                                                                                                                                                                       4:07:08 PM
┌─────────┬──────────┬──────────────────────────────────────────────────┬─────────────────────────────────────────────────┐                                                                 4:07:08 PM
│ (index) │ Name     │ Hook                                             │ Dest                                            │
├─────────┼──────────┼──────────────────────────────────────────────────┼─────────────────────────────────────────────────┤
│ 0       │ 'Clerk'  │ 'https://hkdk.events/xxxxxxxxxxxx/hook/clerk'  │ 'http://localhost:3000/api/hook/clerk'  │
│ 1       │ 'Paddle' │ 'https://hkdk.events/xxxxxxxxxxxx/hook/paddle' │ 'http://localhost:3000/api/hook/paddle' │
└─────────┴──────────┴──────────────────────────────────────────────────┴─────────────────────────────────────────────────┘
✔ Nuxt Nitro server built in 614ms                                                                                                                                                   nitro 4:07:08 PM
ℹ Vite server warmed up in 1ms                                                                                                                                                             4:07:08 PM
ℹ Vite client warmed up in 1ms

Since Nuxt restarts the Vite server repeatedly, this hookdeck will not be created multiple times; it will only be created once during runtime. Additionally, when you terminate the process using Ctrl + C, it will also be closed, preventing any memory leaks.

I put the plugin to Gist: https://gist.github.com/asika32764/1dc7fa9acb4dac6e31770b3e393ca972

Maybe I’ll convert it to NPM package after more projects tests.

sudo apt install mysql-client-core-8.0

Back yo Windows, run:

mysql -u root -p

Enter this command to enable root account for any host:

> CREATE USER 'root'@'%' IDENTIFIED BY 'root'; GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' WITH GRANT OPTION;
> FLUSH PRIVILEGES;
> exit;

Next, on Wsl2, run:

mysql -u root -p -h "$(hostname).local"

This should works.

If still shows:

ERROR 2003 (HY000): Can't connect to MySQL server on xxx

Try install libnss-mdns

sudo apt install libnss-mdns

Now you may want to enter the hostname to .env file, just type:

echo $(hostname).local

And copy the result to your .env file.

const el = document.querySelector('.foo');

el.innerHTML = `<div>FOO</div>`;

But in PHP, although there has a DOM Document implementation, it is only supports HTML4 and not up-to-date with W3C standards for a long time, the innerHTML still not work on PHP DOMDocument extension, so we must use another way to insert custom HTML.

Using Symfony DomCrawler for HTML5

The Symfony DomCrawler Component is a useful package to help us parsing and filtering DOM, and there is a masterminds/html5 package can work with DomCrawler to allow it correctly handle HTML5.

We can install both of them:

composer require symfony/dom-crawler masterminds/html5 symfony/css-selector

Parse HTML

Now we can parse a HTML string to DOMDocument:

use Symfony\Component\DomCrawler\Crawler;

// Some HTML5 string, maybe is an article content, or get by HTTPClient
$html = '...';

// Parse it, you must add `useHtml5Parser: true` 
// to use masterminds/html5 as the parser
$crawler = new Crawler($html, useHtml5Parser: true);

// Filter what you want by CSS selector
$cards = $crawler->filter('.card');

foreach ($cards as $card) {
    // @var $card DOMElement
}

Insert or Replace HTML

Now if you want to insert a simple HTML, you can just use createElement()

$body = $crawler->ownerDocument->createElement('div');
$body->setAttribute('class', 'card-body');
$body->setAttribute('style', '...');

// Append child
$card->appendChild($body);

// Or insertBefore
$card->firstChild->insertBefore($body);

// Or replace
$card->firstChild->replaceWith($body);

Insert from Another DOM

And if you want to insert a HTML string, you must parse it into DOMElement first, here we use Masterminds\HTML5 to parse it:

use Masterminds\HTML5;

$childHTML = '<div class="card-body">...</div>';

$html5 = new HTML5();
$dom = $html5->loadHTML($childHTML);

// Get the node
$node = $dom->documentElement->firstElementChild;

If you directly insert this node:

$card->appendChild($node);

you will receive an error message:

Fatal error: Uncaught exception 'DOMException' with message 'Wrong Document Error'

That because in the DOM standards, every DOM nodes and elements are belongs to only 1 DOMDocument, if you want to insert a DOM node into another Document, you must import them first.

// Now we get the ownerDocument of $card and import nodes
// Remember add the second argument TRUE to deeply import.
$root = $card->ownerDocument->importNode($dom->documentElement, true);

The returned $root is a clone of original DOM node, we can insert it to new DOM:

$card->appendChild($root->firstElementChild);

Save back to HTML

In the current Symfony Crawler version, save as HTML can be very convenience, just use:

$crawler->html();

Note, if you get the child crawler instance, it may print partial of the HTML:

$cards->html();

To finding the cause, I found the matched Decoder class, and print the Imagick real error message:

class FilePathImageDecoder extends NativeObjectDecoder
{
    public function decode(mixed $input): ImageInterface|ColorInterface
    {
        // ...
        try {
            $imagick = new Imagick();
            $imagick->readImage($input);
        } catch (ImagickException $e) {
            var_dump($e->getMessage()); // <-- print here
            throw new DecoderException('Unable to decode input');
        }

        // ...

And the message shows: width or height exceeds limit

Now I noticed that this is a limit from Imagick config, there is the solution that we can change this limit.

I'm using Ubuntu server, the Imagik config file is located at /etc/ImageMagick-6/, if you are using other platform, you must find the Imagick config position. Now, open /etc/ImageMagick-6/policy.xml and look at about line 62 and 63, this is the origin settings, the max width and height is 16000px.

...
  <policy domain="resource" name="width" value="16KP"/>
  <policy domain="resource" name="height" value="16KP"/>
...

In my case, the image I upload is 25000px height, I change the value to:

...
  <policy domain="resource" name="width" value="32KP"/>
  <policy domain="resource" name="height" value="32KP"/>
...

Save and leave this file, then remember to restart Apache:

# Ubuntu
service apahe2 restart

Now handling of the large image file is works.

This post described how to notarize a macOS app by CLI, you must build and sign you app first.

About how to sign Mac App, please see:

• https://www.electronjs.org/docs/latest/tutorial/code-signing

• https://nocommandline.com/blog/how-to-sign-an-electron-app-on-mac-with-electron-builder/

Generate App Specific Password

Then, you must register an app specific password, in this case, we store it into KeyChain, run:

xcrun altool --store-password-in-keychain-item "AC_PASSWORD" \
  -u "$your_applie_id" \
  -p "$your_app_password"

Note, the AC_PASSWORD is the title of record in KeyChain, the $your_applie_id is your Apple ID Email, and $your_app_password should be the app specific password you have generated.

If you don't want to store it to KeyChain, you may replace all AC_PASSWORD as your password plain text when you run commands.

Get Team ID

Run this command:

xcrun altool --list-providers -u "$your_apple_id" -p "@keychain:AC_PASSWORD"

You will see a team list, the column: ProviderShortName is your Team ID.

Notarized App

After you build your Mac App (also, you must sign it with Developer ID Application), let's notarize it by CLI.

Run this command:

xcrun notarytool submit your-app.dmg --wait --apple-id "$your_apple_id" \
  --password "@keychain:AC_PASSWORD" \
  --team-id "$your_apple_team_id";

This will take a while, and shows a process, please wait for it. After process finished, run the following command:

xcrun stapler staple your-app.dmg

Now, you app has been notarized, you can distribute your app to the web and let users download it.

For Electron Builder

If you are using electron-builder , you can make this action automatic. Just install the package: electron-builder-notarize

npm i electron-builder-notarize --save-dev
# OR
yarn add electron-builder-notarize --dev

And add this config to electron-builder.config.json

{
  ...
  "mac": {
    ...
    // Add below 2 lines
    "hardenedRuntime": true ,
    "entitlements" : "./node_modules/electron-builder-notarize/entitlements.mac.inherit.plist"
  },
  "afterSign" : "electron-builder-notarize" // <-- Add this line
  ...
}

And you must add an .env file (remember to ignore from git):

APPLE_ID=...
APPLE_ID_PASSWORD=...
APPLE_TEAM_ID=...

Now, when you pack electron app by electron-builder, it will auto notarize your app everytime.