SharePoint Framework (SPFx) Development Machine Setup

SharePoint Framework is the way to go for the SharePoint developers, having said that it’s of utmost importance that SharePoint developers like me start preparing ourselves for this next gen development model for SharePoint.

In this post, I will guide you through a step by step process which will help you setup your development machine with the required set of tools for SharePoint Framework development.

I will not be discussing any coding languages which are required or supported for SharePoint Framework development; I will be focusing only on the toolset and other prerequisites for now.

For those who are still in doubt about what actually SharePoint Framework is all about, I suggest you to through some online articles which give an overview of this development model in SharePoint. The best place to start doing so is none other than the dev.office.com site. Click here to view an article which gives a brief overview of this.

On contrary to traditional SharePoint development practices, SPFx development environment can be setup on Linux or Mac OS as well, not just on Windows. This is primarily possible because the complete toolset which is required to set up the development environment is an open source.

For the benefit of all, I will be sticking to Windows during the entire length of this article.

Node.js and npm setup.

Node.js provides a JavaScript based runtime environment. The best attribute is its light weight. Also, a lot of JS tools required for SPFx are based on node.js. You can understand the analogy as the traditional SharePoint development tools were based on the .NET framework.

Node.js would form the base of the development pyramid and you may not require to directly interact with it during the course of development using the SPFx model. However, npm (node package manager) would be required a lot in order to install various other dependent modules which you may need during development. To understand and learn more about npm, please go through some of the articles online. Here is a link to one which I recommend.

Installing Node.js

1. Download the latest LTS version of node.js from nodejs.org.
2. Remember, Microsoft supports the LTS version of node.js, not the current version.
3. The .exe is easy to install. You can choose all the default settings and finish the installation.
   
   
   
   
   
   
   

4. This .exe will install both, node.js and npm. It will also make it available from the PowerShell command line.
5. After the installation is completed, launch the PowerShell window as an Administrator.
6. To confirm the installation is successful, run the command:
   
   npm –v
   
   
   

Installing Windows Build Tools

1. Launch the PowerShell window as Admin and type the command given below.
   
   npm install -g --production windows-build-tools
   
   The command above has three parts.

• ‘npm install’ : Standard npm command for installing any package from the npm package library
• ‘-g & --production’: Switches for the install command. ‘–g’ specifies that the install is to be done globally. ‘--production’ directs npm to install the tools in production mode.
• ‘windows-build-tools’ : Package name which is to be installed.
  
  

2. Once you execute the command, it will take several minutes to complete as it downloads and installs all the needed components. One of them is Python.
3. Once the installation completes, you will be presented with the complete package tool dependency tree. This is how you will confirm the installation is done.
   
   
   

Installing and creating project with Yeoman.

Yeoman is a web scaffolding tool for modern webapps. It’s a node.js module, can be installed via npm and helps us generate the project folder structure.  For more details on what other capabilities Yeoman has, visit the official site http://yeoman.io/

1. For installing the Yeoman SharePoint Web Part Generator, launch the PowerShell window in admin mode and run the command.
   
   npm install @microsoft/generator-sharepoint –g
   
   In the above command, @microsoft is the scope or namespace in npm.
   
   
   

2. In the above step, we installed the generator which will be used by Yeomen to scaffold the SharePoint web part project. But to use this, we need to install the Yeomen package itself. You can install that by simply running the following command on the PowerShell window.
   
   npm install -g yo
   
   
   
   Post installation, you will be presented with the dependency tree, as it does for any other npm package.

Hello World Web part

1. Launch the Windows PowerShell window.
2. Create a directory where you want to create your project and navigate to the path.
3. In the below screenshot, you can see that I have created a new folder in the d: drive and have navigated to the same.
   
   
   

4. Now, to create your first SPFx project, run the command.
   
   yo @microsoft/sharepoint

5. It will prompt you for the first time asking to send some anonymous information about the product usage.
6. It will ask you a series of questions, similar to the Visual Studio New Project wizard which will help you set up your project.
7. It will also ask you the framework (js) which you want to use for the development. Once you chose the framework, Yeomen will install all the dependent libraries. I have chosen React.js as the development environment.
   
   
   
   
   

Congratulations, you just created your first SPFx project. Go ahead and explore the files and folders created in the path you specified in the PowerShell window.

In the next post, I will share the details on how you can edit/debug/deploy your HelloWorld webpart to a SharePoint site.