How To Deploy And Install The SPFx App Using PNP PowerShell

SPFx is the new developmental model which is helpful in building add-ins for the SharePoint modern site. Using SPFx we can create Web parts and Extensions. Web parts are what we used from the SharePoint classic experience. Extensions are new and 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  before going on with the deployment.

Web scoped SPFx apps

These kinds of apps tend to be available only on a site or a web. Based on the usage these kinds 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. To 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 https://yourtenant.sharepoint.com

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 the 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 a response something like below.