SharePoint Framework: How to Prepare Environment for Development with SharePoint Framework

Microsoft have introduced another development methodology called as SharePoint Framework, which is claimed more flexible than 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 a better insight I would recommend you to refer to the Webinar by Andrew Connell.

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

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

1

Step 1: Installation of Node JS

Search for “node js” or and navigate 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: https://nodejs.org/en/

2

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:

3

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

Click Next

4

Accept license agreement and Click Next

5

Leave the default installation directory and Click Next

6

Continue with default features and Click Next

7

Click Install to start installation of Node JS

8

Wait until installation has been completed

9

Click Finish once the installation has been completed

10

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

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

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

11

Step 2: Visual Studio Code

Search for “visual studio code” or 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:  https://code.visualstudio.com/

12

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

1314

Once downloaded run the installer and proceed as follows-

Click Next to initiate the installation

15

Accept the license agreement and click Next to continue

16

Keep the defaults as it is and click Next to continue

17

18

Select required options and click Next

19

Click Install to start the installation

20

Wait until installation has been completed

21

Click Finish to complete the installation process

22

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

23

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 & Gulp launch windows PowerShell command prompt with Administrator privilege

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

This command will perform global installation of Yeoman and Gulp

24

Wait until installation has been completed

25

262728

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 following command

“npm install  -g  @microsoft/sharepoint”

29

Wait until the installation has been completed

3031

Step: 5 Install SPFX Developer Certificate

Local Workbench Site, which is used to test the WebParts locally with 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”

32

Wait till installation has been completed

Click Yes on the Security Warning to accept installation of certificate

34

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

Step: 6 Create SharePoint Project

Enter following command “yo  @microsoft/sharepoint”

35

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.

36

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

Wait till Project has been created

3738

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)

39

Wait until the project initialize

40

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.

41

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

42

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

43

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

44

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

45

Command Summary

46

That is all for this demo.

Hope you find it helpful.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s