MYPIBLOGs

Overview of Sharepoint online(SharePoint Framework):

New SPFx (SharePoint Framework ) is a page and web part model which provides full support for client-side SharePoint development, easy integration with its data, and extending Microsoft Teams.

Key features of the SharePoint Framework:

1.It runs in the context of the current user and connection in the browser. There are no iFrames for the customization (JavaScript is embedded directly to the page).

2.The controls are rendered in the normal page DOM.

3.The controls are responsive and accessible by nature.

4.It enables the developer to access the lifecycle in addition to render, load, serialize and deserialize, configuration changes, and more.

5.It's framework-agnostic. You can use any JavaScript framework that you like including, but not limited to, React, Handlebars, Knockout, Angular, and Vue.js.

6.The developer toolchain is based on popular open-source client development tools such as NPM, TypeScript, Yeoman, webpack, and gulp.

7.Performance is reliable.

8.End users can use SPFx client-side solutions that are approved by the tenant administrators (or their delegates) on all sites, including self-service team, group, or personal sites.

9.SPFx web parts can be added to both classic and modern pages.

10.SPFx solutions can be used to extend Microsoft Teams.

Lets build a hello world web part Sharepoint framework using react.

For Scripting generally Console like cmd promt is use in windows os ,but mostly I used powershell window,because it remembers, I have scripted in last time or in last days,it saves times to write script).

Setup for Sharepoint Development environment:

Install Node.js:

Sharepoint supports LTS 10.x node js version. Make sure that node version should be same.

Link: Node LTS 10.x

Install a code editor:

We can install any editor that support client side development to build the web part. Few example Code Editors like below:

1. Visual studio code

2. Atom

3. Webstorm

Mostly Visual studio code(link: https://code.visualstudio.com/) is used ,I also use it.

Install development toolchain prerequisites:

Run in powershell(you can any console) to install the sharepoint development prerequisites.

npm install gulp yo @microsoft/generator-sharepoint --global

Install Gulp:

The SharePoint Framework build toolchain uses Gulp tasks to build projects, create JavaScript bundles, and the resulting packages used to deploy solutions.

npm install gulp --global

Yeoman

Yeoman helps you kick-start new projects, and prescribes best practices and tools to help you stay productive. SharePoint client-side development tools include a Yeoman generator for creating new web parts. The generator provides common build tools, common boilerplate code, and a common playground website to host web parts for testing.

Command to install Yeoman

npm install yo --global

Install Yeoman SharePoint generator:

The Yeoman SharePoint web part generator helps you quickly create a SharePoint client-side solution project with the right toolchain and project structure.

npm install @microsoft/generator-sharepoint --global

Install a modern web browser

Sharepoint Framework supports modern web browser like Microsoft Edge, Google Chrome, or Firefox as the development browser.You must install and update to latest one.

Create a new web part project:-

1.Create a new project directory in your favorite location

md SharepointDemo

2. Go to the project directory

cd SharepointDemo

3. Create a new HelloWorld web part by running the Yeoman SharePoint Generator

yo @microsoft/sharepoint

4.When prompted,it should be done like below screenshot:

What is your solution name?: sharepoint-demo

Which baseline packages do you want to target for your component(s)?: SharePoint Online only (latest)

Where do you want to place the files?: Use the current folder

Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites?: N

Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant?: N

Which type of client-side component to create?: WebPart

What is your Web part name?: HelloWorld

What is your Web part description?: HelloWorld description

Which framework would you like to use?: React

5. Trusting the self-signed developer certificate

 When installation is done. Next command to for Trusting the self-signed developer certificate.

Sharepoint Framework's local webserver uses HTTPS by default.Self-signed SSL certificates are not trusted by your developer environment. By executing below command, it configure your development environment to trust the certificate.

gulp trust-dev-cert

6.Next open this solution to Visual studio code by

Executing command below

 Code .

 It will open up project in vs code.

7.Next,Now go to Terminal=>select new terminal

Below Command to run the project.

gulp serve

It will open up like below in local workbench:

8. Click + in mid, search you web part name like hello world

9.Select helloworld web part.

For online webpart: 

Sharpointsiteurl/_layouts/15/workbench.aspx

Ex:

https://murmu1.sharepoint.com/sites/firstsponline/_layouts/15/workbench.aspx

Part2:- Render google graph chart using sharepoint react from sharpoint list data.(Coming soon =>)