GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2026-03-21 21:45:42 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity
dec3e85fe2
quartz/content/01-Sessions/Session 8 - Packaging & Distribution.md
Mohammad Jarrar dec3e85fe2 ll
2026-03-15 07:36:20 +03:00

2.6 KiB
Raw Blame History

tags session duration status
electron
packaging
electron-builder
distribution
8 2 hours ready

Session 8 — Packaging, Distribution & Wrap-up

🎯 Objectives

  • Package the app into a native installer
  • Create .exe (Windows), .dmg (Mac), .AppImage (Linux)
  • Understand what comes after (updates, crash reporting)
  • Demo day — run each other's packaged apps

🧠 Concepts Covered

electron-builder

npm install --save-dev electron-builder

Add to package.json:

{
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "build": {
    "appId": "com.yourname.lanchat",
    "productName": "LAN Chat",
    "directories": {
      "output": "dist"
    },
    "win": {
      "target": "nsis"
    },
    "mac": {
      "target": "dmg"
    },
    "linux": {
      "target": "AppImage"
    }
  }
}

Then run:

npm run build

Output appears in /dist folder.

App Icons

  • Create a 512x512 .png icon
  • Save as build/icon.png (electron-builder picks it up automatically)
  • Tools: icon.kitchen or Figma

What's Inside the Package?

dist/
├── win-unpacked/          ← the app folder
├── LAN Chat Setup.exe     ← installer
└── builder-effective-config.yaml

🧠 What's Next After This Course?

Electron Alternatives

Tool Language Why Use It
Tauri Rust + Web Much smaller bundle size
NW.js Web Older, similar to Electron
Flutter Dart Cross-platform inc. mobile

Electron Features to Explore

  • Auto-updater — push updates silently to users
  • Tray icon — app lives in system tray
  • Notifications — native OS notifications
  • Deep links — open app from a URL
  • Crash reporter — collect error reports

🛠 Demo Day (60 min)

Each student / pair:

  1. Runs npm run build
  2. Shares the installer via USB or local network share
  3. Another student installs it on a fresh machine
  4. Everyone's chat app connects to one room

Presentation (2 min each):

  • What feature are you most proud of?
  • What was the hardest bug you fixed?
  • What would you add with more time?

✅ Course Wrap-up Checklist

  • All students have a working packaged app
  • Share the vault / notes repo with students
  • Collect feedback form
  • Share "what to learn next" resources

📦 Final Resources