This tutorial will guide you through the process of building a custom SharePoint framework (SPFx) web part using the SPFx CLI.
Step 1: Install Node.js and the SPFx CLI
Before we start, make sure you have Node.js installed on your machine. You can download it from the official website. Once installed, open your terminal or command prompt and run the following command to install the SPFx CLI:
npm install @microsoft/sp-cli -g
Step 2: Create a New SPFx Project
To create a new SPFx project, run the following command in your terminal or command prompt:
spfx init –template webpart
This will create a new directory with the basic structure for an SPFx web part.
Step 3: Configure the Web Part Properties
In the config/config.json file, update the webPartName and description properties to give your web part a unique name and description. For example:
{
“webPartName”: “MyCustomWebPart”,
“description”: “A custom web part that displays information about my favorite coffee shop.”
}
Step 4: Create the Web Part JavaScript File
In the src directory, create a new file called myCustomWebPart.js. This file will contain the JavaScript code for your web part.
Here’s an example of what the file might look like:
import { WebPart } from ‘@microsoft/sp-webpart-base’;
import { SPComponentLoader } from ‘@microsoft/sp-loader’;
export class MyCustomWebPart extends WebPart {
render(): void {
this.domElement.innerHTML = ‘Hello World!’;
}
}
Step 5: Add the Web Part to Your SharePoint Site
To add your web part to your SharePoint site, run the following command:
spfx deploy
This will package and deploy your web part to your SharePoint site. You can then navigate to your site and add the web part to a page.
That’s it! With these steps, you should now have a custom SPFx web part up and running on your SharePoint site.
Note: This is just a basic tutorial to get you started with SPFx development. There are many more advanced features and capabilities that you can explore once you have the basics down.