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.
What is SharePoint Framework (SPFx)
Future prospects of SharePoint Framework (SPFx)
Required tools and libraries for SharePoint Framework (SPFx) development
Setup Microsoft 365 tenant for SharePoint Framework development
Setup SharePoint Framework client side web part development environment
Build SharePoint client side web part using SharePoint Framework (SPFx) – I
Build SharePoint client side web part using SharePoint Framework (SPFx) – II
Build SharePoint client side web part using SharePoint Framework (SPFx) – III
How to Debug SharePoint Framework Solutions in Visual Studio Code
What is the Developers Point of View on SharePoint Framework
What is Required Toolchain for SharePoint Framework
How to Integrate gulp tasks with SharePoint Framework Toolchain
How to Provision SharePoint assets with solution packages
How to Upgrade SharePoint Framework client side solutions in SharePoint Online
Create new web part project
You need to perform following steps:
- Create new project directory at your opted location
- Go to project directory
- Create project using Yeoman SharePoint Generator
It will ask for few inputs, provide the inputs as follows:
- Solution name? helloworld-webpart
- Type of client-side component to create? WebPart
- What is the web part name? HelloWorld
- What is your web part description? This is my first client side web part using SharePoint Framework
At this point, Yeoman will install dependencies and generate files for HelloWorld web part. Once processing is completed, it will show success message.
Using Code Editor
This solution is build using HTML/Typescript. You can use any editor that support client side development.
Preview web part
Run the following command to establish trust
You will see a security warning as below, click Yes to install.
Now you have installed developer certificate. Run following command to build and preview your web part.
You may be asked for warning. Click Allow access.
SharePoint client side development tool gulp is a task runner which performs build processes tasks such as:
- Run tools to call bundling and minifying tasks before each build
- Compile CASS to CSS
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.
You can stop gulp by choosing Ctrl+C in command prompt where gulp is running. Then you will provide answer Y to stop it.
To Be Continued…
Hope you enjoyed reading it.
Please don't forget to Share, Follow and Like to get updated with latest posts.
It gives me motivation to share more knowledge with you.
Project Management Professional (PMP) and Microsoft certified, motivated, energetic and accomplished Project Manager / Architect with 15+ years of work experience in Management, Architecture, Analytics, Development and Maintenance. I have been fortunate to be a part of over 25+ .Net / SharePoint projects delivery with various companies across different industry sectors. This has provided me a valuable insight and experience especially in successful implementation of SharePoint based solutions.
My experience in Web application implementation includes technology strategy and road-map definition, business and technical requirements identification, governance, platform architecture, solution design, configuration, development, quality assurance, training, post-production support, team lead and overall project delivery along with project management.
Satyendra Mishra holds a B.Tech. in Computer Science & Engineering and PG Diploma in Advance Computing from Center for Development and Advance Computing, Pune, India. He is also a certified Project Management Professional (PMP).
I love to share Project Management Tips and Tricks by writing Blogs in the Project Management India Community. I have written around 300+ articles in the Project Management, .Net, SharePoint and related client side technologies.
3 thoughts on “How to Build SharePoint Framework client side web part – I”