add electron template by lei9444 · Pull Request #22 · microsoft/WindowsAppSdkResources

lei9444 · 2026-01-28T02:37:26Z

No description provided.

Copilot

Pull request overview

Adds a new Electron + React + native WinRT addon project template to the repo, and tweaks the existing WinUI3 WebView2 template’s navigation behavior for Debug vs Release.

Changes:

Updates WinUI3 WebView2 shell to only honor WINSHELL_DEV_URL in Debug builds.
Introduces a full Electron project template (Electron main/preload/renderer) with IPC logging and a demo UI.
Adds sparse MSIX packaging assets/config plus a C++/WinRT N-API addon for Windows toast notifications.

Reviewed changes

Copilot reviewed 37 out of 58 changed files in this pull request and generated 12 comments.

Show a summary per file

File	Description
WindowsAppSDK-ProjectTemplates/webview2/winui3-shell-webview2-react/native/Winshell/MainWindow.xaml.cs	Debug-only dev URL routing for WebView2 navigation.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/winapp.yaml	winapp CLI package restore configuration for the template.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/tsconfig.web.json	Renderer TypeScript config for React/Vite.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/tsconfig.node.json	Main/preload TypeScript config.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/tsconfig.json	TS project references wiring.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/src/renderer/src/utils/logger.ts	Renderer→main IPC logger + global error forwarding.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/src/renderer/src/main.tsx	React entrypoint + ErrorBoundary wiring.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/src/renderer/src/env.d.ts	Vite client TS types.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/src/renderer/src/components/Versions.tsx	Renderer component exposing runtime versions.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/src/renderer/src/components/ErrorFallback.tsx	ErrorBoundary fallback UI.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/src/renderer/src/assets/wavy-lines.svg	Renderer UI asset.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/src/renderer/src/assets/main.css	Renderer UI styling.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/src/renderer/src/assets/electron.svg	Renderer UI asset.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/src/renderer/src/assets/base.css	Renderer base styling.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/src/renderer/src/App.tsx	Demo UI showing IPC + notification calls.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/src/renderer/index.html	Renderer HTML shell + CSP meta.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/src/renderer/AGENTS.md	Renderer-facing development notes.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/src/preload/index.ts	Preload contextBridge exposure for IPC/native API.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/src/preload/index.d.ts	Global typings for exposed preload APIs.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/src/preload/AGENTS.md	Preload development notes.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/src/main/index.ts	Electron main process boot + IPC + addon loading.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/src/main/AGENTS.md	Main process development notes.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/resources/icon.png	App icon resource.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/package.json	Template npm scripts + dependencies.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/eslint.config.mjs	ESLint configuration for TS/React.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/electron.vite.config.ts	electron-vite configuration with renderer alias/plugins.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/electron-builder.yml	Packaging configuration for electron-builder.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/build/entitlements.mac.plist	macOS entitlements for packaging.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/appxmanifest.xml	Sparse MSIX manifest for package identity.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/addon/binding.gyp	node-gyp build definition for the native addon.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/addon/addon.cc	C++/WinRT N-API implementation for toast notifications.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/addon/AGENTS.md	Native addon development notes.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/addon/build/config.gypi	node-gyp generated build metadata (checked in).
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/addon/build/binding.sln	node-gyp generated VS solution (checked in).
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/addon/build/addon.vcxproj	node-gyp generated VS project (checked in).
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/addon/build/addon.vcxproj.filters	node-gyp generated VS filters (checked in).
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/README.md	Template README.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/AGENTS.md	Template-wide development notes.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/.prettierrc.yaml	Prettier configuration.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/.prettierignore	Prettier ignore rules.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/.gitignore	Git ignore rules for template outputs.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/.editorconfig	EditorConfig defaults for the template.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/Assets/Wide310x150Logo.scale-200.png	MSIX asset.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/Assets/Wide310x150Logo.png	MSIX asset.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/Assets/StoreLogo.png	MSIX asset.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/Assets/Square44x44Logo.targetsize-24_altform-unplated.png	MSIX asset.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/Assets/Square44x44Logo.scale-200.png	MSIX asset.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/Assets/Square44x44Logo.png	MSIX asset.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/Assets/Square150x150Logo.scale-200.png	MSIX asset.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/Assets/Square150x150Logo.png	MSIX asset.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/Assets/SplashScreen.scale-200.png	MSIX asset.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/Assets/SplashScreen.png	MSIX asset.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/Assets/LockScreenLogo.scale-200.png	MSIX asset.
WindowsAppSDK-ProjectTemplates/electron/electron-win-app/Assets/LockScreenLogo.png	MSIX asset.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-28T03:11:27Z

WindowsAppSDK-ProjectTemplates/electron/electron-win-app/src/renderer/index.html

+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
+    />


This CSP will block Vite HMR because it doesn't allow WebSocket connections (connect-src will fall back to default-src 'self', which won’t match ws://). Consider adding an explicit connect-src for ws:/wss: during dev, or conditionally omitting/relaxing the CSP in development builds.

Copilot · 2026-01-28T03:11:27Z

WindowsAppSDK-ProjectTemplates/electron/electron-win-app/package.json

+    "dev": "electron-vite dev",
+    "build": "npm run typecheck && electron-vite build",
+    "build-all": "npm run build-addon && npm run build",
+    "postinstall": "electron-builder install-app-deps && winapp restore && winapp cert generate --if-exists skip && npm run build-addon && npm run setup-debug",


The postinstall script runs winapp restore/cert generation and registers debug package identity. This has significant side effects (downloads large SDK payloads, writes certificates, modifies machine state) and can break CI/non-Windows installs. Consider moving these steps to an explicit setup script (or gating by platform/CI) rather than running on every npm install.

WindowsAppSDK-ProjectTemplates/electron/electron-win-app/README.md

Copilot · 2026-01-28T03:11:28Z

WindowsAppSDK-ProjectTemplates/electron/electron-win-app/addon/build/config.gypi

+    "nodedir": "C:\\Users\\leilzh\\AppData\\Local\\node-gyp\\Cache\\24.11.1",
+    "python": "C:\\Users\\leilzh\\AppData\\Local\\Programs\\Python\\Python313\\python.exe",
+    "standalone_static_library": 1,
+    "msbuild_path": "C:\\Program Files\\Microsoft Visual Studio\\18\\Insiders\\MSBuild\\Current\\Bin\\MSBuild.exe",
+    "user_agent": "npm/11.6.2 node/v24.11.1 win32 x64 workspaces/false",
+    "userconfig": "C:\\Users\\leilzh\\.npmrc",
+    "prefix": "C:\\Users\\leilzh\\AppData\\Roaming\\npm",
+    "npm_version": "11.6.2",
+    "node_gyp": "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js",
+    "local_prefix": "D:\\work\\WindowsAppSdkResources\\WindowsAppSDK-ProjectTemplates\\electron\\electron-win-app",
+    "init_module": "C:\\Users\\leilzh\\.npm-init.js",
+    "global_prefix": "C:\\Users\\leilzh\\AppData\\Roaming\\npm",
+    "globalconfig": "C:\\Users\\leilzh\\AppData\\Roaming\\npm\\etc\\npmrc",
+    "cache": "C:\\Users\\leilzh\\AppData\\Local\\npm-cache"


The template commits node-gyp generated build metadata containing machine-specific absolute paths/usernames (e.g., C:\Users\... and D:\work\...). These files are not portable and leak local environment details; remove addon/build from the template and add it to .gitignore (build outputs should be generated on demand).

Suggested change

"nodedir": "C:\\Users\\leilzh\\AppData\\Local\\node-gyp\\Cache\\24.11.1",

"python": "C:\\Users\\leilzh\\AppData\\Local\\Programs\\Python\\Python313\\python.exe",

"standalone_static_library": 1,

"msbuild_path": "C:\\Program Files\\Microsoft Visual Studio\\18\\Insiders\\MSBuild\\Current\\Bin\\MSBuild.exe",

"user_agent": "npm/11.6.2 node/v24.11.1 win32 x64 workspaces/false",

"userconfig": "C:\\Users\\leilzh\\.npmrc",

"prefix": "C:\\Users\\leilzh\\AppData\\Roaming\\npm",

"npm_version": "11.6.2",

"node_gyp": "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js",

"local_prefix": "D:\\work\\WindowsAppSdkResources\\WindowsAppSDK-ProjectTemplates\\electron\\electron-win-app",

"init_module": "C:\\Users\\leilzh\\.npm-init.js",

"global_prefix": "C:\\Users\\leilzh\\AppData\\Roaming\\npm",

"globalconfig": "C:\\Users\\leilzh\\AppData\\Roaming\\npm\\etc\\npmrc",

"cache": "C:\\Users\\leilzh\\AppData\\Local\\npm-cache"

"nodedir": "",

"python": "",

"standalone_static_library": 1,

"msbuild_path": "",

"user_agent": "",

"userconfig": "",

"prefix": "",

"npm_version": "11.6.2",

"node_gyp": "",

"local_prefix": "",

"init_module": "",

"global_prefix": "",

"globalconfig": "",

"cache": ""

WindowsAppSDK-ProjectTemplates/electron/electron-win-app/addon/build/addon.vcxproj

Copilot · 2026-01-28T03:11:29Z

WindowsAppSDK-ProjectTemplates/electron/electron-win-app/addon/addon.cc

+        // Define notification XML
+        std::wstring xml = L"<toast><visual><binding template='ToastGeneric'><text>";
+        xml += std::wstring(title.begin(), title.end());
+        xml += L"</text><text>";
+        xml += std::wstring(message.begin(), message.end());
+        xml += L"</text></binding></visual></toast>";


Converting the UTF-8 JS strings to std::wstring via std::wstring(title.begin(), title.end()) will corrupt non-ASCII characters, and unescaped user text can break the toast XML (e.g., '&', '<'). Use a proper UTF-8→UTF-16 conversion and XML-escape or create text nodes via XmlDocument APIs.

Copilot · 2026-01-28T03:11:29Z

WindowsAppSDK-ProjectTemplates/electron/electron-win-app/src/main/index.ts

+    webPreferences: {
+      preload: join(__dirname, '../preload/index.js'),
+      sandbox: false
+    }


The BrowserWindow explicitly disables the Electron renderer sandbox. For a template, this is a risky default; consider enabling sandbox (and explicitly setting contextIsolation/nodeIntegration) unless there's a demonstrated need to disable it.

Copilot · 2026-01-28T03:11:29Z

WindowsAppSDK-ProjectTemplates/electron/electron-win-app/src/main/index.ts

+  mainWindow.webContents.setWindowOpenHandler((details) => {
+    shell.openExternal(details.url)
+    return { action: 'deny' }
+  })


shell.openExternal(details.url) is called for any window.open() URL. This should validate/allowlist schemes (e.g., only http/https) to avoid opening file:, shell:, ms-settings:, etc. from renderer-controlled input.

Copilot · 2026-01-28T03:11:30Z

WindowsAppSDK-ProjectTemplates/electron/electron-win-app/electron-builder.yml

+files:
+  - '!**/.vscode/*'
+  - '!src/*'
+  - '!electron.vite.config.{js,ts,mjs,cjs}'
+  - '!{.eslintcache,eslint.config.mjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
+  - '!{.env,.env.*,.npmrc,pnpm-lock.yaml}'
+  - '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}'
+asarUnpack:
+  - resources/**


electron-builder config currently only unpacks resources/. Native addons (*.node) typically cannot be loaded from inside app.asar, and build-time directories like .winapp/ (SDK downloads) can be accidentally packaged, bloating the installer. Update files/asarUnpack patterns to (1) exclude .winapp/ and other build-only directories and (2) unpack the native addon (e.g., /*.node or addon/).

WindowsAppSDK-ProjectTemplates/electron/electron-win-app/.gitignore

add electron template

2ef51f5

yeelam-gordon requested a review from Copilot January 28, 2026 03:01

Copilot started reviewing on behalf of yeelam-gordon January 28, 2026 03:01 View session

Copilot AI reviewed Jan 28, 2026

View reviewed changes

lei9444 added 3 commits January 28, 2026 11:44

update ignore

83d3c80

update agentes

23bf60e

update UI

1003be7

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

add electron template#22

add electron template#22
lei9444 wants to merge 4 commits intomainfrom
leilzh/addelectron

lei9444 commented Jan 28, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 28, 2026

Uh oh!

Copilot AI Jan 28, 2026

Uh oh!

Uh oh!

Copilot AI Jan 28, 2026

Uh oh!

Uh oh!

Copilot AI Jan 28, 2026

Uh oh!

Copilot AI Jan 28, 2026

Uh oh!

Copilot AI Jan 28, 2026

Uh oh!

Copilot AI Jan 28, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Comments

Conversation

lei9444 commented Jan 28, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant