[feat 🍿] fixed bridge issue for api calling 🖥

Author: devlopersabbir

changelog.md

@@ -34,3 +34,5 @@
 - [feat] ShadcnUI added to our desktop application
 - [feat] Monaco editor setup with electron js
 - [feat] Code highlight & inte. is supported
+- [fix] electron main process api calling issues
+- [feat] api calling bridge for secure our application

desktop/electron.vite.config.ts

@@ -6,15 +6,29 @@ import tailwindcss from "@tailwindcss/vite";
 
 export default defineConfig({
   main: {
-    plugins: [externalizeDepsPlugin()]
+    plugins: [externalizeDepsPlugin()],
+    resolve: {
+      alias: {
+        "@/lib": resolve("src/main/lib"),
+        "@shared": resolve("src/shared")
+      }
+    }
   },
   preload: {
     plugins: [externalizeDepsPlugin()]
   },
   renderer: {
     resolve: {
       alias: {
-        "@renderer": resolve("src/renderer/src")
+        "@renderer": resolve("src/renderer/src"),
+        "@shared": resolve("src/shared"),
+        "@/hooks": resolve("src/renderer/src/hooks"),
+        "@/assets": resolve("src/renderer/src/assets"),
+        "@/store": resolve("src/renderer/src/store"),
+        "@/components": resolve("src/renderer/src/components"),
+        "@/mocks": resolve("src/renderer/src/mocks"),
+        "@/lib": resolve("src/renderer/src/lib"),
+        "@/types": resolve("src/renderer/src/@types")
       }
     },
     plugins: [react(), tailwindcss()]

desktop/package.json

@@ -34,6 +34,7 @@
     "axios": "^1.10.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "dotenv": "^17.0.1",
     "electron-updater": "^6.3.9",
     "lucide-react": "^0.525.0",
     "monaco-editor": "^0.52.2",

desktop/pnpm-lock.yaml

@@ -3,6 +3,9 @@ import { join } from "path";
 import { electronApp, optimizer, is } from "@electron-toolkit/utils";
 import icon from "../../resources/icon.png?asset";
 import { existsSync, readFileSync } from "fs";
+import dotenv from "dotenv";
+import { handleExecuteCode } from "./lib/execute-code";
+dotenv.config();
 
 function createWindow(): void {
   // Create the browser window.
@@ -34,8 +37,6 @@ function createWindow(): void {
     return { action: "deny" };
   });
 
-  // HMR for renderer base on electron-vite cli.
-  // Load the remote URL for development or the local html file for production.
   if (is.dev && process.env["ELECTRON_RENDERER_URL"]) {
     mainWindow.webContents.openDevTools();
     mainWindow.loadURL(process.env["ELECTRON_RENDERER_URL"]);
@@ -44,51 +45,33 @@ function createWindow(): void {
   }
 }
 
-// This method will be called when Electron has finished
-// initialization and is ready to create browser windows.
-// Some APIs can only be used after this event occurs.
 app.whenReady().then(() => {
   is.dev && app.commandLine.appendSwitch("ignore-certificate-errors");
-
   // Register the custom protocol to serve Monaco Editor worker files locally
+  ipcMain.handle("executecode:post", handleExecuteCode);
   protocol.handle("monaco-editor", (request) => {
     const url = request.url.substr("monaco-editor://".length);
 
     let monacoBasePath;
     if (is.dev) {
-      // Adjust this path based on your dev setup relative to dist-electron/main/index.js
       monacoBasePath = join(__dirname, "../../node_modules/monaco-editor/min");
     } else {
-      // Adjust this path based on where 'monaco-editor/min' is copied in your packaged app.
-      // Common paths:
-      // If monaco-editor/min is copied to the root of your packaged app:
       monacoBasePath = join(app.getAppPath(), "node_modules/monaco-editor/min");
-      // If it's copied to a specific asset folder like 'assets/monaco':
-      // monacoBasePath = join(app.getAppPath(), 'assets', 'monaco');
     }
-
     const filePath = join(monacoBasePath, url);
-    console.log("Serving monaco-editor:// file:", filePath); // Keep this for debugging!
-
     if (existsSync(filePath)) {
       return new Response(readFileSync(filePath));
     } else {
       console.error("Monaco Editor file not found:", filePath);
-      // It's crucial to return a proper 404 or an empty response for missing files.
-      // Returning a null or undefined can cause issues.
       return new Response("File not found", { status: 404 });
     }
   });
-  // Set app user model id for windows
-  electronApp.setAppUserModelId("com.executeme");
 
+  electronApp.setAppUserModelId("com.executeme");
   app.on("browser-window-created", (_, window) => {
     optimizer.watchWindowShortcuts(window);
   });
 
-  // IPC test
-  ipcMain.on("ping", () => console.log("pong"));
-
   createWindow();
 
   app.on("activate", function () {
@@ -101,6 +84,3 @@ app.on("window-all-closed", () => {
     app.quit();
   }
 });
-
-// In this file you can include the rest of your app's specific main process
-// code. You can also put them in separate files and require them here.

desktop/src/main/index.ts

@@ -0,0 +1,3 @@
+export const handleCodeEditor = (_, payload) => {
+  console.log(payload);
+};

desktop/src/main/lib/code-editor.ts

@@ -0,0 +1,35 @@
+import { Input } from "@shared/types";
+import { IpcMainInvokeEvent } from "electron";
+import https from "https";
+import axios from "axios";
+import { is } from "@electron-toolkit/utils";
+
+export const handleExecuteCode = async (_: IpcMainInvokeEvent, payload: Input) => {
+  const agent = new https.Agent({
+    rejectUnauthorized: false
+  });
+  const axiosInstance = axios.create({
+    httpsAgent: agent
+  });
+  const baseAPI = is.dev
+    ? process.env.RENDERER_VITE_SERVER_BASE_URL
+    : process.env.RENDERER_VITE_SERVER_BASE_URL;
+  const start = performance.now();
+  try {
+    const { data } = await axiosInstance.post(`${baseAPI}/run`, payload);
+    const end = performance.now();
+    return {
+      output: data.output,
+      responseTime: Math.round(end - start)
+    };
+  } catch (error: any) {
+    const end = performance.now();
+
+    const output = error?.response?.data?.details || error?.message || "Unknown error occurred";
+
+    return {
+      output,
+      responseTime: Math.round(end - start)
+    };
+  }
+};

desktop/src/main/lib/execute-code.ts

@@ -1,8 +1,17 @@
-import { ElectronAPI } from '@electron-toolkit/preload'
+// import { electronAPI } from "@electron-toolkit/preload";
+import { Input, Output } from "@shared/types";
+
+export interface ApplicationInterface {
+  // electron: typeof electronAPI;
+
+  api: {
+    getMonacoBasePath: () => string;
+    executeCode: (payload: Input) => Promise<Output>;
+  };
+}
 
 declare global {
   interface Window {
-    electron: ElectronAPI
-    api: unknown
+    applicationApi: ApplicationInterface;
   }
 }

desktop/src/preload/index.d.ts

@@ -1,35 +1,23 @@
 import { contextBridge, ipcRenderer } from "electron";
+// import { electronAPI } from "@electron-toolkit/preload";
+import { Input } from "@shared/types";
+import { ApplicationInterface } from "./preload";
 
-// Expose a function to the renderer to get Monaco's base path
-// This is crucial for @monaco-editor/react to know where to load its *main* scripts from
-contextBridge.exposeInMainWorld("monacoConfig", {
-  getMonacoBasePath: () => {
-    // This is correct. The renderer will ask for 'monaco-editor://vs'
-    // and your main process protocol handler will resolve it to the local path.
-    return `monaco-editor://vs`;
+const applicationApi: ApplicationInterface = {
+  // electron: electronAPI,
+
+  api: {
+    getMonacoBasePath: () => "monaco-editor://vs",
+    executeCode: (payload: Input) => ipcRenderer.invoke("executecode:post", payload)
   }
-});
+};
 
 if (process.contextIsolated) {
   try {
-    contextBridge.exposeInMainWorld("electron", {
-      ipcRenderer: {
-        send: (channel: string, args?: any[]) => ipcRenderer.send(channel, args),
-        on: (channel: string, listener: (...args: any[]) => void) => {
-          ipcRenderer.on(channel, listener);
-          return () => ipcRenderer.removeListener(channel, listener);
-        }
-      }
-    });
+    contextBridge.exposeInMainWorld("applicationApi", applicationApi);
   } catch (error) {
-    console.error(error);
+    console.error("Failed to expose API:", error);
   }
 } else {
-  // @ts-ignore (define in dts)
-  window.electron = {
-    ipcRenderer: {
-      send: (channel, args) => ipcRenderer.send(channel, args),
-      on: (channel, listener) => ipcRenderer.on(channel, listener)
-    }
-  };
+  window.applicationApi = applicationApi;
 }

desktop/src/preload/index.ts

@@ -0,0 +1,17 @@
+// import { electronAPI } from "@electron-toolkit/preload";
+import { Input, Output } from "@shared/types";
+
+export interface ApplicationInterface {
+  // electron: typeof electronAPI;
+
+  api: {
+    getMonacoBasePath: () => string;
+    executeCode: (payload: Input) => Promise<Output>;
+  };
+}
+
+declare global {
+  interface Window {
+    applicationApi: ApplicationInterface;
+  }
+}