javascriptnode.jsadobepaneladobe-premiere

Adobe Premiere Pro CEP- Cannot start nodejs localserver alongside panel


I've been experimenting with panels development for Premiere Pro CC 2019, and am now trying to follow the tutorial found on https://medium.com/adobetech/how-to-build-a-node-js-server-in-a-panel-ba1d63ea67e2 on creating a localserver with nodejs alongside a panel, but I can't get it to work

I've uploaded my code here, which doesn't differ much from the tutorial beside updated manifest.xml version numbers: https://github.com/VanMuylemSven/AdobePanelNodeSample

Clicking the panel returns an empty alert, tested in both Premiere Pro CC 2019 and Photoshop CC 2019 enter image description here Enabling the debug always tells me that the connection is refused, and none of the console logs in the localserver ever get triggered. enter image description here

Manifest.xml

<?xml version="1.0" encoding="UTF-8"?>
<ExtensionManifest Version="7.0" ExtensionBundleId="com.my.test" ExtensionBundleVersion="1.0.0"
        ExtensionBundleName="NodeSamplePanel" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <ExtensionList>
        <Extension Id="com.my.test.panel" Version="1.0" />
        <Extension Id="com.my.localserver" Version="1.0" />
    </ExtensionList>
    <ExecutionEnvironment>
        <HostList>
            <Host Name="PHXS" Version="14.0" />
            <Host Name="PHSP" Version="14.0" />         
            <Host Name="PPRO" Version="7.0" />          
        </HostList>
        <LocaleList>
            <Locale Code="All" />
        </LocaleList>
        <RequiredRuntimeList>
            <RequiredRuntime Name="CSXS" Version="7.0" />
        </RequiredRuntimeList>
    </ExecutionEnvironment>
    <DispatchInfoList>
        <Extension Id="com.my.test.panel">
            <DispatchInfo >
                <Resources>
                <MainPath>./client/index.html</MainPath>
                <CEFCommandLine>
                    <Parameter>--allow-file-access</Parameter>
                    <Parameter>--allow-file-access-from-files</Parameter>
                    <Parameter>--enable-nodejs</Parameter>
                    <Parameter>--mixed-context</Parameter>
                </CEFCommandLine>
                <ScriptPath>./host/index.jsx</ScriptPath>
                </Resources>
                <Lifecycle>
                    <AutoVisible>true</AutoVisible>
                </Lifecycle>
                <UI>
                    <Type>Panel</Type>
                    <Menu>NodeJS SAMPLE PANEL</Menu>
                    <Geometry>
                        <Size>
                            <Height>540</Height>
                            <Width>600</Width>
                        </Size>                       
                    </Geometry>
                </UI>
            </DispatchInfo>
        </Extension>
        <Extension Id="com.my.localserver">
            <DispatchInfo>
            <Resources>
                <MainPath>./client/localServer.html</MainPath>
                <CEFCommandLine>
                    <Parameter>--allow-file-access</Parameter>
                    <Parameter>--allow-file-access-from-files</Parameter>
                    <Parameter>--enable-nodejs</Parameter>
                    <Parameter>--mixed-context</Parameter>
                </CEFCommandLine>
            </Resources>
            <Lifecycle>
                <AutoVisible>false</AutoVisible>
            </Lifecycle>
            <UI>
                <Type>Custom</Type>
                <Icons />
            </UI>
            </DispatchInfo>
        </Extension>
    </DispatchInfoList>
</ExtensionManifest>

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Your First Fullstack Panel</title>

    <script>
            console.log(" console log in index.html test " );
        </script>
</head>
<body>
    <!-- Simple HTML UI elements to get us started. -->
    <h1>Your First Full Stack Panel</h1>
    <button id="import-button">Import from external server</button>

    <!-- Add you dependencies here -->
    <script src="../lib/jquery-1.9.1.js"></script>
    <script src="CSInterface.js"></script>
    <script src="index.js"></script>
</body>
</html>

index.js

/* Create an instance of CSInterface. */
var csInterface = new CSInterface();

/* Load your server extension */
csInterface.requestOpenExtension("com.my.localserver", "");

/* Make a reference to your HTML button and add a click handler. */
var openButton = document.querySelector("#import-button");
openButton.addEventListener("click", importDoc);


if (typeof(require) !== 'undefined') {
    alert("Node.js is enabled");
} else {
    alert("Node.js is disabled");
}

/* Get the path for your panel */
var extensionDirectory = csInterface.getSystemPath("extension");

function importDoc() {
    /* Make sure to include the full URL */
    //https://www.countryflags.io/be/flat/64.png //Test url, this one returns a success, but doesn't execute server code?
    console.log("Function: importDoc()");
    console.log("extensiondirectory = " + extensionDirectory);
    var url = "http://localhost:3200/import"; //Port 8088 atleast returns "Not Found"-error instead of nothing, but that might be becuase of the .debug port.

    console.log("communicating with server");
    /* Use ajax to communicate with your server */
    $.ajax({
        type: "GET",
        url: url,
        headers: {
            "directory": extensionDirectory
        },
        success: response => {
            /* Use the ExtendScript function to display the downloaded file */
            console.log("SUCCESS IN RESPONSE");
            csInterface.evalScript(`openDocument("${response}")`);
        },
        error: (jqXHR, textStatus, errorThrown) => { 
            console.log(jqXHR);
            console.log(" ///textstatus= " + textStatus);
            console.log(" /// errorthrown= " + errorThrown);
            alert(errorThrown, jqXHR.responseJSON);
        }
    })

}

localserver.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script>
        console.log(" ============== localserver.html ================= " );
        console.log(__dirname + + '/server/main.js');
        /* This script uses cep_node to start the Node.js server located at '/server/main.js' */
        var localServer = cep_node.require(__dirname + '/server/main.js')();
    </script>
    <title>Import Example App</title>
</head>
<body>
</body>
</html>

server/main.js

/* npm Modules */
const express = require("express");
const app = express();
const request = require('request');
const http = require('http');
const path = require("path");
const bodyParser = require("body-parser");
const fs = require('fs');
const httpServer = http.Server(app);

console.log("main.js code started");

module.exports = run

function run(){
    console.log("//////////////////////////////////////")
    console.log("SERVER CODE")
    var port = 3200;
    var hostname = "localhost"

    /* Start the server */
    httpServer.listen(port, hostname);

    /* Middlewares */
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ limit: '50mb',extended: true }));
    app.use(express.static(path.join(__dirname, "../client")));

    /* /import route that can be hit from the client side */
    app.get("/import", (req, res, next) => {

        console.log(" ========================= app.get ===========================");
        /* Get the directory path from the header and name the file */
        var path = req.headers["directory"] + "/placeholder.png"

        /* This is an example URL */
        var uri = "http://via.placeholder.com/350x150";

        /* write a helper function to download the image and save it */
        var saveImage = function(uri, filepath, callback){
            request.head(uri, function(err, res, body){
                request(uri).pipe(fs.createWriteStream(filepath)).on('close', callback);
            });
        };

        saveImage(uri, path, function(){
            /* Send the path back to the client side */
            res.status(200).send(path)
        });


    });
}

host/index.jsx

// function openDocument(){
//     var fileRef = new File("~/Downloads/MyFile.jpg");
//     var docRef = app.open(fileRef);
//     }

function openDocument(location){
var fileRef = new File(location);
var docRef = app.open(fileRef);
}

Is there something blatantly ovious I'm doing wrong? Does this have something to do with the wrong version numbers in the manifest.xml? I really don't know why the server wouldn't even start or give any feedback seeing as nodejs itself is definitely enabled, any help would be appreciated.


Solution

  • There's a comment on the article which was originally posted here:

    https://community.adobe.com/t5/premiere-pro/cannot-get-csinterface-to-open-extension-server-invisibly-alongside-panel/td-p/10437661 by sven-vm

    He says replace:

    <UI>
        <Type>Custom</Type>
       <Icons />
    </UI>
    

    with

    <UI>
      <Type>Custom</Type>
      <Geometry>
        <Size>
          <Height>600</Height>
          <Width>600</Width>
        </Size>
      </Geometry>
    </UI>
    

    This worked for me.