Setting Up SPFx Developer Environment Using NVM

Introduction

When starting development using SharePoint framework, we need to set up our Developer machine (Windows 10/ Mac OS) with some of the opensource tools. Before we set up our dev machine with required tools, let us try understanding the SPFx tool chain. Please note that all the development that is done using SPFx is rendered on client side and there is no server-side rendering involved. This article focuses on Windows 10/11 machines using Node Version Manager (NVM). The advantages of using NVM are explained in the article (installing NVM) which I mentioned in references section. Similar steps can be followed to install on Mac OS and Linux instances which I have mentioned in references section.

SPFx Tool Chain

• Yeoman: This is basically a generator system that can be run with ‘yo’ command, that will scaffold the project structure based on the type of component you develop using SPFx. This is like creating new console application, or new class or empty asp.net project, etc. using Visual Studio IDE.
• Gulp: Gulp is a build system used to build, preview, and test your project. This is like build in visual studio IDE, which compiles your project after development and generates required packages.
• Node.JS: NodeJS is the runtime needed for your applications to run on the client-side browser. This is just line .NET Runtime for ASP.NET apps.
• NPM: NPM stands for Node Packet Manager, which is used to install all the dependencies for your application. You no longer must manually download and manage all the scripts and dependencies. This is like using NuGet packet manager in Visual Studio IDE.
• Webpack: The Webpack tool is used to combine all the JavaScript and CSS files in your project into a single JavaScript bundle. During the runtime, the webpack loads only required modules for your SPFx project thereby increasing the performance of your application. Imagine, in your asp.net application when you need to interact with different endpoints, based on the run mode, (debug/release) often it is required to change those settings manually. Using Webpack with SPFx projects, you no longer need to maintain these settings manually, webpack helps you to interact with required modules and endpoints during runtime.

Below screenshot depicts the comparison between traditional tools (top) vs Modern open-source tools(bottom).

Setting up your development machine

To start developing SPFx components, it is required to have below tools set up and configured properly in order.

NVM (Node Version Manager)

This is used to provide the different versions of node run time for the SPFx development. The steps are detailed in the article ‘Installing node version manager‘ in the references section.

Node.JS

After setting up the NVM, you can install the node.js which is required to create run time for your project. You can follow the same article ‘Installing node version manager’. Please note that SPFx team makes sure that any SPFx latest version they release most of the times it will be supported by node LTS version. You can copy paste the below command to install the latest version of node LTS version. LTS stands for Long Term Support which is usually the stable version. 

nvm install lts

Install Gulp

For installing gulp on your machine open the command prompt with elevated privileges and run the following command.

npm install gulp-cli --global

 

Install Yeoman

For installing Yeoman on your machine open the command prompt with elevated privileges, and run the following command.

npm install yo --global

 

Install Yeoman SharePoint generator

For installing Yeoman SharePoint generator on your machine open the command prompt with elevated privileges and run the following command. You can continue using the same command window session that was set up for gulp and yeoman.

npm install @microsoft/generator-sharepoint --global

 

If you are doing Teams Development using SPFx then you need to intall the teams generator by running the following command.

npm install generator-teams --global

Conclusion

Thus, in this article, we have understood the SPFx development environment tool chain and steps needed to set up the developer environment. 

References

• https://yeoman.io/
• https://docs.microsoft.com/en-us/learn/modules/sharepoint-spfx-get-started/4-spfx-development-environment
• https://www.voitanos.io/blog/leverage-webpack-define-plugin-spfx/
• https://docs.microsoft.com/en-us/sharepoint/dev/spfx/compatibility
• https://almbok.com/_detail/sharepoint/pasted/20191210-144111.png?id=sharepoint%3Aspfx_vs_traditional_tool_chain_comparison
• https://www.c-sharpcorner.com/article/installing-node-version-manager/
• https://blog.npmjs.org/post/78165272245/more-help-with-self-signed-cert-in-chain-and-npm
• https://stackoverflow.com/questions/9626990/receiving-error-error-ssl-error-self-signed-cert-in-chain-while-using-npm