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.

[screenshot]
Successful run of scaffolding tool
It’ll create a folder structure as follows:

[screenshot]
Folder structure generated by scaffolding tool
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?

[screenshot]
Data Element name in scaffolding tool
Both, the JS and HTML files, are named after that.

[screenshot]
Name of generated JS file
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.

3 thoughts on “Launch – Make an Extension – Setup

  1. Pingback: Launch Extensions – Overview – Web Analytics for Developers

  2. Pingback: Launch – Make an Extension – Coding – Web Analytics for Developers

  3. Pingback: Launch – Make an Extension – Debugging – Web Analytics for Developers

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.