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 […]
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 […]
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 […]
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 […]
SharePoint Framework -solution 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 […]
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 […]
NPM Package 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 […]
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 […]
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 […]
Introduction & Setting Up the SharePoint Framework
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 […]