Reutilizamos nuestro código de frontend para convertirlo con electron en una app de escritorio, proyectos finalizados

hall9zeha · hall9zeha · commit a2a3bfa698a3 · 2022-08-22T15:56:34.000-05:00
diff --git a/Project/Desktop/index.js b/Project/Desktop/index.js
@@ -14,8 +14,8 @@ function createWindow(){
         //podriamos evitar que el usuario redimencione la pantalla con
         //resizable:false
         //También podemos limitar un mínimo redimensionable de altura y anchura
-        //min-width:600,
-        //min-height:700
+        //minWidth:600,
+        //minHeight:700
     });
 
     //Cuando la aplicación es cerrada liberamos los recursos de memoria
diff --git a/Project/README.md b/Project/README.md
@@ -25,10 +25,22 @@
 # Desktop
 
 - Inicializamos ``` npm init ``` dentro de la carpeta "Desktop" 
-- Luego instalamos electrón ``` npm i -D electron@latest ```
-- Instalamos una dependencia para crear los instalables en electrón
+- Luego instalamos electron ``` npm i -D electron@latest ```
+- Instalamos una dependencia para crear los instalables en electron
     -``` npm install --save-dev electron-builder ```
     - Luego en package.json añadir el script:
     - "dist": "electron-builder -l" 
     - En mi caso crearé un instalable para linux con la bandera "-l", (para windows: "-w" y para Mac " -m")  
-- Finalmente ejecutar ``` npm run dist ```
+- Finalmente ejecutar ``` npm run dist ```
+
+## Usar el proyecto de Frontend con electron
+
+nos ubicamos en la carpeta raiz del "frontend" e instalamos unas dependencias:
+- ``` npm install --save cross-env electron-is-dev ```, nos permitirá saber en que entorno estamos, si es de desarrollo o de producción.
+
+- ``` npm install concurrently wait-on electron electron-builder typescript ```
+    * ```concurrently``` para ejecutar dos o mas comandos a la vez
+    * ```wait-on``` para esperar a que el host esté activo y ejecutar todo lo demás
+    * ```electron ``` para crear la app de escritorio
+    * ```electron-builder``` para crear los instalables
+    * ```typescript``` porque es una dependencia exigida por electron
diff --git a/Project/frontend/package.json b/Project/frontend/package.json
@@ -2,25 +2,37 @@
   "name": "frontend",
   "version": "0.1.0",
   "private": true,
-  
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.27.2",
+    "concurrently": "^7.3.0",
+    "cross-env": "^7.0.3",
+    "electron": "^20.0.3",
+    "electron-builder": "^23.3.3",
+    "electron-is-dev": "^2.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "sweetalert2": "^11.4.29",
+    "typescript": "^4.7.4",
+    "wait-on": "^6.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "react-start": "react-scripts start",
+    "react-build": "react-scripts build",
+    "react-test": "react-scripts test --env=jsdom",
+    "react-eject": "react-scripts eject",
+    "electron-build": "electron-builder",
+    "release": "yarn react-build && electron-builder --publish=always",
+    "build": "yarn react-build && yarn electron-build",
+    "start": "concurrently \"cross-env BROWSER=none npm run react-start\" \"wait-on http://localhost:3000 && electron .\"" 
   },
+  "main":"public/electron.js",
+  "homepage":"./",
   "eslintConfig": {
     "extends": [
       "react-app",
diff --git a/Project/frontend/public/electron.js b/Project/frontend/public/electron.js
@@ -0,0 +1,43 @@
+const {app, BrowserWindow } = require('electron');
+const path= require('path');
+const isDev = require('electron-is-dev');
+
+let appWindow;
+
+function createWindow(){
+
+    appWindow = new BrowserWindow({
+        width:1000,
+        height:600,
+        center:true,
+        resizable:true,
+        minWidth:600,
+        minHeight:400,
+        show:false,
+        icon:'icon.png'
+    })
+    appWindow.loadURL(
+        isDev
+            ? 'http://localhost:3000'
+            :`file://${path.join(__dirname,"../build/index.html")}`
+
+    );
+
+    appWindow.once('ready-to-show',()=>{
+        appWindow.show();
+    })
+}
+
+app.on('ready',createWindow);
+
+app.on('window-all-closed',()=>{
+    if(process.platform !== 'darwin'){
+        app.quit();
+    }
+})
+
+app.on('activate',()=>{
+    if(appWindow === null){
+        createWindow();
+    }
+})
diff --git a/Project/frontend/public/icon.png b/Project/frontend/public/icon.png
