SharePoint Framework using React JS Part 1 - Setup Configurations

What is SPFx?

SPFx is known as SharePoint Framework, which is used for modern development using Node & type script.

SharePoint stands out as an enduring and robust collaboration tool that has evolved over decades. Adding to its capabilities, the SharePoint Framework serves as both a page and web part model, offering comprehensive support for client-side development.

SharePoint Development Cycle
 

Farm Solutions

SharePoint development initially revolved around Farm Solutions, employing WSPs and full trust code. While highly powerful, enabling developers to execute a wide range of actions within the SharePoint Farm, this approach posed challenges during upgrades and made maintaining security a complex task.

Sandbox Solutions

Introduced as a restricted environment where code execution was confined within predefined limits.

Add-Ins (App Model)

Introduced in SharePoint 2013 and Office 365, the App Model relies on frame-based integration. Despite its advantages, this approach comes with certain drawbacks.

Script Injection

Involves using Content Editor and Script Editor web parts. While granting extensive control over SharePoint pages, this is not the recommended approach by Microsoft.

No-script Capability

A tenant-wide setting designed to eliminate content editor web parts and scripts from pages.

SharePoint Framework

Microsoft's custom and supported solution allows the embedding of code within SharePoint sites. This offers a more modern and secure approach to SharePoint development.

Necessary Skills and Tools for SPFx

• Development using NPM and Node
• Proficiency in TypeScript
• Familiarity with the Visual Studio Code Editor
• React JS (Opting for React JS when developing SPFX web parts)

To manage Node.js installations and versions in relation to supported versions and configurations, you can utilize NVM (Node Version Manager). The site provides information on versions and compatibility.

• SharePoint Framework Compatibility

Once you have reviewed all compatibility and versions, the next step is to install NVM. Below are screenshots illustrating the installation process for your reference.

Absolutely, checking the existing Node.js versions and installing a specific version using NVM involves the following steps.

Check Existing Versions

Run the following command to list the existing Node.js versions installed: nvm list.

This will display the versions currently installed on your system.

Install Node.js

If the version you need is not installed, you can install a specific version using the following command: nvm install 16.20.0

Replace 16.20.0 with the desired Node.js version.

By following these steps, you can check the existing Node.js versions and install a specific version if needed using NVM.

In this article, we introduced the SharePoint Framework and delved into the Node-based tool. The key commands covered include.

• Use the nvm list to view the existing list of Node.js versions.
• Execute nvm install "version" to globally update npm to the latest version.

The subsequent article will guide you through the installation process of SharePoint Framework and its associated technologies.

• SharePoint Framework using React JS - Part 2