Launch – Make an Extension – Setup

Welcome to part 1 of our mini series of “Make a Launch Extension“. This part is about the setup.

There are (or will be) parts on coding, debugging, and eventually on publishing the extension..

node.js / npm

Before you can start developing a Launch Extension, you need to install node.js. I will not go into any details on that. It is a) pretty easy, and b) thoroughly documented already.

Since you are (by definition — I write this blog, I make the rules) a developer, I will presume you know more than me about Javascript, and you’re probably on a first-name basis with all node.js developers, anyway.

Scaffolding

As mentioned in the overview, extensions follow a format, based on CommonJS modules. So there are a bunch of JSON files that you need to provide.

The easiest way to get to a valid structure quickly is to follow the Quickstart and use the scaffolding tool.

Every new extension must be “scaffolded” with the following commands:

	md sample_dir
	cd sample_dir
	npm init
	npm install @adobe/reactor-scaffold --save-dev
	node_modules/.bin/reactor-scaffold

Replace “sample_dir” with something meaningful, of course.

You will have to provide some information on npm init and during the actual scaffolding.

The part where it asks you about what exactly your extension will contain is a bit different.

Use the cursor up and down keys to highlight the element you want (“Add a data element type”), then use enter to select. We’re only adding one element, so next highlight “I’m done” and hit enter again.

The tool will then run and hopefully not spit out any errors.

It’ll create a folder structure as follows:

In our case, because we’re building an extension that provides a Data Element, the important things can be found within the src\lib\dataElements and src\view\dataElements folders. You will work a lot with the JS and HTML file(s) in these two folders.

Did you see that the file names here represent the name you gave the scaffolding tool?

Both, the JS and HTML files, are named after that.

extension.json in the root folder of your extension contains meta data about your extension, like the name and version. You will likely touch that file every now and again, at least to update the version.

The next article will talk about what you need to do to write the actual code.

For now, we have everything we need, all files in place, and a valid structure.

Optional art work like icons may apply, of course.