SharePoint/SPFx: Returning to Webpart Development Part #1

Recently I was asked to develop a webpart for a modern SharePoint site. My first thoughts were; where do I start, I haven’t done any webpart development for years? I would like to share my journey with you over the next few posts and hope my experience will help new and returning developers along the way.

Development Environment & Tools

Development Tools

Code Editor or Integrated Development Environment (IDE).

If you have not done so already, install your preferred Integrated development environment (IDE). My choice is Visual Studio Code, however there are three supported code editors:

Now you are ready to install or in my case update the development toolchain prerequisites. Pop back to the Microsoft article and follow the steps.

Tip: Hold [Ctrl]+[`] will open the Terminal window in VS Code.

Set up your SharePoint Framework development environment

In my opinion Microsoft has done a good job in publishing a collection of articles describing how to build and deploy your first webpart. I would recommend starting by reading the “Set up your SharePoint Framework development environment” articles to get yourself up and running

Tips:

  1. At the time of writing this article, the SPFx Framework does not support the latest TLS (long term support) version of Node.js. Installing the wrong version will cause you headaches, so read “Important” notes under the Install Node.js section before you install Node.js
  2. Click here to navigate the Node.js v10.x, use the Node.js > Downloads > Previous Releases page.

Already have Node.js installed?

As a Windows 10 user, I opened “Add or remove programs” and entered Node into “Search this list” and checked the version before running executing the node-v10.22.0-x64.msi file.

The following command can be used to check the version installed:

node -v

Trusting the self-signed developer certificate

Don’t forget to configure a self-signed SSL certificate which can be done by running the following command.

gulp trust-dev-cert

You will use this when testing your custom solutions from your development environment which uses HTTPS by default.

Modern Browsers

Even though Google Chrome  is my preferred browser, I like to have Microsoft Edge and Firefox installed for additional testing capabilities.

Tip: I use Google Chrome’s persons (profiles) to switch between Tenants and Accounts. I understand that other browsers now include similar functionality.

Other Tools

Notepad++

I like this code editor for its simplicity and Plugins, such as: JSON Viewer and XML Tools.

Fiddler

Captures all HTTP(S) traffic between your computer and the Internet with Fiddler HTTP(S) proxy. Inspect traffic, set breakpoints, and fiddle with requests & responses.

Postman

Helps you build, connect and test APIs. An example is testing the Microsoft Graph API.

VS Code Extensions

Focused on SPFx development:

  • Debugger for Chrome
  • Debugger for FireFox
  • Debugger for Microsoft Edge
  • ESLint
  • jshint
  • Markdownlint
  • React Native Tools

For Source control:

  • Git Merger
  • GitLens

General Development:

  • Azure Account
  • Azure Functions
  • Azure Repos
  • Beautify
  • C#
  • Code Spell Checker
  • Edit CSV
  • Paste JSON as Code
  • PowerShell
  • Rainbow CSV

Frameworks & Fashion

Back in the mid 2010’s I built a lot of SharePoint webparts and worked with numerous JavaScript frameworks including: jQuery, jQuery UI, Underscore.js, Knockout, Vie.js and experimented AngularJS.

When the SPFx framework came on the scene the “AngularJS verses React (ReactJS)” conversation was fresh. While I built a handful of SPFx Webparts and Extensions I have to acknowledge things have moved on since then…

Back to School

Even though I had done these tutorials a few years ago, I found it invaluable to do them again:

Another great place to start with is the SharePoint Framework Client-Side Web Part Samples website and check out the Getting Started page. You can either clone the GitHub repository or just explore the code online.

My Pitfalls

If you are anything like me, I would recommend avoiding the following pitfalls:

  1. Using someone else’s code may seem like a great idea, however unless it does 90% or more of what you require you may find yourself spending more time trying to understand the code rather than writing new functionality.
  2. Getting bogged down in detail; this can easily happen if like me you enjoy detail. My strategy to avoid this is to draw wire-frames and carry out research (e.g. frameworks etc) before the build officially begins.
  3. Avoid the muddying of data and presentation code/layers; this is an area I can get bogged down in, however on a positive side the cleaner the separation the easier the code is to support and maintain.
  4. Unable to upgrade frameworks. It’s not always obvious what is going on, however if you find your projects are being scaffolded with old version npm packages then try retracing your steps and uninstalling everything including Node, before reinstalling again.

Next time

For my next post I will focus on design and frameworks.

Categories

Recent Posts

  • How to sort an array using Power Automate
    Learn how to sort an array using Power Automate. In this post I share a Power Platform solution containing two example Cloud Flows demonstrating how an array can be sorted. I also briefly explore performance results of running actions in parallel verses serial with some surprising results.
  • How to Add and Remove Accounts from Multi-Select SharePoint Person and Group Fields
    Learn how to use the SharePoint API and Power Automate to add and remove accounts from multi-select Person and Group fields in SharePoint. Our step-by-step guide includes detailed illustrations and examples, as well as an optional Power Platform solution to help you deploy the solution to your tenant. Improve your SharePoint workflow management today!
  • Navigating Microsoft Power Automate Licensing: Challenges, Considerations, and Compliance
    Navigate the complexities of Microsoft Power Automate licensing with insights on challenges, considerations, and compliance. Learn about potential risks, licensing rules, and best practices for organizations using Power Automate. Get guidance on avoiding license breaches, managing premium connectors, and ensuring compliance with Microsoft licensing requirements. Stay informed and take proactive steps to maintain licensing compliance in Power Automate, regardless of your location. Discover practical strategies to optimize your Power Automate licensing and avoid potential pitfalls.
  • SharePoint REST API: How to find the List or Library “__metadata” “type”
    SharePoint REST API is a powerful tool for updating lists and items in SharePoint, but determining the correct “__metadata” “type” for API calls can be confusing. While it’s typically “SP.Data.ListNameItem” based on the list’s URL, there are cases where it may be “SP.Data.ListNameListItem” in certain Office 365 tenants. In this article, we will explore how to find the correct “__metadata” “type” when updating lists or libraries in SharePoint, and also highlight the alternative approach of using the Microsoft Graph API. By understanding this crucial aspect of SharePoint REST API, readers can ensure successful updates and avoid potential errors.
  • “The Age of #AI has begun” said Bill Gates
    March 2023 has been an extraordinary month with the launch of GPT-4 on March 14th, closely followed by #Microsoft’s launch of Copilot preview on March 16th, and Bill Gates’ article, “The Age of AI has begun,” on March 21st.
%d bloggers like this: