How to setup SharePoint Framework development environment to develop SharePoint custom web parts and Microsoft Teams Apps

Developing custom web parts and Microsoft Teams applications with SharePoint Framework (SPFx) requires a properly configured development environment. Setting up this environment ensures that you have the necessary tools and dependencies to build powerful solutions for SharePoint and Teams platforms. In this blog post, we will guide you through the process of setting up your SharePoint Framework development environment, covering key steps such as installing Node.js, Visual Studio Code, Yeoman, and Gulp. By following these steps, you’ll be well-equipped to build and deploy custom solutions that improve collaboration and productivity in SharePoint and Teams. So, let us dive in and get your SPFx development environment up and running!

SPFX & Node JS version compatibility

Step 1 - Download and Install Node JS LTS

The first step is to install Node.js LTS on your machine. Node.js is a JavaScript runtime that is required for SPFx development.

Download the MSI installer from https://nodejs.org/download/release/v16.20.1

Note : Node-v16.20.1 version is compatible with SPFx version 1.17.4, hence we recommend to download Node- v16.20.1-x64.msi

Run the installer

1. On the welcome screen, click Next

2. The next screen is the End User License Agreement, check ‘I agree…’ and click Next

3. On the next screen select the destination path ‘c:\Program files\nodejs’, you can also select a different path.

4. In the next screen to select functions, keep everything default.

5. On the next screen, you will see the Install button. Click Install.

6. Depending on your security settings, you may be prompted to allow the following. Click Yes.

7. Once you are finished, the following screen will appear, click Finish.

That’s it, Node JS is installed. Click on the Windows icon and you will see the command prompt of Node JS. Open the command prompt of Node JS.

You should see the following screen,

Step 2 - Installing Visual Studio Code

We can use any code editor to develop SPFx solutions, but mostly Visual Studio Code is used. Download the stable version of Visual Studio Code from the link below.

https://code.visualstudio.com/download – Please make sure you download the system installer (refer to the screenshot below).

Run the setup wizard and follow the essentially self-explanatory installation instructions. In the Additional Tasks link, use the preferred option given below. This will help you later.

Once the installation is complete, you should get the success message below.

Step 3 - Install Yeoman and Gulp

These are Node JS-based tools that help in creating, building and debugging SPFx solutions.

Go to the Node JS command prompt
Enter the following comman
npm install -g yo gulp

Yeoman and Gulp packages will be downloaded, we use the -g parameter so they will be installed globally in your Node JS environment.
Once the installation is complete, you should see the following screen.

Step 4 Install SharePoint Yeoman generator

Next, we will install the SharePoint Yeoman generator, which will help create the project structure of the SPFx solution.
Run the following command in the Node JS command prompt.
npm install -g @microsoft/generator-sharepoint

You should see the following success message.

Step 5 - Trusting self-signed Developer certificate

The local SharePoint server used for testing web parts uses HTTPS. This is developed with a self-signed developer certificate. So, we need to trust the self-signed developer certificate for our development environment.
This only needs to be done once, but it needs to be done in the SPFx project root folder. So, you can do this as soon as we have created our first client-side web part Hello world.
Run the following command in the Node JS prompt.

gulp trust-dev-cert

SPFx development environment compatibility.

With each new release of the SharePoint Framework, support for newer version libraries is constantly being added to ensure that the toolset remains up-to-date.

The following table lists SharePoint Framework and compatible versions of common tools and libraries:

SPFx	Node.js (LTS)	NPM	TypeScript	React
1.17.4	v16.13+	v5, v6, v7, v8	v4.5	v17.0.1
1.17.3	v16.13+	v5, v6, v7, v8	v4.5	v17.0.1
1.17.2	v16.13+	v5, v6, v7, v8	v4.5	v17.0.1
1.17.1	v16.13+	v5, v6, v7, v8	v4.5	v17.0.1
1.17.0	v16.13+	v5, v6, v7, v8	v4.5	v17.0.1
1.16.1	v16.13+	v5, v6, v7, v8	v4.5	v17.0.1
1.16.0	v16.13+	v5, v6, v7, v8	v4.5	v17.0.1
1.15.2	v12, v14, v16	v5, v6, v7, v8	v4.5	v16.13.1
1.15.0	v12, v14, v16	v5, v6, v7, v8	v4.5	v16.13.1
1.14.0	v12, v14	v5, v6	v3.9	v16.13.1
1.13.1	v12, v14	v5, v6	v3.9	v16.13.1
1.13.0	v12, v14	v5, v6	v3.9	v16.13.1
1.12.1	v10, v12, v14	v5, v6	v3.7	v16.9.0
1.11.0	v10	v5, v6	v3.3	v16.8.5
1.10.0	v8, v10	v5, v6	v3.3	v16.8.5
1.9.1	v8, v10	v5, v6	v2.9	v16.8.5
1.8.2	v8, v10	v5, v6	v2.9	v16.7.0
1.8.1	v8	v5, v6	v2.7, v2.9, v3	v16.7.0
1.8.0	v8	v5, v6	v2.7, v2.9, v3	v16.7.0
1.7.1	v8	v5, v6	v2.4	v16.3.2
1.7.0	v8	v5, v6	v2.4	v16.3.2
1.6.0	v6, v8	v3 (w/ Node.js 6), v5 (w/ Node.js 8)	v2.4	v15
1.5.1	v6, v8	v3 (w/ Node.js 6), v5 (w/ Node.js 8)	v2.4	v15
1.5.0	v6, v8	v3 (w/ Node.js 6), v5 (w/ Node.js 8)	v2.4	v15
1.4.1	v6, v8	v3, v4	v2.4	v15
1.4.0	v6	v3, v4	v2.4	v15
1.3.0	v6	v3, v4	v2.4	v15
1.1.0	v6	v3, v4	v2.4	v15
1.0.0	v6	v3	v2.4	v15

Finally, setting up a SharePoint Framework development environment involves installing Node.js, Visual Studio Code, Yeoman, and Gulp. Additionally, you need to install the SharePoint Yeoman generator and trust the self-signed developer certificate for local testing. By following these steps and ensuring compatibility between SPFx and associated tools, you can create custom web parts and Microsoft Teams apps effectively and efficiently. Best wishes for your coding journey!

About HR365

HR365 leads and serves the industry in application development with focus on Power Apps, Microsoft Teams Apps, SharePoint Apps, Intranet branding, legacy app migration, and has out of box ready to deploy such as Employee Directory 365, Employee Onboarding 365, Helpdesk 365, Contract Management 365, Asset Management 365, Performance Management 365, Timesheet 365, Expense Tracker 365, Time Off Manager 365, and Custom Application. Click Here for more.