SharePoint SPFX Framework Tutorial

This tutorial will walk you through the process of building a SharePoint Framework (SPFx) web part. The SPFx framework is a set of tools for building SharePoint-compatible applications that can run on both SharePoint Online and SharePoint 2019.

Step 1: Install Node.js and Visual Studio Code

Before we get started, you’ll need to install Node.js and Visual Studio Code (VS Code) on your machine. You can download the latest version of Node.js from the official website and VS Code from the Microsoft Store.

Step 2: Create a new project using Yeoman

To create a new SPFx web part, we’ll use Yeoman, a package manager for JavaScript. Run the following command in your terminal or command prompt:

yo @microsoft/sp-cli

Follow the prompts to choose the type of application you want to build (in this case, a web part) and give it a name.

Step 3: Choose the template

You’ll be presented with a list of templates. For this tutorial, we’ll choose the “Blank Web Part” template.

Step 4: Configure the project

Once you’ve selected the template, Yeoman will ask you to configure your project. Give it a name and provide any additional information as requested.

Step 5: Create the web part

Now that our project is set up, let’s create the actual web part. In the root directory of your project, create a new file called “WebPart.ts” and add the following code:

import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

export default class MyWebPart extends BaseClientSideWebPart {
  constructor(context: any) {
    super(context);
  }

  render(): void {
    this.domElement.innerHTML = `<p>Hello World!</p>`;
  }
}

This code defines a basic web part that displays the text “Hello World!”.

Step 6: Register the web part

Next, we need to register our web part with SharePoint. Open the file “config.json” and add the following code:

{
  "webPartName": "MyWebPart",
  "manifestVersion": "1.0.0"
}

Step 7: Package and deploy

Now that we’ve built and registered our web part, it’s time to package and deploy it. Run the following command:

gulp

This will create a ZIP file containing your web part.

Step 8: Install and configure SharePoint

Finally, let’s install and configure SharePoint on your machine. You can download the latest version of SharePoint from the Microsoft website.

Once you have SharePoint installed, navigate to the “Site Settings” page and click on the “Web Parts” link. Then, add a new web part and select our “MyWebPart” from the list of available web parts.

Congratulations! You’ve now built and deployed your first SPFx web part.

That’s it for this tutorial. In the next tutorial, we’ll explore more advanced topics such as using React or Angular to build your web part, and working with SharePoint data.