SPFx is the new developmental model that 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 site's 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 app catalog. It is a boring task to drag and drop or upload the solution to our app catalog and then deploy and install it. The PNP team has come up with an automated 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 the 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 steps 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 that will act as a master page that brings a 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 that 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 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 deployment 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 that already exists.
After running the PS Scripts, you will get a response something like below.
![PS Script]()