Sharepoint framework

SPFx is the new developmental model which is helpful in building add-ins for SharePoint modern site. Using SPFx we can able to create Web parts and Extensions. Web parts are the stuffs we used from SharePoint classic experience. Extensions are the new stuffs which is helpful in improving the modern sites user experience. It is the only way to boost your SharePoint modern sites user experience.

After developing our SPFx app, we have to bundle the app and move it to CDN or a source from where you want to serve your application. To render the application, we need to package the solution and deploy and install it somewhere so that it is usable. We can deploy and install them manually by moving the sppkg file to your appcatalog. It is a boring task to drag and drop or upload the solution to our appcatalog and then deploying it and installing it. PNP team has come with an automating procedure to replace this boring process.

There are two ways of deploying the app/add-ins, it is always important to understand it before going with the deployment.

Web scoped SPFx apps:

These kinds of apps are tend to available only on a site or a web. Based on the usage these kind of apps can be included and removed. If we need to target a particular site to use a web part or an extension, we can go with this model. Here we have to install the app on a particular site which needs additional to step to be performed. After installation we can make use of the web part as we need, but only inside the site in which it is installed.

Tenant Scoped apps:

These kinds of apps should be available to the entire tenant. Let’s consider the extensions which will act as a master page which brings the unique experience to the site. If we want this to be available for all the sites, we can go with this model. Also, if you want to install an app which should be available for all the site collections in a tenant, we can use this model.

Leaderboard_CDRTo do it we should package the app, by setting the skipFeatureDeployment value to true in the package-solution.json file. Here we should move the app to the appcatalog and then a pop-up will ask to allow the site to retrieve data from the CDN/source from which we are planning to serve the application.

After packaging the SPFx app, connect your SharePoint tenant using the PSScript.

Connect-PnPOnline -Url

To deploy & install the app on a site use the below script,

                                                    Add-PnPApp -Path ./myapp.sppkg -Scope Site -Publish

To deploy & install the app on a tenant level

                                                    Add-PnPApp -Path ./myapp.sppkg -Publish

Publish will be taking care of deploy and trust process.

If you want to install the application manually, you can move the app packages like .app and .sppkg using the below command.

                                                    Add-PnPApp -Path ./myapp.sppkg -Overwrite

-Overwrite will handle the copy and replace operation of a file which already exists.

After running the PS Scripts, you will be getting the response something like below.


Let’s automate our SPFx deployment procedures using PNP and PowerShell. Feel free to reach out to me if you need any assistance in this.