+91 – 88617 28680learning@flexmind.co

SharePoint Framework React WebPart

SharePoint Framework React WebPart
8
Aug

SharePoint Framework React WebPart

SharePoint Framework (or SPFx) is a new development model that provides client-side development for building SharePoint WebPart & extension. In this blog, we will cover how to

  • Setup your SharePoint Framework development environment (Windows)
  • Build your first SharePoint Framework React WebPart (Hello User)

If you are looking for SharePoint Framework overview, read this blog.

Background

SharePoint developers have been developing custom WebParts as a full-trust server side code in SharePoint Server (on-premise).

SharePoint Online (Office 365) doesn’t allow full-trust code. SharePoint Framework (or SPFx) is a next generation client side development approach based on open tool-chain which allows you to develop WebParts based on modern web technology standard.

Technologies to be learnt
SharePoint developers skilled in server side programming will have to learn these new technologies to become fluent in client side development:

  • Node.JS
  • TypeScript
  • One of the popular Client-Side JavaScript framework/library (React/Angular/Knockout/Vue etc.)

 

Setup your SharePoint Framework development environment

1. Download latest version of Node.JS from https://nodejs.org/en/ and install it.

2. Install Node.JS with default options.

 

3.  Open Node.js command prompt

 

4.  Install yeoman and gulp by running this command.

 

What is this command & why do you need yeoman and gulp?

NPM (Node Package Manager) is the default package manager for Node.js packages or modules. The way .NET developers have been using Nuget package manager that mainly deals with .NET assemblies.

What is a Node.JS module?
You can consider modules to be the same as JavaScript libraries.

What is Yo?
Yeoman (similar to visual studio project templates) helps you create a new application, the way we use visual studio and select a project template to create default project structure and start working on it.

What is Gulp?
Gulp is a build tool (similar to MSBuild) in JavaScript built on node streams.

5. Once yeoman & gulp is globally installed on your development machine, you should install Yeoman SharePoint generator. Yeoman SharePoint generator helps you to create a client-side solution project with proper structure.

Once installation is completed your environment is ready for SharePoint framework development.

Build your first SharePoint Framework React WebPart (Hello User)

1. Create a folder where you want to add your solution.

2. Navigate to the folder from command-line interface, run this command yo @microsoft/sharepoint to create a new SPFx SharePoint solution.

3. when prompted, provide details as shown here:

Where you want to deploy it? SharePoint Online or SharePoint 2016

SharePoint 2016 Feature Pack 2 supports client-side webparts built on SharePoint Framework version v1.1.0. SharePoint Online supports latest version of SPFx so if you are planning use same client-side webpart in SharePoint 2016 & SharePoint Online then you will have to use “SharePoint 2016 onward, including SharePoint Online”. If not targeting SharePoint 2016, select “SharePoint Online”

You will have to wait for 5 – 10 minutes for the solution to get created.

4. Install developer certificate – After the solution is created, you will have to install developer certificate as the client-side tool chain uses HTTPS endpoint by default. When prompted, select yes. If you don’t install local certificate, you browser will report a certificate error.

 

5. Install a code editor – you can install code editor Visual Studio code and use it for client-side development to build your web part. Open solution directory folder in visual studio code.

 

6.  Hello User React WebPart – To show Hello current user name we will have to make few changes in our newly created default webpart.

  • Open IHelloUserProps.ts and add a new property current user as shown here. This interface acts as a data model.

  • Open HelloUserWebPart.ts and add this line inside render() method. We will set value of currentuser in HelloUserWebPart class and get it in HelloUser class in HelloUser.tsx file. Passing values by using interface as a data model ensures that properties are strong-typed and easy to maintain in future.

  • Open HelloUser.tsx and get the currentuser property value.

7. Open View → Integrated terminal and type gulp serve. Running this command will build your code and if build is successful it will open WebPart in a local workbench.

8. Add WebPart to the local workbench and you should see Hello User 1 message in the WebPart. Local workbench url will be https://localhost:4321/temp/workbench.html

 

As we are viewing this webpart in local workbench so it is not loading any SharePoint context. To test this WebPart in SharePoint, you will have to login to your SharePoint Online site and navigate to this url: https://<your-tenant-name>.sharepoint.com/_layouts/15/workbench.aspx

After adding this WebPart on your SharePoint hosted workbench you should see output like this:

Congratulations! You have successfully setup SharePoint framework development environment and developed your first react based webpart. Subscribe to our social channel to stay informed about upcoming blogs!

Leave a Reply