Solving debugging pain points for custom URL protocols in local macOS development

README.md

Before enabling Electron, use process.env.ELECTRON_OVERRIDE_DIST_PATH to redirect to a custom Electron app.

e.g. vite.config.ts

export default defineConfig(env => {
  process.env.ELECTRON_OVERRIDE_DIST_PATH = path.join(__dirname, ".electron-dist");

  // ...
});

download-local-electron.mjs

// scripts/download-local-electron.mjs

import { downloadArtifact } from "@electron/get";
import extract from "extract-zip";
import { readFile, rm, writeFile } from "node:fs/promises";
import path from "node:path";
import { fileURLToPath } from "node:url";
import plist from "plist";

import json from "../package.json" with { type: "json" };

const __dirname = path.dirname(fileURLToPath(import.meta.url));
const electronDistPath = path.join(__dirname, "..", ".electron-dist");
const electronVersion = json.devDependencies.electron;
const projectName = json.name;
const urlSchema = "app-test";

await rm(electronDistPath, { recursive: true, force: true });

const electronZIP = await downloadArtifact({
  version: electronVersion,
  artifactName: "electron",
  platform: process.platform,
  arch: process.arch,
});

await extract(electronZIP, {
  dir: electronDistPath,
});

if (process.platform === "darwin") {
  await modifyPlist();
}

async function modifyPlist() {
  const plistPath = path.join(electronDistPath, "Electron.app", "Contents", "Info.plist");
  const plistContent = await readFile(plistPath, "utf-8");

  const infoPlist = plist.parse(plistContent.toString("utf8"));

  infoPlist["CFBundleDisplayName"] = `${projectName} Local`;
  infoPlist["CFBundleIdentifier"] = `com.local.${projectName}`;
  infoPlist["CFBundleName"] = `${projectName} Local`;
  infoPlist["CFBundleURLTypes"] = [
    {
      CFBundleTypeRole: "Viewer",
      CFBundleURLName: "`${projectName} Local`,
      CFBundleURLSchemes: [urlSchema],
    },
  ];

  const modifiedPlistContent = plist.build(infoPlist);
  await writeFile(plistPath, modifiedPlistContent, "utf-8");
}