Generator Development Environment Setup

Adobe Generator is powered by a NodeJS interpreter and scripts that are packaged with Adobe Photoshop CC. But for Generator development, it's easiest to run your own, separate NodeJS interpreter, and to point Photoshop to that instead of its built-in NodeJS interpreter. This document explains how to do that.

Prerequisites

Download and install the following packages:

1. NodeJS
2. Git (or GitBash on Windows)

Open a terminal window on a Mac, or a GitBash prompt on Windows, and type node --version, npm --version and git --version to confirm that node, the node package manager npm, and git are installed correctly.

Change Generator Settings in Photoshop

Open the Photoshop preferences dialog, and go to the Plug-Ins panel. We need to disable the built-in Generator instance and allow our own NodeJS interpreter to connect to Photoshop.

1. Disable the "Enable Generator" checkbox
2. Enable the "Enable Remote Connections" checkbox
3. Change the password to "password" without the quotes.
4. Restart Photoshop

Install Generator Sources

Adobe Generator, as is shipped with Adobe Photoshop CC, consists of two packages:

1. Generator Core, which provides basic functionality for NodeJS scripts to interact with Photoshop, and to run and manage Generator plug-ins; and
2. Generator Image Assets, which is a Generator plug-in that writes images assets to disk for appropriately annotated layers.

Instructions for installing both of these components are below. If you're developing your own Generator plug-in, it isn't strictly necessary to install the Image Assets plug-in, although understanding how that plug-in works might be useful!

Install Generator Core

From your terminal or GitBash prompt, enter the following commands:

1. $ mkdir generator -- Make a new directory for all the Generator sources.
2. $ cd generator -- Enter that directory.
3. $ git clone https://github.com/adobe-photoshop/generator-core.git -- Download a copy of the Generator Core JavaScript sources from Github into the local generator/generator-core directory.
4. $ cd generator-core -- Enter the generator-core directory.
5. (OPTIONAL) $ git checkout some_branch_name -- Switch to a particular source branch.
6. $ npm install -- Download and install JavaScript source dependencies into the generator/generator-core/node_modules directory.

Install Generator Image Assets

1. $ cd .. -- Enter the top-level generator directory.
2. $ mkdir plugins -- Make a subdirectory into which plug-ins will be installed.
3. $ cd plugins -- Enter the plug-ins directory.
4. $ git clone https://github.com/adobe-photoshop/generator-core.git -- Download a copy of the Generator Image Assets JavaSCript sources from Github into the local generator/plugins/generator-image-assets directory.
5. $ cd generator-assets -- Enter the Image Assets directory
6. (OPTIONAL) $ git checkout some_branch_name -- Switch to a particular source branch.
7. $ npm install -- Download and install JavaScript source dependencies into the generator/plugins/generator-assets/node_modules directory.

Run Generator

From your terminal or GitBash prompt, enter the Generator Core directory. If you're following the instructions above, you can do that with:

cd ../../generator-core

Next, start the NodeJS interpreter, pointing it to both the main source file for Generator Core (app.js) and the folder that contains Generator plug-ins to be loaded (../plugins)

node app.js -f ../plugins

If Generator successfully started up, you'll see messages on your terminal that look something like this:

[debug:core 10:17:52.791 generator.js:1102:21] Loading plugin: generator-assets
[debug:core 10:17:52.842 generator.js:1116:21] Plugin loaded: generator-assets

You can stop Generator by ending the node process, e.g., by typing control-C in the terminal. Generator will also exit whenever the Photoshop application exits. If you restart Photoshop, you'll also have to restart Generator using the node command above.

Debug Generator

You can use the node-inspector program to debug the Generator core or its plugins. The node-inspector program runs as a persistent background process and is accessed via a web browser. Install it system-wide with the npm command:

$ sudo npm install -g node-inspector

To use the debugger, first open a new terminal and launch node-inspector:

$ node-inspector

You'll see output that looks like this:

> Node Inspector v0.7.3
> Visit [http://127.0.0.1:8080/debug?port=5858](http://127.0.0.1:8080/debug?port=5858) to start debugging.

Note that node-inspector will continue to run while we debug Generator.

Next, back in the other terminal, re-launch Generator with debugging enabled:

$ node --debug app.js -f ../plugins

Note the additional --debug flag.

Finally, launch a web browser and navigate to the node-inspector URL above. You should see an interface that looks very similar to Chrome Developer Tools:

You can use the node-inspector interface to set breakpoints and inspect memory and the call stack as Generator executes. For more information on debugging, visit the Chrome Developer Tools and node-inspector sites.