Blogs

July 5, 2017

Prepare environment for SharePoint Framework (SPFx) Development

Microsoft has already announced the General Availability for SharePoint Framework. We can develop modern web parts for SharePoint using SharePoint Framework (SPFx). Web Parts developed using SPFx can be added to modern view pages as well as classic pages in SharePoint.

A. Open Node.js Command Prompt.B. Navigate to the directory where you want to have your solution located at (e.g. cd c:\SPFx).C. Execute command: yoD. This will list down the available generators. As we have already installed Microsoft SharePoint Generator, this will appear as an option here.E. Select “Microsoft SharePoint Generator” and press enter.

F. This will ask for below details, enter appropriate details and move forward:

i. Solution Name – e.g. “HelloWorld”.ii. Select “Use the current folder” option.iii. You can select the JavaScript Web Framework from available options. I have selected “No JavaScript Web Framework” option for this application.iv. What is your webpart name? – e.g. “HelloWorldWP”v. What is your webpart description? – e.g. “Hello world web part developed using SharePoint Framework.”.vi. This will take a few minutes to prepare the solution.

G. Once solution is created, we can see success message for solution creation as shown below:

H. To check the solution, open the solution in Visual Studio Code from file system directory (C:\SPFx) where we created the solution.

I. As this post is focused on to prepare the development environment for SPFx, we will not go in depth with the source code, but as we can see in below screenshot, default Hello World web part appears in the solution:

Run SPFx solution on development environment:

A. Open Node.js Command Prompt and navigate to the directory where we created the solution (C:\SPFx).

B. Execute command “gulp serve” as shown in below screenshot:

C. On execution, we get SharePoint User Interface in browser on localhost (It is NOT required to have SharePoint installed on development environment). And when we click “+” button on modern UI, we can see Hello World web part in available options as show below:

D. When web part is added on the page, we can see the same as shown below:

So, the environment is prepared and
verified for SharePoint Framework (SPFx) development. For verification, we have
used default Hello World web part, we can develop the web parts as per
requirements.