SharePoint SPFX Tutorial

In this tutorial, we will be exploring the world of SharePoint Framework (SPFx) development. If you are new to SPFx or want to improve your skills, this guide is designed to walk you through the process of building a custom SharePoint application using this powerful framework.

Step 1: What is SharePoint Framework?

The SharePoint Framework (SPFx) is a set of tools and frameworks that allows developers to build custom solutions for SharePoint. It was introduced in 2017 as a way to modernize SharePoint development, making it easier to create robust, scalable, and maintainable applications.

Step 2: Setting Up Your Environment

Before we start building our SPFx application, let’s set up our environment. We’ll need the following:

• Visual Studio Code (or your preferred code editor)
• Node.js (at least version 14.17.0) installed on your machine
• The SharePoint Framework CLI (Command-Line Interface)

To get started, open a terminal or command prompt and run the following command:

npm install -g @microsoft/sp-cli

This will install the SPFx CLI.

Step 3: Creating Your First SPFx Project

Now that our environment is set up, let’s create our first SPFx project. Open your code editor and create a new folder for your project. Navigate to this folder in your terminal or command prompt and run the following command:

spfx new myfirstapp

This will create a new SPFx project with a basic directory structure.

Step 4: Understanding the Project Structure

Let’s take a look at the project structure we just created. We have the following directories:

• src: This is where our code lives. We’ll be writing most of our logic here.
• config: This directory contains configuration files for our app, such as our package.json file.
• node_modules: This is where our dependencies are stored.

Step 5: Building Our SPFx Application

Let’s start building our application! In the src directory, create a new file called MyFirstApp.ts. This will be our main entry point for our app.

In this file, we’ll import some basic types and create a new class that extends the base SharePoint Framework component.

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

class MyFirstApp extends BaseClientSideWebPart {
  // Our code goes here!
}

export default MyFirstApp;

Step 6: Writing Our Code

Now it’s time to start writing some actual code! In our MyFirstApp.ts file, let’s add a simple message that will display when we run our app.

Add the following code:

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

class MyFirstApp extends BaseClientSideWebPart {
  render(): void {
    this.domElement.innerHTML = 'Hello, World!';
  }
}

export default MyFirstApp;

Step 7: Running Our SPFx Application

We’re almost there! Let’s compile and run our app. Run the following command in your terminal or command prompt:

spfx build

This will compile our code and generate a deployable package.

To run our app, navigate to the out directory and look for the file myfirstapp.dll. This is our compiled application! To run it, simply double-click on this file (or open it in your preferred runtime environment).

And that’s it! We’ve just built and run our first SPFx application. In this tutorial, we covered setting up our environment, creating a new project, understanding the project structure, building our app, writing our code, and running our application.

In the next part of this series, we’ll explore more advanced topics such as using React or Angular to build our UI, working with SharePoint data, and deploying our application to production. Stay tuned!