feat: wrap Casbin editor into a desktop app via Electron (#109)

* feat(main): add Electron integration and preload script

* refactor: Refactor file paths and error handling in main.js

* chore: Update next.config.mjs with comments and code formatting

* chore: Update README.md with Electron build instructions

* chore:remove package-lock.json

* chore: Update license and build configuration

* Update README.md

---------

Co-authored-by: Yang Luo <[email protected]>

.gitignore

@@ -16,6 +16,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

README.md

@@ -36,3 +36,12 @@ yarn start
 ```
 
 Open browser: http://localhost:3000/
+
+## For Electron
+
+This project supports being built as an Electron app:
+
+```shell
+yarn install
+yarn dist
+```

app/components/editor/index.tsx

@@ -52,7 +52,7 @@ export const EditorScreen = () => {
 
   useEffect(() => {
     const fetchCasbinVersion = async () => {
-      const response = await fetch('/casbin-version.json');
+      const response = await fetch('casbin-version.json');
       const data = await response.json();
       setCasbinVersion(data.casbinVersion);
     };

main.js

@@ -0,0 +1,82 @@
+// Copyright 2024 The casbin Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+const { app, BrowserWindow, protocol } = require('electron');
+const path = require('path');
+
+protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: true, standard: true } }]);
+
+let appServe;
+let isDev;
+
+const loadModules = async () => {
+  isDev = (await import('electron-is-dev')).default;
+  if (!isDev) {
+    const serve = (await import('electron-serve')).default;
+    appServe = serve({
+      directory: path.join(__dirname, 'out'),
+    });
+  }
+};
+
+const createWindow = async () => {
+  const win = new BrowserWindow({
+    width: 1200,
+    height: 800,
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js'),
+    },
+  });
+
+  if (!isDev && appServe) {
+    try {
+      await appServe(win);
+      win.loadURL('app://-');
+    } catch (err) {
+      console.error('Failed to serve app:', err);
+      win.loadFile(path.join(__dirname, 'out/index.html'));
+    }
+  } else {
+    win.loadFile(path.join(__dirname, 'out/index.html')).catch((err) => {
+      console.error('Failed to load local file:', err);
+      win.loadURL('http://editor.casbin.org');
+    });
+
+    win.webContents.on('did-fail-load', async () => {
+      try {
+        await win.loadFile(path.join(__dirname, 'out/index.html'));
+      } catch (err) {
+        console.error('Retry loading local file failed:', err);
+        win.loadURL('http://editor.casbin.org');
+      }
+    });
+  }
+};
+
+app.whenReady().then(async () => {
+  await loadModules();
+  createWindow();
+});
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+app.on('activate', () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow();
+  }
+});

next.config.mjs

@@ -24,7 +24,11 @@ const nextConfig = {
   images: {
     unoptimized: true,
   },
-//   for casbin browser
+
+  // Static files will be loaded using relative paths.
+  assetPrefix: './',
+
+  // for casbin browser
   webpack: (config, { isServer,webpack }) => {
     if (!isServer) {
       config.resolve.fallback = { fs: false, ...config.resolve.fallback };

package.json

@@ -2,11 +2,41 @@
   "name": "casbin-editor",
   "version": "1.0.0",
   "homepage": "https://editor.casbin.org/",
+  "main": "main.js",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "npx serve@latest out",
-    "lint": "next lint"
+    "lint": "next lint",
+    "electron": "electron .",
+    "dist": "yarn build && electron-builder"
+  },
+  "build": {
+    "appId": "org.casbin.editor",
+    "directories": {
+      "output": "dist"
+    },
+    "files": [
+      "main.js",
+      "preload.js",
+      "out/**/*",
+      "public/**/*",
+      "package.json"
+    ],
+    "extraResources": [
+      "assets"
+    ],
+    "mac": {
+      "identity": null,
+      "hardenedRuntime": false
+    },
+    "win": {
+      "target": "nsis"
+    },
+    "nsis": {
+      "oneClick": false,
+      "allowToChangeInstallationDirectory": true
+    }
   },
   "dependencies": {
     "@codemirror/autocomplete": "^6.12.0",
@@ -32,6 +62,8 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.4.17",
+    "electron": "^30.0.8",
+    "electron-builder": "^24.13.3",
     "eslint": "^8",
     "eslint-config-next": "14.1.0",
     "postcss": "^8",

preload.js

@@ -0,0 +1,10 @@
+const { contextBridge, ipcRenderer } = require('electron');
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  on: (channel, callback) => {
+    ipcRenderer.on(channel, callback);
+  },
+  send: (channel, args) => {
+    ipcRenderer.send(channel, args);
+  },
+});