SharePoint & M365 Real Time Solutions

Overview of the SharePoint Framework

SharePoint Framework(SPFx), a new development model for SharePoint which takes the SharePoint experience to the next level with the help of client-side APIs.

With the SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps that are responsive and mobile-ready from day one.

SharePoint Framework model” to build great & better applications. This model is released as open source APIs and this model in SharePoint by manually injecting a java script file (which created based on JSOM, REST API) to the SharePoint page to obtain the appropriate result.

SharePoint Framework Main Features

Ø Runs in the context of the current user and connection in the browser. There are no iFrames.

Ø The controls are rendered in the normal page DOM.

Ø The controls are responsive and accessible by nature.

Ø Enables the developer to access the lifecycle - including, in addition to render - load, serialize and deserialize, configuration changes, and more.

Ø It's framework agnostic. You can use any browser framework that you like: React, Handlebars, Knockout, Angular, and more.

Ø The toolchain is based on common open source client development tools like npm, TypeScript, Yeoman, webpack, and gulp.

Ø Performance is reliable.

Ø Solutions can be deployed in both classic web part and publishing pages and modern pages.

Alternative development models: client-side JavaScript injection, and SharePoint Add-ins. Both of these solutions have pros and cons.

Why SharePoint Framework?

For developing the client based SharePoint applications, we have used below of approaches,

Development Model	Pros	Cons
JavaScript injection	Script Editor to paste JavaScript into the web part and have that JavaScript execute when the page renders It runs in the same browser context as the page, and is in the same DOM, so it can interact with other controls on the page. It is also relatively performant, and simple to use	Can't easily provide configuration options to end users Script editor web part is not marked as "Safe For Scripting" Script editor web part will block my-sites, team sites, group sites
SharePoint Add-in model	This option for solutions are more powerful and that run in NoScript sites is the add-in/app-part model. This implementation creates an iFrame where the actual experience resides and executes. To debug the SharePoint Add-in, after changing source code every time, we have to re deploy and re install the add in to the SharePoint site	Add-in/app-part model run in an iFrame, iFrames are slower than the script editor web part, because it requires a new request to another page. The page has to go through authentication and authorization, make its own calls to get SharePoint data iFrame boundary makes it more difficult to create responsive designs, and inherit CSS and theming information.
SharePoint Framework (Next Generation Development Model)	Ø The SharePoint Framework is the next evolution light wright development model. Ø Instant application debugging using Workbench without SharePoint site. Ø Instant SharePoint site debugging using workbench (which is uploaded in SharePoint site) Ø Automated process for deploying the updates Ø Opens a way to use different JavaScript frameworks	Typescript language to build the applications and this will be compiled in to clean

Light Weight Component	Definition	Reference
Node.JS	It is an open source and cross platform JavaScript based runtime environment built on top of Chrome’s V8 JavaScript engine for developing JavaScript based applications. Node.js runtime environment to build & run the applications	https://nodejs.org
NPMJS Packages	npmjs is the package manager for JavaScript, which contains the larger number of open source packages and these are assembled in the solution to build the application. Manage the dependencies required for the application by using npmjs packages	https://www.npmjs.com/
Gulp:	Gulp is an open source toolkit used to automate the painful and time-consuming tasks in a development workflow. For ex., minification and copying of all JavaScript files. Gulp toolkit to automate the tasks of building and running the solution.	http://gulpjs.com/
Typescript:	Typescript is an open source editor developed by Microsoft. It is a typed superset of java script language and compiles in to plain JavaScript. It also eases the C# developers to develop JavaScript based applications.	https://www.typescriptlang.org/
Visual Studio Code:	Visual Studio Code is lightweight source code editor tool, which runs on any platform. It comes with built-in support for JavaScript, Typescript and Node.js and has rich ecosystem of extinctions for other languages and runtime.	https://code.visualstudio.com
Yeoman Generator:	Yeoman generator is the web’s scaffolding tool for modern web apps. This will generate the complete solution structure for developing the application.	http://yeoman.io/
GitHub:	GitHub is the web based Git repository hosting service. It offers all of the distributed revision control and source code management functionality of Git.	https://github.com/
JavaScript Frameworks:	In modern web world, there is number of JavaScript frameworks like React, Angular JS, Knockout JS, etc… available for building the web based application to enable rich user experience.
SharePoint JSOM or REST API:	JSOM or REST API are enables the client side development to access & manages the SharePoint sites.

Light Weight Vs Microsoft Equivalent

Light Weight Component	Microsoft Equivalent
Node.js	IIS Express and /or build automation
Node.js	.Net Framework
npm	Nuget
Yeoman	VS Project -> New -> Template
Gulp.js	MS Build
Typescript	C#

Extensions
Install Yeoman and gulp
Install Yeoman SharePoint generator
Compile SASS files to CSS.
Compile TypeScript files to JavaScript.

Light Weight Development Components

SharePoint Framework (Spfx) development require some of the light weight tools like Node JS, Gulp, Typescript, Visual Studio, Yeoman Generator instead of having heavy weight software.

The below table provides a summary of the Light weight component.

SharePoint Framework development tools

SharePoint Framework requires above light weight components to build solution.

Set up development environment

We can use Visual Studio, or your own custom development environment to build SharePoint client-side web parts.

Install developer tools

Below list of tools needs to be download before installation started

NodeJS

Install NodeJS https://nodejs.org/en/

After installing node, make sure npm is up to date by running following command:

For windows : npm install -g npm

For Linux : sudo npm install -g npm

Check Node version

Local proxy

npm config set proxy http://webproxy.global..net:8080

npm config set https-proxy http://webproxy...net:8080

Git clone :

git clone https://github.com/SharePoint/sp-dev-fx-webparts.git

Code Editors

Install a code editor. such as:

Visual Studio Code

Atom

Webstorm

Open Sample VS code project

Debugger for Chrome

Yeoman helps you kick-start new projects

npm install -g yo gulp

npm install -g @microsoft/generator-sharepoint

Create SharePoint Framework project

Create a separate folder for the application source or open that folder

Create a new project by running the Yeoman SharePoint Generator.

Fill all above mandatory requests based on project description. At this point, Yeoman will install the required dependencies and scaffold the solution files along with the weather web part. This might take a few minutes.

We can use any code editor like explained above, I used VS Code, and that how you will see the screenshots

To open the webpart code in VS CODE just type:

code .

Preview the web part

To preview your web part, build and run it on a local web server. The client-side toolchain uses HTTPS endpoint by default. However, since a default certificate is not configured for the local dev environment, your browser will report a certificate error. The SPFx toolchain comes with a developer

certificate that you can install for building web parts.

Now we need to preview our webpart, for that we need to rely on gulp, its task runner which handles build process such as:

Bundle and minify JavaScript and CSS files.

Create a trusted certificate for localhost:

gulp trust-dev-cert

To run the application, enter “gulp serve” command

This command will execute a series of gulp tasks to create a local, Node-based HTTPS server on 'localhost:4321' and launch your default browser to preview web parts from your local dev environment.

below sample commands we can use it for build the Project

Build only

gulp build

Debug with standard browser

gulp serve

Debug without standard browser

gulp serve --nobrowser

Start debugging in the VS Code which starts the Chrome browser

Sample code for connect client-side web part to SharePoint

https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/connect-to-sharepoint

Build our webpart

Visual Studio Code provides built-in support for gulp and other task runners. You can press Ctrl+Shift+B if you are in Windows or Cmd+Shift+B if you are in Mac within Visual Studio Code to debug and preview your web part.

Once we hit this, you will be able to see on the Output window how the project is being built

Debug the code:

Visual Studio Code provides built-in support for debugging the code using different tools. In my case I instated chrome debugger tools for debugging.

For each project copy the json file to the .vscode directory in your project directory

{

// Use IntelliSense to learn about possible Node.js debug attributes.

// Hover to view descriptions of existing attributes.

// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387

"version": "0.2.0",

"configurations": [

{

"type": "chrome",

"request": "launch",

"name": "Launch localhost workbench",

"url": "https://localhost:4321/temp/workbench.html",

"webRoot": "${workspaceRoot}",

"sourceMaps": true,

"sourceMapPathOverrides":

{

"webpack:///../../../../*": "${webRoot}/*"

}

{

"type": "chrome",

"request": "launch",

"name": "Launch SharePoint workbench",

"url": "https://sharepoint.com/sites/developer/_layouts/15/workbench.aspx",

"webRoot": "${workspaceRoot}",

"sourceMaps": true,

"sourceMapPathOverrides":

{

"webpack:///../../../../*": "${webRoot}/*"

}

]

}

Publishing and deployment

Deploy client-side web part to SharePoint and see it working on a modern SharePoint server-side page.

Package the weather web part

Unlike in the local workbench, Dev SP site in order to use client-side web parts on modern SharePoint server-side pages, you need to deploy and register the web part with SharePoint.

Open the weatherWebPart web part project in Visual Studio Code, or your preferred IDE.

Open package-solution.json from the config folder.

The package-solution.json file defines the package metadata as shown in the following code:

Change deployment location in write.mainfests.json file under config folder.

In the console window, enter the following command to package your client-side solution that contains the web part:

gulp package-solution

The command will create the package in the sharepoint/solution folder:

Package contents

You can view the raw package contents in the sharepoint/debug folder.

The contents are then packaged into an .sppkg file.

The JavaScript files, CSS and other assets are not packaged and you will have to deploy them to an external location such as a CDN or SharePoint App Catalog site

Prepare web part assets to deploy

gulp –ship

gulp package-solution –ship

Once package is ready we need to file webpart asserts under temp/deploy folder.

Copy complete deploy folder and paste in your asserts folder in SharePoint.

Create web part folder under Store Assets

https://sharepoint.com/sites/appCatalog/StoreAssets list.

Deploy the HelloWorld package to app catalog

Go to your App Catalog.

https://.sharepoint.com/sites/appCatalog/AppCatalog/Forms/AllItems.aspx

Upload or drag and drop the webpart.sppkg to the App Catalog.

This will deploy the client-side solution package. Since this is a full trust client-side solution, SharePoint will display a dialog and ask you to trust the client-side solution to deploy.

Install the web parts app in a site

After adding the app you can now add your SharePoint Framework client-side web parts to pages the same way you would add any other web part in SharePoint.

In new experience page: