Click here to Skip to main content
15,395,390 members
Articles / Productivity Apps and Services / Sharepoint
Tip/Trick
Posted 6 Jan 2018

Tagged as

Stats

8.7K views
1 bookmarked

Deploy an SpFX (.sppkg file) add-in via CSOM to on-premise SP2016

Rate me:
Please Sign up or sign in to vote.
1.00/5 (1 vote)
7 Jan 2018CPOL1 min read
CSOM trick & code to deploy a .sppkg file to on-premise SharePoint 2016

Introduction

Microsoft ALM API (https://docs.microsoft.com/en-us/sharepoint/dev/apis/alm-api-for-spfx-add-ins) only works on O365 to SpFx add-in deployment via code. "LoadAndInstallApp" method works fine for ordinary app deployment (SP2013 era) to SP2016 (on premise) but it doesn't work for SpFx add-in.

Background

I had authored an automated tool to facilitate SharePoint site provisioning & deployment of sever side webparts on SP2010/2013 & O365 using CSOM. Recently, I started developing SpFx add-ins for a client & I wanted to enhance that tool for .sppkg package deployment too. Only problem, Microsoft's released ALM API (for automated Spfx deployment) does not work on SP2016, it only works on O365, leaving us with SP2013 era "LoadAndInstallApp" method. Although, this method does not work with the .sppkg file we produce with

gulp package-solution

command. In order to make .sppkg file compatible with "LoadAndInstallApp" method, we need to make some modifications to AppManifest.xml file within .sppkg file. I added an empty "StartPage" node after "Title" node & an empty "Internal" node nested within "AppPrincipal" node.

Using the Code

The first step is to upload the .sppkg file to App Catalog as is. You will write the code as you upload a document to any other SharePoint library. App Catalog is no different in this regard.

The second step is to deploy the app as you would deploy any SP2013 era app. The code to deploy the app is not related to this tip.

The third step is what this tip is about.

Code to augment AppManifest.xml file:

C#
Package package = Package.Open(appFullPath, FileMode.Open);
Uri manifestUri = new Uri("/AppManifest.xml", UriKind.Relative);
Uri partUri = PackUriHelper.CreatePartUri(manifestUri);
PackagePart part = package.GetPart(partUri);
Stream partStream = part.GetStream();
StreamReader reader = new StreamReader(partStream);
string content = reader.ReadToEnd();
if (content.IndexOf("<startpage>") == -1)
    content = content.Replace("</Title>", "</Title><startpage>/</startpage>");
if (content.IndexOf("<appprincipal>") == -1)
    content = content.Replace("</Properties>", "</Properties><appprincipal><internal></internal></appprincipal>");
partStream.Position = 0;
partStream.SetLength(0);

StreamWriter writer = new StreamWriter(partStream);
writer.Write(content);
writer.Flush();
package.Close();

Code to deploy the spfx add-in to a site collection is as follows:

C#
using (var packageStream = System.IO.File.OpenRead(appFullPath))
            {
                var appInstance = context.Web.LoadAndInstallApp(packageStream);
                context.Load(appInstance);
                context.ExecuteQuery();
                return appInstance;
            }     

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

No Biography provided

Comments and Discussions

 
QuestionSPFx web part fails to load on a page Pin
BurstX4-Feb-18 21:26
MemberBurstX4-Feb-18 21:26 
Hi, Muhammad, thanks for the idea.

But when I update the manifest with
<AppPrincipal><Internal/></AppPrincipal>
XML inside the .sppkg file, and then add my SPFx package (.sppkg) to a site via
LoadAndInstallApp()
method and then edit a page on the site and add my SPFx web part on the page, I see the error in the browser console:
Failed to render client side web part. Id: [965c0cf5-c454-4fde-8af4-4ce9c28a61cb], Manifest: [<NULL>], Error Details:: [Microsoft.SharePoint.ClientSideComponent.SPClientSideFrameworkException: Web Part 965c0cf5-c454-4fde-8af4-4ce9c28a61cb failed to render as manifest is not found

Do I do anything wrong (order of the steps) or do I miss something?

modified 5-Feb-18 5:25am.

AnswerRe: SPFx web part fails to load on a page Pin
sumaiyya17-Mar-18 18:42
Membersumaiyya17-Mar-18 18:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.