PnP-SP-Starter-Kit Hints and Tips

If you are like me, you followed all of the updates at SharePoint Conference North America 2018 and you heard about an awesome new starter pack created by the PnP Team, and you couldn’t wait to install it and deploy it into your environment.  You can find the Starter Kit here.

Please note, this blog post isn’t official documentation,  nor am I a part of the PnP team… but these are just some issues I have seen as I’ve started exploring.

Before going any further

Before you follow the rest of this blog, please note that the PnP team has updated some of the deployment documentation. I highly recommend running through this documentation to make sure your environment is prepared for the PnP Starter Kit.

Documentation found here and tenant settings here.

Foreword

What is important to know is that this solution is an all encompassing solution. It provides you with web parts, customizers, site designs, MSGraphClient configuration, a hub site, lists, content types, a sample LOB application and more. This might be the most exhaustive example of modern SharePoint provisioning I have seen. There really is an impressive amount of work that was put into this! Kudos to the team and community for putting this together.

A few Hints

Downloading the Project

Downloading the project is quite simple, assuming you’ve developed SPFx before. If you haven’t, you may want to spend some time setting up your development environment.

To download the project, navigate to the starter kit from the link above. You can clone this repository to your local machine using the Github UI.

PnpStarterKit

Or, you can use the following git commands

git clone https://github.com/SharePoint/sp-starter-kit/

 

If you’d like to know how the starter kit gets provisioned, you’d want to look into the provisioning folder. You’ll find a collection of PowerShell scripts which will help you deploy the starter-kit. Before you go any further, please read the documentation on GitHub and make sure you have configured your environment and followed the deployment procedures.

Update your PnPPowerShell module

You’ll want to update your PnPPowerShell module to the latest version. In order to do this, open up Powershell and execute the following command.

Update-Module SharePointPnPPowerShell*

Deploy the starter kit

  1. Make sure you’ve updated your PowerShell module above.
  2. Make sure your development environment is configured correctly here.
  3. Make sure your tenant is configured following this page.
  4. Make sure your tenant is “targeted release for everyone”.
    1. Wait 24 hours after enabling this
  5. Make sure your tenant has an app catalog
    1. Wait 24 hours after creating one
  6. Make sure you are a term store administrator.

To deploy the starter kit, you’ll need to upload the sharepoint-portal-showcase.sppkg from the /package folder to your app catalog. To learn how to upload files to your app catalog, follow this link.

Then open up Powershell and navigate to your provisioning folder. Once inside the folder, execute the following command to start the provisioning process.

.\deploy.ps1 -TenantUrl https://YourTenant.sharepoint.com -SitePrefix Demo

The SitePrefix parameter is for the prefix of the newly created site collections.

When you execute this command, you’ll notice a ton of actions happen. The solution is going to create a couple demo sites for you. “Demo_Portal”, “Demo_hr”, “Demo_Marketing”. The script is going to create the Demo_Portal site as a hub site, and connect the other two sites to it.

The script will install the app package you previously uploaded in the app catalog into the sites that are being created. It will then create two site designs for Team sites and for a Communication site, and then create new navigation elements for your hub sites.

The deployment script will also create a handful of pages for your Portal site and automatically provision the web parts to the page. This is just the start… the deployment script actually provisions and exhaustive set of functionality, however this post isn’t about all of the functionality. 🙂 Have a look yourself and see what it provisions!

Deployment Failed

When upload the .sppkg file to the AppCatalog, you may receive an error stating “Deployment failed”. Just delete the .sppkg file and re-upload the package to the app catalog!

Error in application

When uploading the .sppkg file into the App Catalog, you may receive this error. If you had just recently created your App Catalog, you may need to wait up to 24 hours for the change to fully propagate successfully. So wait 24 hours and try to upload the .sppkg file again!

Apply-PnPProvisioningTemplate Error #1

Apply-PnPProvisioningTemplate : Object reference not set to an instance of an object. At C:\Users\beaucameron\spfx\sp-starter-kit\provisioning\deploy.ps1:96 char:5

This will likely be the first error you see when trying to deploy the solution. Make sure the .sppkg file is already in the app catalog. If you haven’t manually deployed it, please do so now by following in the instructions at the top of this blog. If you haven’t created an App Catalog in your tenant, you will also need to do this.

If you just recently created the App Catalog, you may have to wait up to 24 hours for it to be completely functional.

App Package Not Valid

Apparently some people have been unable to deploy the solution to the app catalog and receive an error that the app package is not valid. Garry Trinder mentioned this issue, and so far others have confirmed that it is because API Management configuration is missing from your admin center. If this error happens for you and you are also missing API Management from the new Admin Center could you let me know (confirmation)?

In order to add API Management to your admin center, you must enable “Targeted Release” for your tenant, instead of specific users. It may not be immediate and may take a few hours for the changes to propagate to your tenant. When doing this, you should do it on a non-production tenant.

New-PnPSite Error

If you are receiving  the following error:

New-PnPSite : {"d":{"Create":{"__metadata":{"type":"SP.Publishing.CommunicationSiteCreationResponse"},"SiteStatus":3,"SiteUrl":""}}}

Could you confirm if you have had previously deployed the starter-kit and then subsequently deleted the site collections and re-deployed? If so, could you let me know. It appears that there may be an issue with the New-PnPSite command when executing against a deleted communication site.

I have repro’d this error by running the deploy.ps1 using no -SitePrefix parameter. I then deleted the sites that were created, and re-ran the deploy.ps1. Even the though the sites do not exist, the New-PnPSite command cannot create a new site.

Try re-executing the command but modifying it by adding a new SitePrefix.
 .\deploy.ps1 -TenantUrl https://YourTenant.sharepoint.com -SitePrefix NewSitePrefix

If you’d like to re-use an existing SitePrefix, you can a couple PowerShell commands to clean up the deleted sites. Per @Andreas (thanks!)

//permanently delete all deleted sites
Connect-SPOService -Url “SharePoint Admin Tenant Url”
Get-SPODeletedSite | foreach { Remove-SPODeletedSite -Identity $_.Url }

//Remove hubsite associations
Get-SPOHubSite | ? {$_.Title -eq “PnP SP Starter Kit”} | Unregister-SPOHubSite

A service principal with the name SPFx-LOB-Function could not be found / a service principal with the name SPFx-LOB-WebAPI could not be found.

Inside API management in the admin center, you may find that when you are trying to approve the API permissions you receive this error on the LOB-Service application. I believe the reason is because the LOB service API doesn’t get provisioned with the deploy.ps1 script. So these service principals aren’t a part of your tenant’s AAD.

If you look inside your repo/folder structure, you’ll see a folder named sample-lob-service, which holds a Visual Studio solution for a sample WebAPI project. This solution needs to be deployed to your Azure environment, and two service principals have to be created with two permissions scopes:

  • a default “user_impersonation” scope
  • a custom “Customers.Read” scope

The service principals needs to be created and given permission to your sample-lob-service API.

Long story short – You need to register a resource in Azure for this WebAPI, subsequently deploy it and configure the service principals. There isn’t any documentation yet about setting this up. As this is a new starter-kit… documentation is still being created by the PnP Team. I suspect more information on how to setup/configure/deploy this will be coming in the future.

My navigation isn’t showing up

One of things you may notice after deploying the starter kit, is that the hub navigation doesn’t work. In general, hub navigation is a bit finicky but a simple way to make the navigation show up is by editing the navigation and cancelling out… or just wait for it to fix itself (caching).

navigation.png

Personal Web Parts aren’t loading

If you navigate to the personal page in the navigation, it brings you to a really awesome page with a bunch of SPFx web parts on it that utilize Microsoft Graph. These web parts include:

  • Upcoming Meetings,
  • My Tasks
  • Personal Contacts
  • Personal Email
  • Recent Documents
  • Recent Sites

You may find the personal web parts aren’t loading correctly, here are some possible reasons.

 

Access is denied. Check credentials and try again.

accessdenied.png

You may find that your personal web parts, aren’t loading at all and showing you that your credentials are invalid. This is because (at least in my environment), you need to explicitly give permission to the SPFx web parts to have access to the Microsoft Graph. If you navigate to the new admin center, https://yoursite-admin.sharepoint.com/_layouts/15/online/AdminHome.aspx on the left hand side, select API Management under Advanced. You’ll see a list of pending approvals for the new applications. Approve this request and your web parts will start working!

APIManagement.png

 

User login is required

If you’ve configured the permissions in API management, you may find that the web parts still aren’t loading.

User login is required

It appears there is a bug (race condition?) that has effected acquiring a token for the AadHttpClient/MSGraphClient. Creating a new page and/or workbench, may allow you to see the web part temporarily. However, the bug/issue still exists and is linked below.

Emails.png

I found there is a support ticket on this issue which can be found on GitHub, issue 1810.

I have no Alerts

One of the cool application customizers deployed with this starter pack is a top header that shows configurable alerts. This is one of the only lists that doesn’t pre-populate with data through the deployment process. If you’d like to test it out, navigate to site contents and add some alerts to the Alerts list!

Alerts

Once you have, you should be able to refresh your page see the alerts show up on your modern pages!

AlertDialog

 

More…

If you’d like to know more of the features that are included in the starter kit, Robert Shouten has made a great post outlining the web parts and functionality here.

Disclaimer

Once again, I’d like to re-iterate that this isn’t any official documentation and that more documentation is linked at the top of this post.

Thanks to the PnP team and Vesa for all their continued effort. Sharing is caring.

25 thoughts on “PnP-SP-Starter-Kit Hints and Tips

  1. Beat Grüring May 25, 2018 / 7:29 am

    Thank you for your hints. I have one more for the “My Links” feature. You need to add the property “PnP-CollabFooter-MyLinks” to the user profile to be able to create/edit personal links in the footer navigation. I added it as a string property with size 3600. /_layouts/15/tenantprofileadmin/manageuserprofileserviceapplication.aspx

    Liked by 1 person

    • Beau Cameron May 26, 2018 / 9:45 am

      Thanks for the heads up! I’ll definitely update my post to include that. Appreciate the feedback.

      Like

  2. westerdaled June 13, 2018 / 5:36 am

    Hi ran into a few issues last night trying to deploy this,

    The status of the of API Management in the tenant can be verified with the url: https://{yourdomain}-admin.sharepoint.com/_layouts/15/online/AdminHome.aspx#/webApiPermissionManagement

    Hence, I had to re-uploade the PKG this morning which is now looking good

    During the deployment I had this error – think it’s down misspelling my fiendlishly long PW.
    Hence, can I re-run the deployment script or will I need to retract a load of stuff and or delete some the created site collections.

    resource.
    At D:\Dev\Pnp\sp-starter-kit-master\provisioning\deploy.ps1:95 char:5
    + Apply-PnPProvisioningTemplate -Path “$PSScriptRoot\solution.xml” …
    + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo : WriteError: (:) [Apply-PnPProvisioningTemplate], ServerUnauthorizedAccessException
    + FullyQualifiedErrorId : EXCEPTION,SharePointPnP.PowerShell.Commands.Provisioning.ApplyProvisioningTemplate
    Applying template to portal
    WARNING: You specified to remove existing content types for the list with url
    ‘/sites/VoltOnlineDemoportal/Lists/Alerts’. We found a list with the same url in the site. In case of a list

    Like

    • Beau Cameron June 13, 2018 / 7:34 am

      Hi there, it does sound like you may have typed in the password. You should be able to re-run the deployment script, without installing everything. The Apply-PnPProvisioning template may show some comments about lists already existing and such, but that won’t be a problem. The deployment scripts checks to see if sites are already created and such. let me know how it goes.

      Like

  3. westerdaled June 13, 2018 / 3:32 pm

    Hi better progress this time. I did get a

    Apply-PnPProvisioningTemplate : Access denied. You do not have permission to perform this action or access this resource.

    However, I see this with the GDPR hub so I added my account as the site owner ( tenantUrl) and term store admin . One thing that will amuse you is that I seem to have change the site prefix everytime I have run the script and the result is 3 HR and 3 MK and 3 hub sites … sort of sourcers apprentice situation. I will do more checking based on your excellent post tomorrow.

    Like

    • Beau Cameron June 13, 2018 / 3:56 pm

      Yea I have seen the SitePrefix issue. There is another ticket on GitHub for this issue, when it gives you an error message on New-PnPSite. I updated my post earlier to reflect this. However, I only had the issue if I had previously deleted the sites first and then tried to run the scripts using the same prefix. Was that the scenario for you as well? It appears there is a bug with creating new sites after you’ve deleted a communication site. GitHub ticket here https://github.com/SharePoint/sp-starter-kit/issues/19.

      I’ve also seen where I run the deployment scripts under ‘x’ account. Then subsequently try to run it using ‘y’ account, even if the y account is an admin, it didn’t have access to the sites and it would get an access denied as well.

      Again, I’m not the PnP Team so I’m exploring it just as much as you 🙂 Let me know if there is anything in my post you think I should update that will help others.

      Like

    • Andreas June 18, 2018 / 6:57 am

      You could also use these 2 commands:

      Connect-SPOService -Url “SharePoint Admin Tenant Url”
      Get-SPODeletedSite | foreach { Remove-SPODeletedSite -Identity $_.Url }

      This will permanently delete all deleted sites.

      To unregister all existing hub sites, which is not done at the same time as deleting the site you have to run:

      Get-SPOHubSite | ? {$_.Title -eq “PnP SP Starter Kit”} | Unregister-SPOHubSite

      Like

  4. Andreas June 18, 2018 / 7:36 am

    Hey Beau,

    the navigation edit/cancel trick is not working for me. Tried to manually reconnect the sub sites with the hubsite, but Navigation is not setup. Do you have another idea on how to create the navigation manually?

    Like

    • Beau Cameron June 26, 2018 / 10:43 am

      Hey Andreas, sorry I missed this. Yea it doesn’t always work. So much of the hub site functionality uses caching… sometimes it takes a while to propagate and pull from cache. is it showing up for you now?

      Like

      • Andreas June 26, 2018 / 11:41 pm

        Hey, just checked again on some starter kit I created a week or two ago, but nothing changed. I’m also facing the “Get-PnPNavigationNode returns null” and feel like the issue is somewhere within deployment of the pnp template xml. But still no clue how to do it manually.

        Like

      • Beau Cameron June 27, 2018 / 9:10 am

        Yea that usually happens after a failure in the Portal.XML provisioning (provisions the site scripts/site designs/navigation/hub etc…). Are you a tenant admin?

        If so, you can try and re-run just the portal.xml provisioning. Apply-PnPProvisioningTemplate -Path “yourpath\portal.xml”

        Like

      • Andreas June 28, 2018 / 2:54 am

        I tried to run Apply-PnPProvisioningTemplate again, but I just remembered that I got an issue with that earlier, but I didn’t think it was much of a deal.

        Apply-PnPProvisioningTemplate : Culture is not supported.
        Parameter name: name
        en-EN is an invalid culture identifier.
        At line:1 char:1
        + Apply-PnPProvisioningTemplate -Path .\portal.xml -Connection $connection
        + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        + CategoryInfo : WriteError: (:) [Apply-PnPProvisioningTemplate], CultureNotFoundException
        + FullyQualifiedErrorId : EXCEPTION,SharePointPnP.PowerShell.Commands.Provisioning.ApplyProvisioningTemplate

        I’m not sure if I should create an issue with sp-starter-kit or rather with PnP-PowerShell

        Like

      • Beau Cameron June 28, 2018 / 6:14 am

        Weird. I haven’t seen that yet… I’ve deployed the starter kit maybe 20-25 times.. ha Is your environment language in English?

        Like

      • Andreas June 28, 2018 / 6:21 am

        I’m using an english tenant from https://demos.microsoft.com because every other tenant I have access on is german and you know how good multi language support is until now 😉

        I haven’t created a separate issue on GitHub but I’m pretty sure I talked about it somewhere. Can’t be a very common issue, because I can’t find a single reference to it.

        Like

      • Andreas June 28, 2018 / 6:48 am

        One more thing I just noticed which might be related to my navigation issue maybe?

        Apply-PnPProvisioningTemplate -Path “$PSScriptRoot\portal.xml” -Parameters @{“WeatherCity” = $WeatherCity; “PortalTitle” = “$Company Portal”; “StockSymbol” = $StockSymbol; “HubSiteId” = $HubSiteId; “Company” = $Company} -Connection $connection

        HubSiteId is handed over as an parameter but I can’t find any reference to this in the documentation for Apply-PnPProvisioningTemplate and it’s neither used within the portal.xml so I really don’t know where the magic is happening.

        Like

      • Beau Cameron June 28, 2018 / 9:12 am

        HubsiteId is created a few lines above. It tries to register your portal as the Hub site, and then gets the Hub site Id. If you portal site failed at one point creating the hub site, this ID would be null.

        # Register the site as the hubsite
        $isHub = Get-PnPHubSite -Identity $siteUrl[0] -ErrorAction SilentlyContinue -Connection $connection
        if ($isHub -eq $null) {
        Write-Host “Registering site as hubsite” -ForegroundColor Cyan
        Register-PnPHubSite -Site $siteUrl -Connection $connection 2>&1 | Out-Null

        }
        $HubSiteId = (Get-PnPSite -Includes Id).Id.ToString()

        Like

      • Andreas June 28, 2018 / 9:38 am

        I saw it’s created and set there, but I don’t see why it’s handed over to Apply Template. So stop this madness here in your comment section I can tell you that uninstalling every piece of PowerShell commandlet and software and installing everything from scratch solved my issues right now. I’ll continue to test it tomorrow, but in a last run I didn’t get any issues and the site looked fine!!!!

        Liked by 1 person

  5. hassan nawaz June 20, 2018 / 3:10 am

    I have the following issues while i running the code. and my footer and navigation not working

    1–Apply-PnPProvisioningTemplate : Access denied. You do not have permission to perform this action or access this resource.
    At D:\hassannawaz\sp-starter-kit-master\provisioning\deploy.ps1:95 char:5
    + Apply-PnPProvisioningTemplate -Path “$PSScriptRoot\solution.xml” -Connection …
    + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo : WriteError: (:) [Apply-PnPProvisioningTemplate], ServerUnauthorizedAccessException
    + FullyQualifiedErrorId : EXCEPTION,SharePointPnP.PowerShell.Commands.Provisioning.ApplyProvisioningTemplate

    2–Apply-PnPProvisioningTemplate : Culture is not supported.
    Parameter name: name
    en-EN is an invalid culture identifier.
    At D:\hassannawaz\sp-starter-kit-master\provisioning\deploy.ps1:123 char:1
    + Apply-PnPProvisioningTemplate -Path “$PSScriptRoot\portal.xml” -Parameters @{“We …
    + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo : WriteError: (:) [Apply-PnPProvisioningTemplate], CultureNotFoundException
    + FullyQualifiedErrorId : EXCEPTION,SharePointPnP.PowerShell.Commands.Provisioning.ApplyProvisioningTemplate

    3–Updating navigation and applying collab templates
    Get-PnPProperty : Cannot bind argument to parameter ‘ClientObject’ because it is null.
    At D:\hassannawaz\sp-starter-kit-master\provisioning\deploy.ps1:134 char:43
    + $children = Get-PnPProperty -ClientObject $departmentNode -Property Children
    + ~~~~~~~~~~~~~~~
    + CategoryInfo : InvalidData: (:) [Get-PnPProperty], ParameterBindingValidationException
    + FullyQualifiedErrorId : ParameterArgumentValidationErrorNullNotAllowed,SharePointPnP.PowerShell.Commands.Base.EnsurePro
    perty

    Cannot index into a null array.
    At D:\hassannawaz\sp-starter-kit-master\provisioning\deploy.ps1:138 char:9
    + $node = Add-PnPNavigationNode -Location TopNavigationBar -Parent $depart …
    + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo : InvalidOperation: (:) [], RuntimeException
    + FullyQualifiedErrorId : NullArray

    Cannot index into a null array.
    At D:\hassannawaz\sp-starter-kit-master\provisioning\deploy.ps1:138 char:9
    + $node = Add-PnPNavigationNode -Location TopNavigationBar -Parent $depart …
    + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo : InvalidOperation: (:) [], RuntimeException
    + FullyQualifiedErrorId : NullArray

    Like

    • Beau Cameron June 28, 2018 / 6:19 am

      Are you a Term STore Admin, Global Admin and do you have access to the AppCatalog in your environment?

      Like

  6. Mike Dumka August 6, 2018 / 3:48 pm

    Hey Beau, I am hoping you can help me as I am lost. I got to the point where the access was being denied to the personal web parts. I approved the API request like you said … but when I tried to approve the last 2 I get this error …

    [HTTP]:400 – [CorrelationId]:cd35829e-106a-6000-0aa4-eb7318c15798 [Version]:16.0.0.7925 – A service principal with the name SPFx-LOB-Function could not be found.
    Parameter name: resourceName

    These are the 2 requests I am trying to approve

    SPFx-LOB-Function
    SPFx-LOB-WebAPI

    Any help you can give would be greatly appreciated …

    Mike

    Like

    • Beau Cameron August 6, 2018 / 3:49 pm

      Hi Mike,
      That is an error you will always get (for now). The LOB application wasn’t been configured in Azure (where the resource will come from). You would have to manually build/deploy the LOB solution in Visual Studio, and create an application in Azure for it. As of right now, I would just let it go, until the PnP team comes out with the documentation for it.

      Like

      • Mike Dumka August 7, 2018 / 11:17 am

        Thanks Beau … I thought I was screwing something up. You have put my mind at ease 🙂 Have a great day and look forward to readying more of your stuff!

        Like

      • Beau Cameron August 7, 2018 / 3:33 pm

        Happy to help! Thanks for checking out the post 🙂

        Like

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 )

Connecting to %s