Developing Web Parts Using SharePoint Framework - Part One

Updated: Mar 29, 2019


In this article, you will learn about the basics and steps for setting up the environment for SharePoint Framework (SPFx) Web part development.

SharePoint Framework

The Web parts can be developed using SPFx. It is purely a client side development model. The development is similar to REST API or JSOM approaches, which are used in traditional web part development. TypeScript is primarily used as a scripting language. It also provides us options for using modern frameworks like React, Angular, etc.

The open source development tools like TypeScript, NPM, WebPack and Gulp are used for the development.

Setting up the prerequisites

To setup the development environment, please follow the steps provided by the Microsoft team.

Setting Up SharePoint SiteSetting up the environment

Setting up CDN

The web parts assets supports the files required to be hosted on Content Delivery Networks, so that the web parts can refer  to those files , once added to the site.

The CDN folders can be created on Azure account, O365 SharePoint site or any Cloud environment.

In my examples, I will be using an Office 365 site for hosting the supported files on the CDN store. The CDN folders can be created under the document libraries or Site Assets on SharePoint site.

This Microsoft article helps us in setting up the CDN path on Office 365 SharePoint site.

Basic SPFx Web Part

In my first example, you will see the steps to develop and deploy the Web part, which retrieves the items from a list.

Open the command prompt and run as an admin. Navigate to the respective folder to create the Webparts. 

Using the Yeoman SharePoint generator, create the basic hello world Webpart with the necessary input changes, using "yo @microsoft/sharepoint" command. The required input details are given below.

  1. Solution name 

  2. Folder path 

  3. Web part name