Build SharePoint Framework client side web part – I

 

 

 

 

 

Suggested Articles

What is SharePoint Framework (SPFx)

Future prospects of SharePoint Framework (SPFx)

Required tools and libraries for SharePoint Framework (SPFx) development

Setup Office 365 tenant for SharePoint Framework development

Setup SharePoint Framework client side web part development environment

 

This article describes how we can create a new SharePoint Framework client side web part. We’ll also use various tools to build the web part. Let’s begin with creating a new web part project.

 



 

Create new web part project

You need to perform following steps:

  1. Create new project directory at your opted location

md helloworld-webpart

  1. Go to project directory

cd helloworld-webpart

  1. Create project using Yeoman SharePoint Generator

yo @microsoft/sharepoint

It will ask for few inputs, provide the inputs as follows:

  1. Solution name? helloworld-webpart
  2. Type of client-side component to create? WebPart
  3. What is the web part name? HelloWorld
  4. What is your web part description? This is my first client side web part using SharePoint Framework
  5. Which framework would you like to use? No JavaScript Framework

 

sharepoint-client-side-web-part-1

 

At this point, Yeoman will install dependencies and generate files for HelloWorld web part. Once processing is completed, it will show success message.

sharepoint-client-side-web-part-2

 



 

Using Code Editor

This solution is build using HTML/Typescript. You can use any editor that support client side development.

I am using Visual Studio Code from Microsoft. It is a lightweight but powerful source code editor which runs on desktop of Windows, Mac and Linux. Visual Studio Code supports JavaScript, Typescript and Node.js. It has many extensions for other languages like C++, C#, PHP and Python and runtimes.



 

Preview web part

Run the following command to establish trust

gulp trust-dev-cert

 

sharepoint-client-side-web-part-3

 

You will see a security warning as below, click Yes to install.

 

sharepoint-framework-security-error

 

Now you have installed developer certificate. Run following command to build and preview your web part.

gulp serve

 

You may be asked for warning. Click Allow access.

 

sharepoint-client-side-web-part-5

 

SharePoint client side development tool gulp is a task runner which performs build processes tasks such as:

  1. Bundle and Minify JavaScript and CSS
  2. Run tools to call bundling and minifying tasks before each build
  3. Compile CASS to CSS
  4. Compile Typescript to JavaScript

Visual Studio Code provides built-in support for gulp and other task runners. Choose Ctrl+Shift+B on Windows or Ctrl+Shift+B on Mac to debug and preview your web part.

 



 

Now, It will launch SharePoint Workbench where you can add your client side web part on the page. This is helpful while development as you don’t need to deploy your client side web part every time while it is under development.

 

sharepoint-client-side-web-part-6

 

You can stop gulp by choosing Ctrl+C in command prompt where gulp is running. Then you will provide answer Y to stop it.

sharepoint-client-side-web-part-7

To Be Continued…

 



 

 

 

 

 

THREE QUERIES offers easy access to information about business, management, technology and spirituality that helps people and has grown from there. We provide an important knowledge base for those involved in managing, architecture and developing projects of all kinds. With weekly exclusive updates, we keep you in touch with the latest business, management, technology and spirituality thinking.

WE ARE CONNECTED ~ Follow us on social media to get regular updates and opinion on what's happening in the world of SharePoint, front-end, back end web technologies and project management. If you like this article, please share it and follow us at Facebook, Twitter, Instagram, Pinterest and LinkedIn

About Satyendra Mishra

Microsoft certified, motivated, energetic and accomplished SharePoint Consultant and Architect with 13+ years of work experience in Management, Architecture, Analytics, Development and Maintenance. He has been fortunate to be a part of over 20+ Web/Mobile/Software SharePoint and .Net projects delivery with various companies across different industry sectors. This has provided him a valuable insight and experience especially in successful implementation of technology solutions. Having very strong System Architecture, Technological, Management & Analytical Skills, Knowledge of Office 365, SharePoint, .Net, JavaScript, React, Angular, Azure, SQL. In 2016, he decided to start sharing the knowledge back to society in the form for content writing and blogging.
View all posts by Satyendra Mishra →

Leave a Reply

Your email address will not be published. Required fields are marked *