On


In my previous post  I provided a full walkthrough to create a Comment SharePoint Addin, In this post I will convert the existing Addin to a nuget package so we can add it to any newly create SharePoint addin via visual studio template and at the end we will try to create a minimal Angular seed for SharePoint Add-in by removing all non-generic components.
  1. First let's  create the folder strucure for the nuget package
    1. Content Folder
    2. Tools Folder
    3. Nuget Spec file (generate it using nuget spec)
    4. gulp definition file for packaging the nuget package
  2. Open the folder using VSCode Let's update the nuget spec file , I'm going to skip the usual package metadata stuff and I will jump to the files, as you can see there is two different types of files , some PS scripts under tools folder and some assets we need to add to the SharePoint Add-in.
Adding the files using nuget spec file tags won't do the trick as it need to be copied to SharePoint Add-in web site as the addin is being installed. The only way of doing this is to create a new Module element and add files to it.  Most of the code written to automate these steps is added to the init.ps1 file. 
as you can see in the nuget spec file snapshot below, all the files has been copied not to the content folder but to the package folder as a staging location. Afterwards, the PowerShell script under the tools folder will read these files from the package folder and copy it to the appropriate container(s).


The only files copied directly to the destination content folder is the files under pages folder because there is a module element defined already for the SharePoint Add-in pages.

Init.ps1

As mentioned earlier, this file is responsible of creating the necessary containers for the files to be copied to (SharePoint Module elements). The script kicks off by trying to get the project item template which represents a Module element. afterwards, it adds two different containers:
  1. Apps : container for all angular goodness  
  2. Assets: another container for all the needed CS
Note: always reference the Item template by the item template name not the folder name, if you struggle to find it open the .vstemplate file and use the exact name.

The second trick is to create the SharePoint artifacts (Lists and App Part) needed by the app, from the previous post I've exported the Comment List as a Project Item Template and using the same technique I've added it to the new SharePoint Add-in project. Similar thing is done with the App Part artifact.



Note: One Important thing to notice is , If I created the module elements and try to copy the files via nuget spec file <files> section it won't work , I will have some files under the module element folder structure but they aren't included in the module elements definitions (element.xml) so it won't be copied to the SharePoint Add-in app web site.

In a nutshell the main steps are:
  1. Create Containers using Module Project Item Template
  2. Copy the files to the template root
  3. Copy the files via PowerShell script from the template root to the appropriate location.
Building the nuget package using gulp

Create a new gulpfile  and define a task that runs the command line nuget pack.


now if you run gulp build the nuget package will be created as below:

To test this nuget package , simply get the source code from here, and build the sample then add the build destination folder to your nuget packages source(s) then create new SharePoint Add-in and add the package to it.


a minimal version with a simple Angular goodness will be published to nuget.org soon.