Skip to content

Commit fb0e4f9

Browse files
jake-paulsjake-pauls
committed
Templated PS plugin and Electron/React app for desktop sample
1 parent 3543290 commit fb0e4f9

22 files changed

+12092
-0
lines changed

‎desktop-helper-sample/.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules/
2+
dist/
3+
build/

‎desktop-helper-sample/README.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Desktop Helper Example
2+
This sample has two components, a Ps plugin and an Electron application built in React.
3+
For developers who have used `create-react-app` before, the folder structure and tools used in the Electron application will be familiar.
4+
5+
Both components must be running for the example to work correctly.
6+
7+
# Configuration
8+
The following steps will help you load the plugin into Photoshop and get the Electron app up and running.
9+
10+
### 1. Install Node.js dependencies
11+
```
12+
$ cd helper
13+
$ yarn install # or npm install
14+
```
15+
16+
### 2. Run Helper App
17+
```
18+
$ cd helper
19+
$ yarn start
20+
```
21+
22+
# Load the Plugin
23+
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...".

‎desktop-helper-sample/helper/package.json‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "com.adobe.example.desktop-helper-app",
3+
"version": "1.0.0",
4+
"license": "none",
5+
"private": true,
6+
"scripts": {
7+
"start": "concurrently -k \"npm run start:react\" \"npm run start:electron\"",
8+
"start:electron": "wait-on tcp:3000 && electron public/electron.js",
9+
"start:react": "cross-env BROWSER=none react-scripts start",
10+
"build": "react-scripts build",
11+
"eject": "react-scripts eject"
12+
},
13+
"devDependencies": {
14+
"concurrently": "^6.2.0",
15+
"electron": "^13.1.6",
16+
"wait-on": "^6.0.0"
17+
},
18+
"dependencies": {
19+
"react": "^17.0.2",
20+
"react-dom": "^17.0.2",
21+
"react-scripts": "4.0.3"
22+
},
23+
"browserslist": {
24+
"production": [
25+
">0.2%",
26+
"not dead",
27+
"not op_mini all"
28+
],
29+
"development": [
30+
"last 1 chrome version",
31+
"last 1 firefox version",
32+
"last 1 safari version"
33+
]
34+
}
35+
}

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const { app, BrowserWindow } = require('electron');
2+
3+
const createWindow = () => {
4+
const window = new BrowserWindow({
5+
width: 800,
6+
height: 600,
7+
webPreferences: {
8+
nodeIntegration: true,
9+
},
10+
});
11+
12+
// Configure electron development environment
13+
window.loadURL('http://localhost:3000');
14+
window.webContents.openDevTools({ mode: 'detach' });
15+
};
16+
17+
app.whenReady().then(createWindow);
18+
19+
app.on('window-all-closed', () => {
20+
if (process.platform !== 'darwin') {
21+
app.quit();
22+
}
23+
});
24+
25+
app.on('activate', () => {
26+
if (BrowserWindow.getAllWindows().length === 0) {
27+
createWindow();
28+
}
29+
});

‎desktop-helper-sample/helper/public/favicon.ico‎

15 KB
Binary file not shown.

‎desktop-helper-sample/helper/public/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="description" content="UXP Helper App" />
8+
<title>UXP Helper</title>
9+
</head>
10+
<body>
11+
<noscript>You need to enable JavaScript to run this app.</noscript>
12+
<div id="root"></div>
13+
</body>
14+
</html>

‎desktop-helper-sample/helper/src/App.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.container {
2+
text-align: center;
3+
}
4+
5+
.header {
6+
background-color: #282c34;
7+
min-height: 100vh;
8+
display: flex;
9+
flex-direction: column;
10+
align-items: center;
11+
justify-content: center;
12+
font-size: calc(10px + 2vmin);
13+
color: white;
14+
}

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import './App.css';
2+
3+
function App() {
4+
return (
5+
<div className="container">
6+
<header className="header">
7+
<p>Welcome to the UXP Helper App</p>
8+
</header>
9+
</div>
10+
);
11+
}
12+
13+
export default App;

‎desktop-helper-sample/helper/src/index.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
body {
2+
margin: 0;
3+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4+
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5+
sans-serif;
6+
-webkit-font-smoothing: antialiased;
7+
-moz-osx-font-smoothing: grayscale;
8+
}
9+
10+
code {
11+
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12+
monospace;
13+
}

‎desktop-helper-sample/helper/src/index.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import './index.css';
4+
import App from './App';
5+
6+
ReactDOM.render(
7+
<React.StrictMode>
8+
<App />
9+
</React.StrictMode>,
10+
document.getElementById('root')
11+
);

0 commit comments

Comments
 (0)