Skip to main content
VespaKoen
Participating Frequently
December 6, 2017
Question

Announcing Bundlers for CEP and ScriptUI extensions with live reload capabilities

  • December 6, 2017
  • 2 replies
  • 2072 views

Hello everyone!

I am Koen Schmeets and am making extensions for Adobe After Effects.

Over the last year I have been making tools that I use to bundle and package CEP and ExtendScript / ScriptUI extensions.

I finally had some time to create some starter (example) projects for them and publish it all online over here.

What is good about it:

- It uses TypeScript which has very good support to "transpile" your code all the way back to (the very old) ES3 JavaScript runtime. This allows you to write very modern JavaScript and have it run without problems in the ExtendScript runtime, it also allows you to add types to your code and get autocompletion when using VSCode (make sure to install / configure the right typings though) the extendscript-starter comes with AE typings by default.

- It has live reload capabilities for CEP and ScriptUI / ExtendScript code, for the CEP panel it even has "hot module reloading" so it only updates the files that changed, the cep-starter comes with React / Redux and this is where it really shines, you get near instant updates in your panel when saving your file.

- The packager can create native macOS and Windows installers, avoiding distributing ZXP files which can be hard to install for your customers (sidenote: adobe is working on a new exchange platform so this might become unnecessary in the future)

- There is more good stuff to explore inside

What's not good about it:

- The tools are macOS only right now, but I have made a bit of an effort during development to make sure adding Windows support in the future is going to be easy.

- The documentation is also a bit lacking so it's only "for the daring" at this point.

- The extendscript-starter panel is built for (and only tested on) After Effects, I am not sure how well ScriptUI works cross-apps, however, the bundler doesn't mind what app it's going to run in, so just throw out the example UI code and it should work everywhere.

- The CEP example uses TypeScript, React & Redux, this might be hard to wrap your head around if you are new to JS programming

Hopefully it's useful to anyone!

Looking forward to any feedback and I am happy to help with any issues you experience!

- Koen

Message was edited by: Koen Schmeets I removed a link to see if it my post will get approved with this change, is there any way I can get a heads up why the post was rejected?

This topic has been closed for replies.

2 replies

Trevor:
Legend
December 6, 2017

Yep look interesting, thanks for posting.

As a rule the forum tends to target post by humans. Particularly ones that contain either words or images.

Alex White
Legend
December 6, 2017

Congrats Koen!

This is so awesome that you finally did it and shared with the community!

Quick question about the installer. It installs signed extensions or enables debug?

VespaKoen
VespaKoenAuthor
Participating Frequently
December 6, 2017

Hey Alex! Glad you like it!

This installer does no hacking, it packages up a .zxp and the ExManCmd utility and then simply runs that while installing.

I am still waiting to get a code signing certificate (it's a long and boring process) and then I will update our extensions to use this packager.

I have not used this in production yet, so beware but from my testing it seems to work nice.

see: cep-packager/postinstall.ts at master · adobe-extension-tools/cep-packager · GitHub

and: cep-packager/nsis.conf.ts at master · adobe-extension-tools/cep-packager · GitHub