Embedded Express/Socket.io server into Electron helper app, added Webpack configuration for uxp plugin to handle dependencies

Author: jake-pauls

desktop-helper-sample/README.md

@@ -1,23 +1,65 @@
 # Desktop Helper Example
 This sample has two components, a Ps plugin and an Electron application built in React. 
+
 For developers who have used `create-react-app` before, the folder structure and tools used in the Electron application will be familiar.
 
 Both components must be running for the example to work correctly.
 
 # Configuration
 The following steps will help you load the plugin into Photoshop and get the Electron app up and running.
 
+## UXP Plugin
+
+### 1. Install Node.js dependencies
+```
+$ cd uxp
+$ yarn install   # or npm install
+```
+
+### 2. Run plugin in watch or build mode 
+```
+$ cd uxp 
+$ yarn watch     # or npm run watch
+
+# OR
+
+$ yarn build     # or npm run build
+```
+
+* `yarn watch` or `npm run watch` will build a development version of the plugin, and recompile everytime you make a change to the source files. The result is placed in `uxp/dist`. 
+* `yarn build` or `npm run build` will build a production version of the plugin and place it in `uxp/dist`. It will not update every time you make a change to the source files.
+
+> You **must** run either `watch` or `build` prior to trying to use within Photoshop!
+
+## Electron Helper
+
 ### 1. Install Node.js dependencies 
 ```
 $ cd helper 
 $ yarn install   # or npm install
 ```
 
-### 2. Run Helper App
+### 2. Run helper app
 ```
 $ cd helper
 $ yarn start
 ```
 
+### 3. (Optional) Build the helper app 
+```
+$ cd helper
+$ yarn build
+```
+
+**Warning:** This command will take quite some time to execute.
+
+In Electron, production builds compile JavaScript into a binary executable on the target platform for distribution or personal use. It is recommended that you build for production when you finish development.  
+
+Once built, navigate to the `helper/dist` folder and double click the `UXP Helper App Setup 1.0.0` installer. Upon installation, the helper app can be run locally. Please note, the Electron project will have to be rebuilt and reinstalled for any future changes to take effect in production. 
+
 # Load the Plugin
-The plugin requires no dependencies and can be run by using the UXP Developer Tools. Click "Add Plugin..." in the UXP Developer Tools and select `plugin/manifest.json`, then click the ••• button and select "Load...". 
+You can use the UXP Developer Tools to load the plugin into Photoshop.
+
+If the plugin hasn't already been added to your workspace in the UXP Developer Tools, you can add it by clicking "Add Plugin..." and selecting `uxp/dist/manifest.json`. **DO NOT** select the `manifest.json` file inside the `uxp/plugin` folder.
+
+Once added, you can load it into Photoshop by clicking the ••• button on the corresponding row, and clicking "Load". Switch to Photoshop and you should see the sample panel.

desktop-helper-sample/helper/package.json

@@ -3,22 +3,50 @@
   "version": "1.0.0",
   "license": "none",
   "private": true,
+  "main": "public/electron.js",
+  "homepage": "./",
   "scripts": {
     "start": "concurrently -k \"npm run start:react\" \"npm run start:electron\"",
-    "start:electron": "wait-on tcp:3000 && electron public/electron.js",
     "start:react": "cross-env BROWSER=none react-scripts start",
-    "build": "react-scripts build",
+    "start:electron": "wait-on tcp:3000 && electron public/electron.js",
+    "build": "npm run build:react && npm run build:electron",
+    "build:react": "react-scripts build",
+    "build:electron": "electron-builder",
     "eject": "react-scripts eject"
   },
   "devDependencies": {
     "concurrently": "^6.2.0",
+    "cross-env": "^7.0.3",
     "electron": "^13.1.6",
+    "electron-builder": "^22.11.7",
     "wait-on": "^6.0.0"
   },
   "dependencies": {
+    "electron-is-dev": "^2.0.0",
+    "express": "^4.17.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3"
+    "react-scripts": "4.0.3",
+    "socket.io": "^4.1.2"
+  },
+  "build": {
+    "appId": "com.electron.adobe.example.desktop-helper-sample",
+    "productName": "UXP Helper App",
+    "mac": {
+      "category": "public.app-category.developer-tools",
+      "target": [
+        "dmg"
+      ]
+    },
+    "win": {
+      "asar": false,
+      "target": [
+        "nsis"
+      ]
+    },
+    "directories": {
+      "output": "dist"
+    }
   },
   "browserslist": {
     "production": [

desktop-helper-sample/helper/public/electron.js

@@ -1,4 +1,8 @@
 const { app, BrowserWindow } = require('electron');
+const isDevelopment = require('electron-is-dev');
+const path = require('path');
+
+require('./server.js');
 
 const createWindow = () => {
   const window = new BrowserWindow({
@@ -10,8 +14,15 @@ const createWindow = () => {
   });
 
   // Configure electron development environment
-  window.loadURL('http://localhost:3000');
-  window.webContents.openDevTools({ mode: 'detach' });
+  window.loadURL(isDevelopment 
+    ? 'http://localhost:3000' 
+    : `file://${path.join(__dirname, '../build/index.html')}`);
+  
+  if (isDevelopment) {
+    window.webContents.openDevTools({ 
+      mode: 'detach' 
+    });
+  }
 };
 
 app.whenReady().then(createWindow);

desktop-helper-sample/helper/public/server.js

@@ -0,0 +1,43 @@
+const http = require('http');
+const express = require('express');
+const { Server } = require('socket.io');
+
+const startServer = async () => {
+  const port = 4040;
+  const app = express();
+  const server = http.createServer(app);
+
+  const io = new Server(server);
+
+  server.listen(port, () => {
+    console.log(`[server] Server listening on port ${port}`);
+  });
+  
+  io.on('connection', (socket) => {
+    console.log('[socket.io] UXP plugin connected');
+
+    io.emit('uxp-connected', true);
+
+    socket.on('message', (message) => {
+      console.log(`Message received from client: ${message}`);
+    });
+
+    socket.on('disconnect', () => {
+      console.log('[socket.io] UXP plugin disconnected');
+    });
+  });
+
+  // Emit connect when uxp attempts to reconnect
+  io.on('reconnect', (socket) => {
+    io.emit('uxp-connected', true);
+  });
+
+  // Emit disconnect when helper app closes 
+  process.on('exit', () => {
+    io.emit('uxp-connected', false);
+  });
+};
+
+startServer().catch((err) => {
+  console.log(`[server] Error: ${err}`)
+});

desktop-helper-sample/helper/src/App.jsx

@@ -1,6 +1,6 @@
 import './App.css';
 
-function App() {
+const App = () => {
   return (
     <div className="container">
       <header className="header">