SharePoint Framework (SPFx) Development Machine Setup

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.