Implementing Electron to build desktop apps, app.jsx changed from BrowserRouter to HashRouter due to a bug in Electron implementation, added icons corresponding to each operating system

main.cjs

@@ -0,0 +1,44 @@
+const { app, BrowserWindow, Menu } = require('electron');
+const path = require('path');
+
+process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
+
+function createWindow() {
+
+    const isDev = !app.isPackaged;
+    const win = new BrowserWindow({
+        width: 800,
+        height: 600,
+        icon: path.join(__dirname, 'public', 'icon.ico') ,
+        webPreferences: {
+            contextIsolation: true,
+            enableRemoteModule: false,
+        },
+    });
+
+    win.maximize();
+
+    if (isDev) {
+        win.loadURL('http://localhost:5173');
+        win.webContents.openDevTools(); 
+    } else {
+        win.loadURL(`file://${path.join(__dirname, 'dist/index.html')}`);
+        Menu.setApplicationMenu(null);
+    }
+}
+
+app.whenReady().then(() => {
+    createWindow();
+
+    app.on('activate', () => {
+        if (BrowserWindow.getAllWindows().length === 0) {
+            createWindow();
+        }
+    });
+});
+
+app.on('window-all-closed', () => {
+    if (process.platform !== 'darwin') {
+        app.quit();
+    }
+});

package.json

@@ -3,9 +3,13 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "main": "main.cjs",
+  "description": "Free, simple, and intuitive online database design tool and SQL generator.",
+  "author": "1ilit",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "electron": "electron .",
+    "build": "vite build && electron-builder",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
@@ -46,6 +50,8 @@
     "@types/react-dom": "^18.2.17",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.16",
+    "electron": "^33.2.1",
+    "electron-builder": "^25.1.8",
     "eslint": "^8.55.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.33.2",
@@ -56,6 +62,42 @@
     "tailwindcss": "^3.3.6",
     "vite": "^5.4.1"
   },
+  "build": {
+    "appId": "com.drawDB.id",
+    "productName": "drawDB",
+    "directories": {
+      "output": "dist",
+      "buildResources": "public"
+    },
+    "files": [
+      "dist/**/*",
+      "main.cjs",
+      "package.json",
+      "node_modules/**/*",
+      "public/icon.ico"
+    ],
+    "win": {
+      "icon": "public/icon.ico",
+      "target": "nsis",
+      "signAndEditExecutable": false
+    },
+    "nsis": {
+      "oneClick": false,
+      "perMachine": true,
+      "allowToChangeInstallationDirectory": true,
+      "createDesktopShortcut": true,
+      "createStartMenuShortcut": true,
+      "shortcutName": "drawDB"
+    },
+    "mac": {
+      "icon": "public/icon.icns",
+      "target": "dmg"
+    },
+    "linux": {
+      "icon": "public/icon.png",
+      "target": "AppImage"
+    }
+  },
   "overrides": {
     "follow-redirects": "^1.15.4"
   }

src/App.jsx

@@ -1,4 +1,4 @@
-import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
+import { HashRouter, Routes, Route, useLocation } from "react-router-dom";
 import { useLayoutEffect } from "react";
 import Editor from "./pages/Editor";
 import Survey from "./pages/Survey";
@@ -13,7 +13,7 @@ import NotFound from "./pages/NotFound";
 export default function App() {
   return (
     <SettingsContextProvider>
-      <BrowserRouter>
+      <HashRouter>
         <RestoreScroll />
         <Routes>
           <Route path="/" element={<LandingPage />} />
@@ -52,7 +52,7 @@ export default function App() {
           <Route path="/templates" element={<Templates />} />
           <Route path="*" element={<NotFound />} />
         </Routes>
-      </BrowserRouter>
+      </HashRouter>
     </SettingsContextProvider>
   );
 }

vite.config.js

@@ -4,4 +4,9 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  base: './',
+  build: {
+    outDir: 'dist', 
+    emptyOutDir: true, 
+  },
 })