SharePoint Framework: How To Prepare Environment For Development

Article
1/17/2024

Microsoft has introduced another development methodology called SharePoint Framework, which is claimed more flexible than earlier approaches like Farm Solutions, Sandbox Solutions, and SharePoint Add-ins.

SharePoint Framework is compatible with a complete Web Development Stack with an inherent support to all modern JavaScript frameworks like React, Knockout, Type Script and so on.

In order to get better insight, it's recommended you to refer to the Webinar by Andrew Connell.

In this article, we will look at steps required to get a developer machine ready for starting with SharePoint Development using SharePoint Framework.

Following image displays the steps to set up the development machine:

https://howtodowithsharepoint.files.wordpress.com/2017/04/16.png?w=800

Step 1: Installation of Node JS

To download Node JS: https://nodejs.org/en/

As per recommendation from the Technical Community, it is advisable to go for LTS Version of Node JS.

Download the latest version available as shown below:

https://howtodowithsharepoint.files.wordpress.com/2017/04/31.png?w=800

Run the installer and follow the default options as shown below:

Click Next

https://howtodowithsharepoint.files.wordpress.com/2017/04/41.png?w=800

Accept license agreement and click Next

https://howtodowithsharepoint.files.wordpress.com/2017/04/51.png?w=800

Leave the default installation directory and click Next

https://howtodowithsharepoint.files.wordpress.com/2017/04/61.png?w=800

Continue with default features and click Next

https://howtodowithsharepoint.files.wordpress.com/2017/04/71.png?w=800

Click Install to start installation of Node JS

https://howtodowithsharepoint.files.wordpress.com/2017/04/81.png?w=800

Wait until installation has been completed

https://howtodowithsharepoint.files.wordpress.com/2017/04/91.png?w=800

Click Finish once the installation has been completed

https://howtodowithsharepoint.files.wordpress.com/2017/04/101.png?w=800

Now in order to test the installation, launch Windows PowerShell Prompt with Administrator privilege.

Type command “npm -v”. If the installation is successful you can see the version of Package Manager (NPM).

Note: NPM is the Package Manager that's used for dependency management so that you no longer have to manually download and manage your scripts.

https://howtodowithsharepoint.files.wordpress.com/2017/04/111.png?w=800

Step 2: Visual Studio Code

You can download Visual Studio Code from https://code.visualstudio.com/

Since this development environment is using Windows Server 2012 R2 as a base operating system, download the suitable version.

https://howtodowithsharepoint.files.wordpress.com/2017/04/131.png?w=800 https://howtodowithsharepoint.files.wordpress.com/2017/04/141.png?w=800

Once downloaded, run the installer and proceed as follows.

Click Next to initiate the installation

https://howtodowithsharepoint.files.wordpress.com/2017/04/151.png?w=800

Accept the license agreement and click Next to continue

https://howtodowithsharepoint.files.wordpress.com/2017/04/161.png?w=800

Keep the defaults as is and click **Next **to continue

https://howtodowithsharepoint.files.wordpress.com/2017/04/17.png?w=800

https://howtodowithsharepoint.files.wordpress.com/2017/04/18.png?w=800

Select required options and click Next

https://howtodowithsharepoint.files.wordpress.com/2017/04/19.png?w=800

Click Install to start the installation

https://howtodowithsharepoint.files.wordpress.com/2017/04/20.png?w=800

Wait until installation has completed

https://howtodowithsharepoint.files.wordpress.com/2017/04/211.png?w=800

Click Finish to complete the installation process

https://howtodowithsharepoint.files.wordpress.com/2017/04/22.png?w=800

On completion, the install will launch the Visual Studio Code window to ensure installation is successful.

https://howtodowithsharepoint.files.wordpress.com/2017/04/23.png?w=800

Step 3: Install Yeoman & Gulp

Yeoman scaffolds out a new application, writing your build configuration (e.g Gulpfile) and pulling in relevant build tasks and package manager dependencies (e.g npm) that you might need for your build.

Gulp is the build System used to build, preview and test your project.

In order to install Yeoman and Gulp, launch Windows PowerShell prompt with Administrator privilege.

Enter command “npm install -g yo gulp” and Enter.

This command will perform a global installation of Yeoman and Gulp.

https://howtodowithsharepoint.files.wordpress.com/2017/04/24.png?w=800

Wait until installation has completed

https://howtodowithsharepoint.files.wordpress.com/2017/04/25.png?w=800

https://howtodowithsharepoint.files.wordpress.com/2017/04/26.png?w=800 https://howtodowithsharepoint.files.wordpress.com/2017/04/27.png?w=800 https://howtodowithsharepoint.files.wordpress.com/2017/04/28.png?w=800

Once done successfully it will return with command prompt without any error message.

Step: 4 Install SharePoint Yeoman Plugin (SharePoint Client Side Libraries)

In order to install SharePoint Client Side Libraries enter the following command:

**“npm install -g @microsoft/sharepoint”**

https://howtodowithsharepoint.files.wordpress.com/2017/04/29.png?w=800

Wait until the installation has completed.

https://howtodowithsharepoint.files.wordpress.com/2017/04/30.png?w=800 https://howtodowithsharepoint.files.wordpress.com/2017/04/311.png?w=800

Step: 5 Install SPFX Developer Certificate

Local Workbench Site, which is used to test WebParts locally using SharePoint Context, will notify you with the error that it is not configured to load scripts from localhost.

In order to avoid this error message, we need to install SPFX Developer Certificate by using the following command:

“gulp trust-dev-cert”

https://howtodowithsharepoint.files.wordpress.com/2017/04/32.png?w=800

Wait till installation has been completed.

Click Yes on the Security Warning to accept installation of certificate.

https://howtodowithsharepoint.files.wordpress.com/2017/04/34.png?w=800

With this Step 5, SharePoint Framework and all related dependencies are installed successfully. It verifies the installation and in the following steps, we will perform validations.

Step: 6 Create SharePoint Project

Enter following command **“yo @microsoft/sharepoint”**

https://howtodowithsharepoint.files.wordpress.com/2017/04/35.png?w=800

This command will initiate the Project Configuration for SPFX based SharePoint Solution.

This command will take input from the user to configure the project attributes like project name, description, directory, development environment and so on.

https://howtodowithsharepoint.files.wordpress.com/2017/04/36.png?w=800

Input all information required and enter to proceed with Project configuration.

Wait till Project has been created.

https://howtodowithsharepoint.files.wordpress.com/2017/04/37.png?w=800 https://howtodowithsharepoint.files.wordpress.com/2017/04/38.png?w=800

Once project has been created successfully, we will get command prompt returned without error.

Step: 7 Execute First Project

Now this is the time to finally run the Project and testify the SharePoint Framework.

In order to run the project enter the following command:

“gulp serve” (case sensitive so be careful)

https://howtodowithsharepoint.files.wordpress.com/2017/04/39.png?w=800

Wait until the project initializes.

https://howtodowithsharepoint.files.wordpress.com/2017/04/40.png?w=800

Once the Project initialized successfully, we can see SharePoint Workbench launch WebPart placeholder, mimicking SharePoint Web Page.

On this page, you can add the WebPart that has been deployed locally without using SharePoint context.

https://howtodowithsharepoint.files.wordpress.com/2017/04/411.png?w=800

On click of Add button we can see available WebParts listed. Select the WebPart in question and add it to the Page.

https://howtodowithsharepoint.files.wordpress.com/2017/04/42.png?w=800

Once added we can see the WebPart on the Page. This ensures that we have done all configuration as expected.

https://howtodowithsharepoint.files.wordpress.com/2017/04/43.png?w=800

In order to open the Project Code we can right-click the solution directory and choose option “Open with Code”.

https://howtodowithsharepoint.files.wordpress.com/2017/04/44.png?w=800

And we can see the Visual Studio Code launched with project dependent files.

https://howtodowithsharepoint.files.wordpress.com/2017/04/45.png?w=800

Command Summary

https://howtodowithsharepoint.files.wordpress.com/2017/04/46.png?w=800

Share via