🎉Build a Cross-Platform Desktop App with Electron (Mac, Linux, Windows)
Here’s a detailed tutorial on how to create a cross-platform desktop app using Electron, starting on macOS and building for macOS, Linux, and Windows. This guide is beginner-friendly and walks you through every step, from setting up your project to packaging it for different operating systems.
Build a Cross-Platform Desktop App with Electron (Mac, Linux, Windows)
Creating a desktop app that works on macOS, Linux, and Windows can seem complex, but Electron makes it incredibly simple. In this tutorial, we’ll build a Sum Calculator App using Electron and package it for all major operating systems while developing on a Mac.
🚀1. Install Node.js and npm
Before we begin, you need to have Node.js and npm installed.
If you don’t have it yet, install it via Homebrew:
brew install nodeTo confirm the installation, run:
node -v
npm -vYou should see version numbers if everything is installed correctly.
📂 2. Create a New Electron Project
Run the following commands to set up your project:
mkdir sum-app
cd sum-app
npm init -yThen, install Electron:
npm install electron --save-dev🔧3. Install TypeScript and Configure It
Install TypeScript and Electron types:
npm install typescript ts-node @types/node @types/electron --save-devCreate a tsconfig.json file:
{
"compilerOptions": {
"target": "ESNext",
"module": "CommonJS",
"strict": true,
"outDir": "dist",
"rootDir": "src"
}
}📝4. Create the Electron App Files
Create a src/ folder and add two files:
src/main.ts→ Electron’s main processsrc/index.html→ The UI
📌 Create src/main.ts
import { app, BrowserWindow } from "electron";
let mainWindow: BrowserWindow | null;
app.whenReady().then(() => {
mainWindow = new BrowserWindow({
width: 400,
height: 300,
webPreferences: {
nodeIntegration: true
}
});
mainWindow.loadFile("src/index.html");
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
});📌 Create src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sum App</title>
</head>
<body>
<h1>Sum Two Numbers</h1>
<input type="number" id="num1" placeholder="Enter first number">
<input type="number" id="num2" placeholder="Enter second number">
<button onclick="calculateSum()">Calculate</button>
<h2 id="result">Result: </h2>
<script>
function calculateSum() {
let num1 = parseInt(document.getElementById("num1").value) || 0;
let num2 = parseInt(document.getElementById("num2").value) || 0;
document.getElementById("result").innerText = "Result: " + (num1 + num2);
}
</script>
</body>
</html>⚡5. Update package.json
Modify package.json to use TypeScript:
"main": "dist/main.js",
"scripts": {
"start": "ts-node src/main.ts",
"build": "tsc",
"package-mac": "electron-packager . SumApp --platform=darwin --arch=x64 --overwrite",
"package-linux": "electron-packager . SumApp --platform=linux --arch=x64 --overwrite",
"package-win": "electron-packager . SumApp --platform=win32 --arch=x64 --overwrite"
},🚀6. Run the App on Mac
npm startYou should see a window with input fields and a Calculate button.
📦7. Package the App for macOS
npm run build
npx electron-packager . SumApp --platform=darwin --arch=x64 --overwriteYour macOS app will be in SumApp-darwin-x64.
🐧8. Package the App for Linux
npm run build
npx electron-packager . SumApp --platform=linux --arch=x64 --overwriteFor a .deb installer:
npm install --save-dev electron-installer-debian
npx electron-installer-debian --src SumApp-linux-x64/ --dest dist/ --arch amd64🖥9. Package the App for Windows
Install Wine:
brew install --cask wine-stableThen, run:
npm run build
npx electron-packager . SumApp --platform=win32 --arch=x64 --overwriteThis creates SumApp-win32-x64 with SumApp.exe.
🎁10. Create Installers (Optional)
Mac .dmg File:
npm install --save-dev electron-installer-dmg
npx electron-installer-dmg SumApp-darwin-x64/SumApp.app SumAppWindows .exe Installer:
npm install electron-winstaller --save-dev
npx electron-winstaller --src SumApp-win32-x64/ --dest dist/Linux .AppImage:
npm install --save-dev electron-builder
npx electron-builder --linux AppImage🎉 Final Thoughts
You’ve successfully built a cross-platform Electron app with TypeScript that runs on macOS, Linux, and Windows!
