Add an electron app for the React front-end.

client/main.js

@@ -0,0 +1,57 @@
+const path = require("path");
+
+const { app, BrowserWindow } = require("electron");
+const isDev = require("electron-is-dev");
+const windowStateKeeper = require("electron-window-state");
+
+function createWindow() {
+  let mainWindowState = windowStateKeeper({
+    defaultWidth: 1000,
+    defaultHeight: 800,
+  });
+
+  // Create the browser window.
+  const win = new BrowserWindow({
+    x: mainWindowState.x,
+    y: mainWindowState.y,
+    width: mainWindowState.width,
+    height: mainWindowState.height,
+    show: false,
+    webPreferences: {
+      nodeIntegration: true,
+    },
+  });
+  mainWindowState.manage(win);
+
+  // and load the index.html of the app.
+  // win.loadFile("index.html");
+  win.loadURL(
+    isDev
+      ? "http://localhost:3000"
+      : `file://${path.join(__dirname, "../build/index.html")}`
+  );
+  // Open the DevTools.
+  if (isDev) {
+    win.webContents.openDevTools({ mode: "detach" });
+  }
+}
+
+// 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(createWindow);
+
+// Quit when all windows are closed, except on macOS. There, it's common
+// for applications and their menu bar to stay active until the user quits
+// explicitly with Cmd + Q.
+app.on("window-all-closed", () => {
+  if (process.platform !== "darwin") {
+    app.quit();
+  }
+});
+
+app.on("activate", () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow();
+  }
+});

client/package.json

@@ -2,6 +2,7 @@
   "name": "client",
   "version": "0.1.0",
   "private": true,
+  "main": "main.js",
   "dependencies": {
     "@reduxjs/toolkit": "^1.7.2",
     "@testing-library/jest-dom": "^5.16.2",
@@ -13,6 +14,7 @@
     "@types/react-dom": "^16.9.14",
     "@types/react-redux": "^7.1.22",
     "axios": "^0.26.0",
+    "electron-window-state": "^5.0.3",
     "esri-leaflet": "^3.0.7",
     "leaflet": "^1.7.1",
     "milsymbol": "^2.0.0",
@@ -27,7 +29,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "electron": "wait-on tcp:3000 && electron ."
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -47,6 +50,9 @@
   "devDependencies": {
     "@types/axios": "^0.14.0",
     "@types/leaflet": "^1.7.9",
-    "react-scripts": "5.0.0"
+    "electron": "^17.1.0",
+    "electron-is-dev": "^2.0.0",
+    "react-scripts": "5.0.0",
+    "wait-on": "^6.0.1"
   }
 }