Introduce desktop application using Electron (#403)

* Add Electron app setup and release workflow

* Improve error handling in Electron window creation

* Update package.json to set module type and adjust versioning

* remove property httpHeaders in loadURL

* Add environment configuration for development and production URLs

* Rename native directory to desktop and update related configurations

* Refactor configuration files for improved clarity and organization

* Add desktop configuration and update environment variables

* Fix setup default value for serviceUrl

* Remove development and production environment variable files for desktop configuration

* Add Improve error handling in main application window creation

* Fix pnpm install command to use frozen lockfile

* Update pnpm-lock.yaml

* Update version to 0.1.25 in desktop package.json

* Refactor clean up tsconfig.json formatting

.github/workflows/desktop-release.yml

@@ -0,0 +1,49 @@
+name: desktop-release
+on:
+  release:
+    types: [published]
+
+jobs:
+  release:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [macos-latest, ubuntu-latest, windows-latest]
+        node-version: [18.x]
+
+    defaults:
+      run:
+        working-directory: ./desktop
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v4
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Set up pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Install Dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build and publish
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          pnpm run release
+
+      - name: Upload Release Assets
+        uses: softprops/action-gh-release@v1
+        with:
+          files: |
+            ./release/**/*.exe
+            ./release/**/*.dmg
+            ./release/**/*.AppImage
+            ./release/**/*.yml
+            ./release/latest*.yml
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -44,3 +44,5 @@ dist-ssr/
 # Tests
 coverage/
 .nyc_output/
+
+release/

desktop/.prettierrc

@@ -0,0 +1,9 @@
+{
+	"semi": true,
+	"tabWidth": 4,
+	"useTabs": true,
+	"printWidth": 100,
+	"singleQuote": false,
+	"trailingComma": "es5",
+	"bracketSpacing": true
+}

desktop/eslint.config.mjs

@@ -0,0 +1,28 @@
+import typescriptPlugin from "@typescript-eslint/eslint-plugin";
+import typescriptParser from "@typescript-eslint/parser";
+import prettierPlugin from "eslint-plugin-prettier";
+
+export default [
+	{
+		files: ["src/**/*.ts"],
+		ignores: ["dist", "eslint.config.mjs"],
+		languageOptions: {
+			parser: typescriptParser,
+			parserOptions: {
+				project: "./tsconfig.json",
+			},
+		},
+		plugins: {
+			"@typescript-eslint": typescriptPlugin,
+			prettier: prettierPlugin,
+		},
+		rules: {
+			...typescriptPlugin.configs.recommended.rules,
+			...prettierPlugin.configs.recommended.rules,
+			"@typescript-eslint/interface-name-prefix": "off",
+			"@typescript-eslint/explicit-function-return-type": "off",
+			"@typescript-eslint/explicit-module-boundary-types": "off",
+			"@typescript-eslint/no-explicit-any": "error",
+		},
+	},
+];

desktop/package.json

@@ -0,0 +1,66 @@
+{
+	"name": "@codepair/desktop",
+	"type": "module",
+	"version": "0.1.25",
+	"main": "dist/main.js",
+	"description": "Codepair Desktop",
+	"author": "yorkie-team",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/yorkie-team/codepair"
+	},
+	"license": "Apache-2.0",
+	"scripts": {
+		"start": "pnpm run build-ts && cross-env NODE_ENV=production electron .",
+		"start:dev": "pnpm run build-ts && cross-env NODE_ENV=development electron .",
+		"build-ts": "tsc -p tsconfig.json",
+		"build-electron": "pnpm run build-ts && electron-builder",
+		"release": "pnpm run build-ts && electron-builder --publish always",
+		"lint": "eslint . --report-unused-disable-directives --max-warnings 0",
+		"format": "prettier . --write",
+		"format:check": "prettier . --check"
+	},
+	"devDependencies": {
+		"@types/node": "^22.9.0",
+		"cross-env": "^7.0.3",
+		"electron": "^33.0.1",
+		"electron-builder": "^25.1.8"
+	},
+	"build": {
+		"publish": {
+			"provider": "github"
+		},
+		"appId": "com.yorkie-team.codepair",
+		"productName": "codepair",
+		"icon": "build/icon.png",
+		"files": [
+			"dist/**/*",
+			"node_modules/**/*",
+			"package.json",
+			"!node_modules/**/*.{ts,map}"
+		],
+		"directories": {
+			"output": "release"
+		},
+		"mac": {
+			"target": "dmg"
+		},
+		"win": {
+			"target": [
+				{
+					"target": "nsis",
+					"arch": [
+						"x64"
+					]
+				}
+			]
+		},
+		"nsis": {
+			"oneClick": false,
+			"allowToChangeInstallationDirectory": true
+		},
+		"linux": {
+			"target": "AppImage"
+		}
+	}
+}

desktop/src/main.ts

@@ -0,0 +1,41 @@
+import { app, BrowserWindow, dialog } from "electron";
+
+async function createWindow() {
+	try {
+		const win = new BrowserWindow({ maximizable: true });
+		win.maximize();
+		// In the future, migrate to a proper build tool and environment variable management.
+		const serviceUrl = "https://codepair.yorkie.dev";
+
+		await win.loadURL(serviceUrl);
+	} catch (error) {
+		if (error instanceof Error) {
+			console.error("Error creating the browser window:", error.message);
+
+			dialog.showErrorBox(
+				"Application Error",
+				`Failed to start application: ${error.message}\n\nThe application will now quit.`
+			);
+
+			app.quit();
+		}
+	}
+}
+
+app.whenReady().then(createWindow);
+
+// Quit when all windows are closed, except on macOS. There, it's common
+// for applications and their menu bar to stay active until the user quits
+// explicitly with Cmd + Q.
+app.on("window-all-closed", () => {
+	if (process.platform !== "darwin") {
+		app.quit();
+	}
+});
+
+// Open a window if none are open (macOS)
+app.on("activate", () => {
+	if (BrowserWindow.getAllWindows().length === 0) {
+		createWindow();
+	}
+});

desktop/tsconfig.json

@@ -0,0 +1,18 @@
+{
+	"compilerOptions": {
+		"target": "ES2020",
+		"module": "ESNext",
+		"outDir": "dist",
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+
+		/* Bundler mode */
+		"moduleResolution": "node",
+
+		/* Linting */
+		"strict": true
+	},
+	"include": ["src"],
+	"exclude": ["dist"]
+}

package.json

@@ -10,6 +10,7 @@
     "preinstall": "npx only-allow pnpm",
     "frontend": "pnpm --filter=frontend",
     "backend": "pnpm --filter=backend",
+    "desktop": "pnpm --filter=desktop",
     "lint": "pnpm run --parallel lint",
     "lint:check": "pnpm run --parallel lint:check",
     "format": "pnpm run --parallel format",