How to package and install the SharePoint hosted add-in to the live site

This post is part 3 of series “Create and deploy SharePoint Hosted add-ins”. Before reading this article, you may need to visit –
Part 1 – How to setup development environment to create SharePoint-hosted add-ins
Part 2 – Create a SharePoint hosted add-in

In this post, I will explain how to package and install SharePoint-hosted add-in to the live site. After you have created and tested your add-in on the Developer site as explained in Part 2 Create a SharePoint hosted add-in, we now need to package and install the SharePoint-hosted add-in. Please follow the steps below to achieve this –

Step 1 – Create an Add-in Catalog Site collection

You need to create add-in(or app) catalog site, if it doesnt exist already in your office 365 subscription.
In the SharePoint Admin Center, choose apps in the task-pane. You will see a page with the link that says “App catalog” as shown below –



When you click on this link, if the app catalog doesnt exist already then it will take you to the page that will allow you to create an app catalog site otherwise you will be directed to the already created app catalog site.

To create the app catalog, if it doesnt exist, on the Add-in/app catalog site page, choose OK. On the Create Add-in Catalog Site collection dialog, specify the title and web site address of your add-in catalog site. It is recommended that you include “catalog” in the title and URL to make it memorable and distinguishable in the SharePoint Admin Center.

Step 2 – Package the add-in and upload it to the catalog

  1. Open the Visual Studio solution, and then right-click the project node in Solution Explorer. Choose Publish.
  2. In the Publish pane, choose Package the add-in. The add-in is packaged and saved as an *.app file in the solution’s \bin\debug\web.publish\ folder.
  3. Open your add-in catalog site in a browser and choose SharePoint Add-ins in the navigation bar.
  4. The SharePoint Add-ins catalog is a standard SharePoint asset library. Upload the add-in package to it using any of the methods of uploading files to SharePoint libraries.

Step 3 – Install the add-in as end users do

Now you are ready to install the add-in to any sharepoint site in your office 365 subscription.

  1. Navigate to any website in the SharePoint Online subscription and open the Site Contents page.
  2. Choose add an add-in to open the Your Add-ins page.
  3. Find the Github add-in in the Add-ins you can add section and click its tile.image18
  4. Choose Trust It on the consent dialog. The Site Contents page automatically opens and the add-in appears with a notation that it is installing. After it installs, users can choose the tile to run the add-in.

Step 4 – Remove the Add-in

In order to continue enhancing the same SharePoint Add-in in Visual Studio, remove the add-in with these steps:

  1. In the Site Contents page, move the cursor over the add-in so that the callout button appears.
  2. Choose the callout button and then choose REMOVE on the callout.
  3. Navigate back to your add-in catalog site and choose SharePoint Add-ins in the navigation bar.
  4. Highlight the add-in and choose manage on the task bar just above the list, and then choose Delete on the manage menu.


Leave a Comment

Your email address will not be published. Required fields are marked *