enhancement: electron implementation for desktop application

index.html

@@ -11,6 +11,8 @@
       content="Online database entity-realtionship diagram editor, data modeler, and SQL generator. Design, visualize, and export scripts without an account and completely free of charge."
     />
     
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none';">
+
     <meta name="robots" content="index,follow,max-image-preview:large" />
 
     <meta property="og:type" content="website" />

main.cjs

@@ -0,0 +1,53 @@
+const { app, BrowserWindow } = require('electron');
+const path = require('node:path');
+
+process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
+
+function createWindow() {
+    const isDev = !app.isPackaged; // Detectar si es entorno de desarrollo
+    const win = new BrowserWindow({
+        width: 800,
+        height: 600,
+        //icon: path.join(__dirname, 'public/favicon.ico'),
+        webPreferences: {
+            preload: path.join(__dirname, 'preload.js'),
+            contextIsolation: true, // Mejora la seguridad
+            enableRemoteModule: false, // Deshabilitar módulos remotos por seguridad
+            nodeIntegration: false, // Desactiva integración con Node.js
+        },
+    });
+
+    if (isDev) {
+        // En desarrollo, cargar la URL del servidor de Vite
+        win.loadURL('http://localhost:5173');
+        win.webContents.openDevTools(); // Abrir herramientas de desarrollo
+    } else {
+        // En producción, cargar el archivo index.html de la carpeta dist
+        win.loadFile(path.join(__dirname, 'dist/index.html'));
+    }
+
+    if (!isDev) {
+        import('@vercel/analytics').then(({ inject }) => inject());
+      }
+}
+
+
+
+  
+
+
+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": "Application to design database diagrams.",
+  "author": "1ilit",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
+    "dev": "vite && npm run electron",
+    "electron": "electron .",
+    "build": "vite build && electron-builder",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
@@ -41,11 +45,32 @@
     "url": "^0.11.1",
     "usehooks-ts": "^3.1.0"
   },
+  "build": {
+    "appId": "com.drawDB.id",
+    "productName": "drawDB",
+    "directories": {
+      "output": "dist",
+      "buildResources": "public"
+    },
+    "files": [
+      "dist/**/*",
+      "main.cjs",
+      "preload.js",
+      "package.json",
+      "node_modules/**/*"
+    ],
+    "win": {
+      "target": "nsis",
+      "signAndEditExecutable": false
+    }
+  },
   "devDependencies": {
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.16",
+    "electron": "^33.2.0",
+    "electron-builder": "^25.1.8",
     "eslint": "^8.55.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.33.2",

postinstall.cjs

@@ -0,0 +1,12 @@
+const fs = require('fs');
+const path = require('path');
+
+const source = path.join(__dirname, 'node_modules/electron/dist/ffmpeg.dll');
+const destination = path.join(__dirname, 'dist/win-unpacked/ffmpeg.dll');
+
+if (fs.existsSync(source)) {
+  fs.copyFileSync(source, destination);
+  console.log('ffmpeg.dll copiado exitosamente.');
+} else {
+  console.error('No se encontró ffmpeg.dll en el directorio de Electron.');
+}

preload.js

@@ -0,0 +1,7 @@
+const { contextBridge, ipcRenderer } = require('electron');
+
+// Exponer API segura al proceso renderer
+contextBridge.exposeInMainWorld('electron', {
+  send: (channel, data) => ipcRenderer.send(channel, data),
+  on: (channel, callback) => ipcRenderer.on(channel, (event, ...args) => callback(...args)),
+});

src/pages/NotFound.jsx

@@ -1,25 +1,30 @@
+import { useLocation } from 'react-router-dom';
+
 export default function NotFound() {
+  const location = useLocation(); // Obtiene la ubicación actual
+
   return (
     <div className="p-3 space-y-2">
-      <p>hey there!</p>
+      <p>Hey there!</p>
 
-      <p>looking for something you couldn&apos;t find?</p>
+      <p>Looking for something you couldn&apos;t find?</p>
       <p>
         <a className="text-blue-600" href="mailto:drawdb@outlook.com">
-          shoot us an email
+          Shoot us an email
         </a>{" "}
         or{" "}
-        <a
-          className="text-blue-600"
-          href="https://discord.gg/BrjZgNrmR6"
-        >
-          a message on discord
+        <a className="text-blue-600" href="https://discord.gg/BrjZgNrmR6">
+          a message on Discord
         </a>
       </p>
       <br />
       <p className="opacity-70">
-        * to create a relationship hold the blue dot of a field and drag it
-        towards the field you want to connect it to
+        The page you were looking for: <strong>{location.pathname}</strong> does not exist.
+      </p>
+      <br />
+      <p className="opacity-70">
+        * To create a relationship, hold the blue dot of a field and drag it
+        towards the field you want to connect it to.
       </p>
     </div>
   );

vite.config.js

@@ -4,4 +4,13 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  base: './', // Esto asegura que las rutas generadas sean relativas al archivo index.html
+  build: {
+    outDir: 'dist', // Carpeta de salida para producción
+    emptyOutDir: true, // Limpia la carpeta antes de construir
+  },
+  server: {
+    port: 5173, // El puerto donde Vite escucha por defecto
+  },
 })
+