Deploy SPFx Solution Package using Azure CDN

Configure MS Azure Storage Account Loginto MS Azure Portal (https://portal.azure.com) Click “Create a resource” Click “Storage account – blob, file, table, queue” Click Create The storage account endpoint can be referred by URI – http://<StorageAccountName>.blob.core.windows.net Configure BLOB Container Select storage account from dashboard Click “Blobs” Add New Container Click Access keys and note down any of […]

Continue Reading

Deploy SPFx Solution Package Using Office 365 CDN

This CDN location, being public, can be accessed easily. Follow below steps: Configure CDN in Office 365 Tenant Download and install the latest version of SharePoint Online Management Shell Open the SharePoint Online Management Shell Connect to SharePoint Online tenant using below cmdlet Connect-SPOService – Url https://[YourTenant]-admin.sharepoint.com (Replace [YourTenant] with actual tenant name) Run below […]

Continue Reading

Deploy SPFx Solution Package excluding Assets

To deploy our webpart, we first need to create a deployable package that can be added to the App Catalog. You may follow the steps below after creating your SPFx webpart. Open project using visual studio code. Verify package-solution.json for includeClientSideAssets property to false & then set CDN details in write-manifest.json as below Bundle your […]

Continue Reading

Deploy SPFx Solution Package including Assets

To deploy our webpart, we first need to create a deployable package that can be added to the App Catalog. You may follow the steps below after creating your SPFx webpart. Open project using visual studio code. Verify package-solution.json for includeClientSideAssets property to true & write-manifest.json for cdnBasePath to “<!—PATH TO CDN–>” as below Bundle […]

Continue Reading

SharePoint Framework -solution deployment options

Deployment Options

There are various options to package and deploy a SPFx solution and as part of packaging and deployment process. SPFx package deployment consists of below components that need to be deployed: The minified js file for all code The webpart manifest file Webpart compiled file The package file with all package information Deployment Options: The […]

Continue Reading

Understanding SPFx Web Part Property Pane

In traditional SharePoint Webparts can be configured using properties or webpart properties where as in modern SharePoint or SPFX client-side web parts they are referred as property panes. These property panes control behavior and appearance of the webpart including metadata like Pages, Header, Groups or property fields. Field Object Label PropertyPaneLabel Textbox PropertyPaneTextField Multiple lines […]

Continue Reading

NPM Package Dependencies

Dependencies

NPM (Node Package Manager) is a package manager for JavaScript as like Nuget for managed code of .Net framework. NPM is used to consume third party libraries in SharePoint Framework (SPFx) solutions. Required & third-party packages like jQuery, React, Knockout, Angular, Office Fabric UI, etc. can be added to the solution using NPM. Change of […]

Continue Reading

HelloWorld SPFx Solution

The Yeoman generator for SPFx helps to scaffold the initial project structure. To build client-side web part, we can choose any of the JavaScript library or framework such as “No JavaScript Framework”, “React” and “Knockout”. Build SPFx webpart using Gulp & test it on the SharePoint Workbench. Client-Side Web Parts are developed using modern UI […]

Continue Reading

ALM of the client-side Web Part

The Application Lifecycle Management (ALM) flow of the client side webpart starts from installation of the needed npm packages for solution. Creation of SPFx project using Yeoman SharePoint generator  Implementing web part code using No JavaScript, Knockout, React or Angular Build using Gulp serve Test webpart locally in SharePoint Workbench and deploy and test in […]

Continue Reading

Introduction & Setting Up the SharePoint Framework

SPFx Tools

Why the SharePoint Framework? Traditional SharePoint Approach: SharePoint custom development – Initially developed server-side code solutions which were deployed in SharePoint Hive as Sandbox Solutions or Full Trust code deployments which was a problem in hosted SharePoint deployments such as Office 365. Later JavaScript Injection concepts developed by using content editor web parts or script […]

Continue Reading