Create a SharePoint Framework Webpart – Part I
SharePoint Framework has gained much traction with the SharePoint Developers’ community, of late. This takes client-side development in SharePoint to a whole new level. SPFx framework can utilize modern JavaScript tools and libraries to create sleek functionality-rich webparts.
SPFx is the next iteration in SharePoint Development landscape, and can be thought of a budding successor to its prior development models such as Server Side Object Model, Javascript Injection(Client Side Object Model), and SharePoint Add-In Models.
A few advantages of SPFx are –
- It runs in the context of the current user and connection in the browser with Javascript injected directly.
- Responsive by nature. Reliable performance.
- Can work with any JavaScript framework – React, Knockout, Angular, etc.
- Supports open source client development tools such as NPM, Typescript, Yeoman, webpack, and gulp.
- SPFx web parts can be added to both classic and modern pages.
This article will be a single stop guide to creating a simple and very basic webpart in SharePoint Online using SPFx.
This article is divided into 3 parts.
- Part I – Installation and configuration
- Part II – Build the webpart and deploy it
- Part III – Preview the webpart
Assumption: This article assumes development in a Windows OS, and not MAC, Ubuntu etc.
Part I – Installation/Configuration
|
dasdasdsdNodeJS |
Download and install the stable version from |
|
Install Visual Studio Code |
Download VSCode from |
|
Install Yeoman and gulp
|
Type in this command in your Command Prompt npm install -g yo gulp |
|
Install Yeoman SharePoint generator
|
Type in this command in your Command Prompt npm install -g @microsoft/generator-sharepoint |
Part II – Build the webpart and deploy it
- Create a new folder in CMD
md Stark
- Navigate to the newly created folder
cd Stark
- Initiate the webpart creation by executing the below command.
yo @microsoft/sharepoint
This command will scaffold the project and necessary files for the webpart project
- After execution of the previous command, you will be prompted with the below questions. I have used these answers/options below
|
What is your solution name? |
StarkIndustries |
|
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? |
y |
|
Which type of client-side component to create? |
WebPart |
|
What is your Web part name? |
StarkIndustriesWebpart |
|
What is your Web part description? |
This is a dummy webpart – Mark 0 |
|
Which framework would you like to use? |
No JavaScript framework |
- The webpart project will be created
Part III – Preview the webpart
- Install the developer certificate (if not installed previously. Skip this step if already installed)
gulp trust-dev-cert
- After installing the certificate, we run the below command
gulp serve
The default browser will open with the local SharePoint Workbench*.
*SharePoint Workbench is a developer design surface that enables you to quickly preview and test web parts without deploying them in SharePoint. SharePoint Framework developer toolchain contains a version of the Workbench that works locally and helps you quickly test and validate solutions that you are building. (as per Microsoft website)
- On clicking the “+” button, the newly created SPFx webpart, “StarkIndWebpart” will be visible. Go ahead and add the webpart to have the first look.
There you go! Your first dummy SPFx webpart!
In the next blog, we will wrap some features/functionalities around this webpart and explore further.
3,291 total views, 2 views today
0 Comments