Sv Cap Elec

Boilerplate for a single codebase that targets web, desktop (Electron), and mobile (Capacitor iOS/Android). Includes packaging, signing hooks, and update setup for Electron.

Create a project with this template with npx sv-cap-elec. Answer the questions to automatically fill in your app details.

Requirements

• Node.js 18+
• Xcode (for iOS builds)
• Android Studio + SDK (for Android builds)

Install

npm i

Initialize Capacitor platforms:

npx cap add ios && npx cap add android

Configure

Update the build.publish and build.mac.category fields in package.json. You should also add author and description.

Add your app icon background to assets/icon-background.png, foreground to assets/icon-foreground.png, and complete icon (used by Electron and Capacitor) to assets/icon-only.png, then run npm run assets to generate icons for your Capacitor app. Original images should ideally be 1024x1024. More info: https://capacitorjs.com/docs/guides/splash-screens-and-icons.

Commands

Web:

npm run dev:web
npm run build:web
npm run preview:web

Desktop:

npm run dev:desktop # open a development version of your app (on macOS, this might not include your app name/icon)
npm run build:desktop

Mobile:

npm run build:mobile
npm run dev:ios
npm run open:ios # open in Xcode
npm run dev:android
npm run open:android # open in Android Studio

Packaging and signing

Electron

Packaging is handled by electron-builder via npm run build:desktop and outputs to dist/.

Signing:

• macOS: set APPLE_ID, APPLE_APP_SPECIFIC_PASSWORD, and CSC_LINK / CSC_KEY_PASSWORD for code signing and notarization.
• Windows: set CSC_LINK / CSC_KEY_PASSWORD or WIN_CSC_LINK / WIN_CSC_KEY_PASSWORD for code signing.

Update configuration is defined in package.json under build.publish. Replace the placeholder URL with your update server.

iOS / Android

Capacitor generates native projects in ios/ and android/. Open these with Xcode or Android Studio to configure signing and run device builds.

Notes

• SvelteKit builds to build/ for both Electron and Capacitor.
• The Electron app loads a dev server when VITE_DEV_SERVER_URL is set.
• The sample app is a simple counter in src/routes/+page.svelte.