Launch – Make an Extension – Reloaded

Since the last article in my “Launch – Make an Extension” series (see Overview, Setup, Coding, Debugging, on a Mac), the ecosystem has evolved. There have been some small changes, and some big ones.

I want to talk about two of those today.

1. Using the provided packages has become easier, and
2. you can now upload your Extensions to an integration environment to test and then publish them.

There are other changes, of course, and some changes we are waiting for — a stable API.

Let’s start with a speedy refresher on how to setup for Extension development.

Setup (now easier)

I personally keep the code for my work on github, so I normally start by creating a repository on github.com, then go to my working folder (c:\dev\launch), then checkout that repository using git clone. You can alternatively just create a folder and start in there.

Install necessary modules

For development, you need a bunch of modules. Install them like so:

npm install --save-dev @adobe/reactor-scaffold @adobe/reactor-sandbox @adobe/reactor-packager @adobe/reactor-window @adobe/reactor-document

The latter two are not needed for your actual Extension, but I found that without them, accessing window or document would throw an exception in the sandbox. If your Extension uses cookies, you might want to add @adobe/reactor-cookie to the mix.

Did you note: I did not include running npm init this time. I don’t know any of this well enough to know whether that is wrong or ok. Have asked and will update this when I know.

Scaffold your Extension

Now you can scaffold your Extension.

It makes a lot of sense to think about what your Extension will contain/provide at this point! Will it provide an Event Type? An Action? Both? The scaffold tool will ask you these questions, so be prepared.

npx @adobe/reactor-scaffold

Here’s the output of my latest scaffold run, as an example.

Opening that folder in VS Code (I know! But I still write in Sublime. In fact, I’m writing this in Sublime right now!) will show you this:

The scaffolding has created the necessary structure, some files (a JS and an HTML, plus the extension.json config file, so to speak).

Onwards

From here on, everything from the other articles applies. You’ll be in a loop of developing and debugging in your sandbox, as before.

The big difference is that there is now an integration environment on launch-integration.adobe.com, on which you can go one step further: you can upload your Extensions there, and test them using Launch and a proper web site. The Getting Started Guide tells you how to do that.

On top of that, Private Extensions are Coming, which means you can create, test, and publish Extensions for your own organisation, just like that.

You should probably join the Slack channel (here is how).

If you wondered why I installed the @adobe/reactor-packager module above, you can probably guess by now: it takes your Extension and bundles everything into a zip file, which you can then upload into the Launch integration environment using the API.

I think most people use Postman for that, because it can easily handle authentication and uploading or patching of your Extension.

Once you’re done, you can see your Extension(s) in any Property that is enabled for Extension Development.

Private v Public

If you only built your Extension for yourself, you are done now. If, however, you want to make it publicly available (who wouldn’t?), there are some more things you have to do.

1. you need to make an icon, 512x512px PNG or JPG
2. you need to make a “Featured Image”
3. you need to register for the Exchange Program, on which your Extension will be featured
4. you’ll likely need some better content to describe your Extension
5. you need to keep in mind that once the Extension is public, there are things you can no longer do, see backwards compatibility

Everything done?

Then I’m looking forward to seeing your Extension(s)!