SharePoint Framework - How To Prepare Environment For Development With SharePoint Framework

Microsoft has introduced another development methodology called SharePoint Framework, which claims to be more flexible than the earlier approaches like Farm Solutions, Sandbox Solutions, 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, I recommend you refer to the Webinar by Andrew Connell.

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

The image given below displays the steps to set up the development machine.

Step 1

 

Installation of Node JS

Search for node js and navigate  to the link, as shown below to reach to the official download page for Node JS.

You can also follow the direct link to download Node JS at https//nodejs.org/en/

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

Download the latest version available, as shown below.

Run the installer and follow the default options, as shown below.

Click Next.

Accept the license agreement and click Next.

Leave the default installation directory and click Next.

Continue with the default features and click Next.

Click Install to start the installation of Node JS.

Wait until the installation completes.

Click Finish, once the installation completes.

Now, in order to test the installation, launch Windows PowerShell command prompt with an administrator privilege

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

Note NPM is a Package Manager, which is used for dependency management, so that you no longer have to manually download and manage your scripts.

Step 2

 

Visual Studio Code

Search for Visual Studio Code and navigate the link, as shown below to reach to the official download page for Visual Studio Code.

You can also follow the direct link to download Visual Studio Code, which is available at https//code.visualstudio.com/

Since my development environment is using Windows Server 2012 R2 as a base operating system, I can download the suitable version, as per my needs.

Once downloaded, run the installer and proceed, as shown below.

Click Next to initiate the installation.

Accept the license agreement and click Next to continue.

Keep the defaults as they are and click Next to continue.

Select the required options and click Next.

Click Install to start the installation.

Wait until the installation completes.

Click Finish to complete the installation process.

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

Step 3

 

Install Yeoman & Gulp

Yeoman scaffolds out a new Application, writing your build configuration (e.g Gulpfile) and pulling in the relevant build tasks and Package Manager dependencies (e.g npm), which you might need for your build.

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

In order to install Yeoman & Gulp, launch Windows PowerShell command prompt with an administrator privilege.

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

This command will perform global installation of Yeoman and Gulp.

Wait until the installation completes.

Once it is successfully done, it will return with the 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 command given below.

“npm install -g @microsoft/sharepoint”

Wait until the installation completes.

Step 5

 

Install SPFX Developer Certificate

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

In order to avoid this error message, we need to install SPFX Developer Certificate by using the command given below.

“gulp trust-dev-cert”

Wait till the installation completes.

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

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

Step 6

 

Create SharePoint Project

Enter the command “yo @microsoft/sharepoint”

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

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

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

Wait until the project creates.

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

Step 7

 

Execute First Project

Now, this is the time to finally run the project and test SharePoint Framework.

In order to run the project, enter the command given below.

“gulp serve” (case sensitive so be careful)

Wait until the project initializes.

Once the project initializes successfully, we can see SharePoint Workbench launch WebPart placeholder, mimicking SharePoint Web page.

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

On clicking the Add button, we can see the available WebParts listed, select the WebPart in question and add it to the page.

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

In order to open the project code, we can right click the solution directory and choose an option Open with Code.

We can see Visual Studio Code launched with project dependent files.

Command Summary

I hope you found it helpful.