How to Build a Node.js Server in a Panel
If you have already built a simple “Hello World” panel using CEP, you might wonder what else you can do with a panel. While there are plenty of technologies you can use on the front-end side to make useful panels, did you know that you can actually build a full-stack panel? If you have some experience building a full-stack web application, you will find building a full-stack panel very similar. That said, there are some key differences and special configurations you need to set.
Today, I will walk you through building a full-stack Adobe panel. Note that this is a follow-up to How to create your first Adobe panel in 6 easy steps, and assumes you have a working panel built already. If you are new to building Adobe panels, I’d recommend you take a look at the Getting Started Guide first.
1. Update the folder structure
If you have a directory structure similar to the one suggested in my first article, all you have to add is a folder designated for your server, a Node.js file, a main.js file inside the server folder, and another HTML file, localServer.html, all under the existing client folder:
The main.js file is a Node.js file where write server logic. The root directory can be saved either at the root level or at the user level, depending on who’s allowed to use the extension (refer to the CEP 8 HTML Extension Cookbook for the exact paths).
Note that except for the required CSXS folder, which must contain manifest.xml, the folder structure is flexible.
2. Add an extra extension for your server in the manifest file
The secret to running a server in your panel is having another extension dedicated to running the server in your panel running concurrently. Let’s configure your panel to support this two extension structure. First, you need to add an extra extension in your manifest.xml by inserting a second extension ID under the <ExtensionList> tag. Let’s call your server extension com.my.localserver:
The next step is to configure the details for this new server extension, com.my.localserver. Note that you can insert multiple <Extension> tags under the <DispatchInfoList> tag. Simply insert another <Extension> tag for this server extension and provide details:
Note that since com.my.localserver will be using Node.js, you must add two CEF parameters, --enable-nodejs and --mixed-context, within the <CEFCommandLine> tag as seen above. Also, notice that the <AutoVisible> tag is set to false and <Type> tag is set to Custom. This setting makes the server extension invisible to the user.
3. Write an HTML file for the server extension
As you can see in the <MainPath> tag of the manifest.xml above, when a CEP method is called in your JavaScript file, another HTML markup will be loaded from ./client/localServer.html. Note that we addedlocalServer.html` when we updated the directory structure. You might wonder why you have to write another HTML file for the server extension. The purpose of this HTML file is to start your server and stay hidden.
As you can see inside the <script> tag, the cep_node method available in CEP starts the Node.js file located in your server directory (server/main.js).
4. Load the server extension from the main extension’s JavaScript file
As covered in our Getting Started Guide, the CSInterface is a library that enables you to control the panel and communicate with Adobe products like Photoshop, InDesign, Premiere Pro, and more.
You can use the method requestOpenExtension to open your server extension by providing its ID:
Simply include the line above in your main extension’s JavaScript file, ‘client/index.js. This will open the HTML markup of the invisible server extension. Then, JavaScript written in the HTML markup will start the Node.js server located at/server/main.js`.
Note that you have already added the line above has to your /client/localServer.html file (if you have been following the instructions). Next, let’s write a Node.js server in, /server/main.js.
5. Write a Node.js server
You can write a Node.js server the same way you would write one for a web application. You can download any npm node modules you need and require them in your server, for example:
Next, write your server logic in a helper function called run() and export the function.
Next, download and install Node.js and its package manager, npm, and create the package.json file in the root level directory of your panel and insert the following configurations.
Finally, type npm install to install the required packages.
Congratulations! You have just written a Node.js server capable of downloading an image from an external URL.
6. Modify the main extension’s front-end code
This sample downloads an image from a URL (as written in the previous step). In order for it to work, we need to modify the main extension’s client/index.html and client/index.js.
Theindex.html file is a simple HTML file with a button to trigger a file import from an external URL. Note that you need to include jQuery that helps you communicate with the server:
As noted earlier, the main extension’s index.js file uses CEP’s requestOpenExtension method to start the server extension. After that, importDoc() sends the user directory path to the server and receives the path of the file to be downloaded from the server. Finally, you use CSInterface.evalScript() to communicate with the host application, which opens the downloaded document.
6. Modify your ExtendScript code
Again, since this example is designed to open the downloaded file, you need to modify the openDocument() function to accept the file path as a parameter.
You’ve coded your first Node.js server inside a panel! Are you interested in learning what else you can do with Adobe panels? Keep checking our new Getting Started Guides section for examples.
For more stories like this, subscribe to our Creative Cloud Developer Newsletter.
