Publishing Visual Studio Online extensions within the preview explored the publication process of an extension … but how do we get there? In this series we cover the lifecycle of an extension we are working on, and point you in the right direction for more information.

Explore and bookmark the documentation

• Before you start you should explore these vso-extension-samples and peruse this overview documentation.
• Ensure what you are thinking of building is not already available in the Visual Studio Online Market service.

Create a skeleton extension

• To make your life a lot easier and achieve consistency across your extension codebase, install the Visual Studio Online Extension Project Template, created by Josh Garverick.
• Create your extension skeleton:
  

 … and watch this Channel9  demo videoto get an understanding of what was generated by the template.

Tweak the manifest to suit your (at this stage) assumed requirements

• Edit the generated vss-extension.json manifest file.
• Update the generated values for the publisher, extensionId, name, description and the baseUri as needed:

"publisher": "demo-publisher",
"extensionId": "almrangers-vsoextensions-SurfaceOwner",
"name": "Surface Owner of a file",
"description": "This is the extension simplifies the process of determining ownership",
"baseUri": https://localhost:44300/,

Explore the contribution(s)

The action starts with the user selecting one of your contribution points.

• Peruse contribution model for an overview and contributions reference for the details.
• We will probably be adding menu actions, but until we have the storyboard and requirements (next post) we will add a simple hub to be able to build and test.
• Return to the manifest and a test contribution and the referenced html file following the add a hub walkthrough:

"contributions": [
         {
             "id": "Surface-Owner",
             "type": "ms.vss-web.hub",
             "description": "Adds a 'Hello' hub to the Code hub group.",
             "targets": [
                 "ms.vss-code-web.code-hub-group"
             ],
             "properties": {
                 "name": "Hello",
                 "order": 99,
                 "uri": "action.html"
             }
         }
     ]

• How to: Create a custom toolbar menu in a VSO extension is an excellent read on how to implement a contribution point.

OK, so you want to click F5 in VS IDE

Once we have published and installed our extension in our VSO account and team project collection, we can verify that the skeleton framework is sound.

• We see our basic index page when we click F5 in Visual Studio:
  
• When we go to our VSO account, we see our contribution point:
  
• We can even click on our new hub extension:
  

… but, we first need to define the scope of our extension before we proceed. Handing over the keyboard to our storyboard and UX master, Anisha Pindoria .

Coming up …

• Explore the “Surface Owner” VSO Extension – …
  • 2. Fix the scope using a storyboard
  • 3. Prepare the UX
  • 4. Build and debug the extension
  • 5. Back to publishing the code and the extension