SharePoint Starter Kit v2 – an overview

What is SharePoint starter kit V2?

A comprehensive solution showcasing packaging, solution deployment, provisioning and SPFx web parts to inspire and guide developers, business users and SharePoint Admins to create solutions on similar lines.

Why you should have a look at this?

This has been created by best people in this field (SharePoint, Microsoft 365) which means that code, design and relevance of the web parts are extremely good, all the web parts can be used in your tenant as is. You can learn and create your own ways to

  1. Package solutions
  2. Provisioning mechanism
  3. Coding guidelines, standards
  4. Build modern portals

How to get started?

If you want to install everything at one shot the steps are simple. I suggest to have a look first install it on development tenant and not the Production tenant, as it will upload lot of SPFx solutions and make changes so best is that you review it in a developer tenant. Based on your understanding you can plan to deploy it in Production.

  1. Prerequisites: There are some preparation steps which you need to before you install it as follows
  2. How to install?
Github SharePoint Starter Kit V2

Open PowerShell and excute this command

Connect-PnPOnline https://yourtenant.sharepoint.com

This will ask your User Id and Password, please use tenant administrator for this as it will be used to install the Starter Kit.

Then go to Provisioning folder in the source code you have downloaded from GitHub.

cd <<location>>

Then execute following command in PowerShell

Apply-PnPTenantTemplate -Path .\starterkit.pnp

The command might take 10-15 mins to execute and if all goes well three sites will be created.

You can watch a video to view complete process

Issues you might face

  • Exception while invoking endpoint: I encounter this issue while installing almost half way through the installation. Error message you might get is this Apply-PnPTenantTemplate : Exception while invoking endpoint https://login.microsoftonline.com/fffff-4121-ae51-71e06b5edc04/oauth2/token.
    • If you get this it follow below steps rather than the normal steps
    • Remove earlier version of SharePointPnpPowerShellOnline
    • Install-Module -Name “SharePointPnPPowerShellOnline” -RequiredVersion 3.20.2004.0
    • Connect-PnPOnline -Url https://tenant-admin.sharepoint.com/ -PnPO365ManagementShell , this will open a window in browser for device login in which you should enter a code specified, make it is succcessful.
    • Connect-PnPOnline -Url https://tenant.sharepoint.com, renter tenant admin credentials
    • Then go to provisioning folder and execute Apply-PnPTenantTemplate -Path .\starterkit.pnp
SharePoint Starter Kit

Use provisioning parameters:

You can also provide parameters to achieve some customizations such as below

Apply-PnPTenantTemplate -Path .\starterkit.pnp -Parameters @{"Company"="Your Company Name";"SiteUrlPrefix"="YourCompany";"WeatherCity"="Stockholm"}

More information here https://github.com/pnp/sp-starter-kit/blob/master/provisioning/readme.md#provisioning-parameters

How it looks like after installation?

Three site collections are created

Site collections after Starter Kit

A communication site

SharePoint Starter Kit V2 demo Communication site

A Private Group Team site

SharePoint Starter Kit V2 HR Team Site demo

An another teams site as department site

SharePoint Starter Kit V2 Marketing Site Demo

Below web parts and SPFX web parts are installed, for detail explaination please check on this link https://github.com/pnp/sp-starter-kit#custom-web-parts

SharePoint Starter Kit V2 Apps

How to make it work in SharePoint 2019?

As of 23rd July 2020 the ApplyPnPTemplate command for SharePoint 2019 is not available, you can keep an eye on this URL https://github.com/pnp/sp-starter-kit/blob/master/provisioning/readme-sp2019.md to check if it is available as community members have promised to update it soon.

Till then you can deploy individual apps in SharePoint 2019 farm and use the apps. Following apps will work in SharePoint 2019 as well

  • Banner
  • Followed sites
  • Links
  • People directory
  • Site information
  • Tiles
  • Weather
  • World clock

To deploy the apps you can copy the package from source code you downloaded before from this location “sp-starter-kit-master\source\<<solution-name>>\sharepoint\solution” and upload it to App Catalog of your farm.

There is no need to build the solution and can be directly deployed but in case you face issues you can build it using

gulp bundle --ship
gulp package-solution --ship
SP Starter Kit v2 SP 2019

Once deployed you can add it on a page, in this case I am showing Tiles app.

Tiles App SharePoint 2019
Tiles App in SharePoint 2019

More information can be found here: https://github.com/pnp/sp-starter-kit/blob/master/documentation/components/wp-tiles.md

So that is all I have for SharePoint Starter Kit V2 , I will write more about this topic as there is lot to explore.

Connect with me on Twitter or Linked In if you need more information.

Special thanks to all community members who work on these and provide great solutions https://github.com/pnp/sp-starter-kit/graphs/contributors

References:

https://github.com/pnp/sp-starter-kit

https://developer.microsoft.com/en-us/office/blogs/announcing-sharepoint-starter-kit-v2/

SPFX SharePoint : Building your environment for client side webpart #spfx #spfxsharepoint

As of 22nd feb 2017 GA version of SPFX SharePoint Framework has been released. SharePoint Framework SPFX that is client side web part is a new framework introduced to provide one more option for client-side development other than Script Editor based and Add-in model.

The new framework is based on both of the existing solutions but in most of the scenarios SPFX is a preferred way to develop, two major plus points

  • Responsive controls
  • Can be deployed on modern pages and classic web part pages as well

More information can be read here Why SPFx

Building your environment for doing development using SPFX is very welll documented on this article but while doing the same for me I got few issues so I am just going to highlight few points which I thought was confusing or should be highlighted

There are four major things you need to do to set up your development environment

 

  • Install Node JS : You need to install Node JS, make sure you do install LTS version from here https://nodejs.org/en/ . Unfortunately I installed it from here first time and it did not workout good https://nodejs.org/en/download/ . Refer more details here
  • Install Yeoman and gulp : Once Node JS installation is done you should run below commands to install Yeoman and gulp, make sure you run these commands in Windows PowerShell, I have assumed that you are using a Windows 10 machine. Also I tried using CMD prompt but it did not work out good. Also make sure you create a separated folder under C Drive and then perform all the steps
    • npm install -g npm
    • npm install -g yo gulp
    • npm install -g @microsoft/generator-sharepoint
  • Install Visual studio code : Install Visual Studio code from here 

If all steps are successful then your development environment is set up and you are ready to develop your first client side web part.

In case you need more help on this or other SharePoint issues please contact us via our Contact Us page or via our Facebook page or via Twitter

Like us on Facebook and follow us on Twitter