How To Setup Environment For SharePoint Framework In MacOS

Introduction

 
SharePoint Framework is one of the most loved development frameworks for the SharePoint developer, as it is cross-platform and completely based on front end technologies like reactjs, vuejs, and angular.
 
Let's understand how we can set up SharePoint Framework (SPFx) in Mac OS.
 

Step 1 - Install Node.js

 
The first step for setting up our development environment in Mac OS is to install Node.js which is the building block. To install Node.js, follow the below steps.
 
We will use nvm to install nodejs. nvm is a tool that will help us to switch between node versions seamlessly.
  1. curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.5/install.sh | bash
How To Setup Environment For SharePoint Framework In MacOS
  1. export NVM_DIR="$HOME/.nvm"
  1. [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
  1. [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
How To Setup Environment For SharePoint Framework In MacOS
  1. nvm install 10.21.0
How To Setup Environment For SharePoint Framework In MacOS
 
Alternate way without using nvm:
  1. Navigate to here.
  2. Download the pkg file for node 10
  3. Install the downloaded pkg file
Once node is installed we can start to install other dependencies for SharePoint Framework. To test whether the node is installed correctly, run the below command:
 
node -v
npm -v
 

Step 2 - Install gulp and Yeoman

 
Now let us install gulp and yeoman where gulp is a task runner and yeoman is a scaffolder. Use the below command:
  1. npm install gulp yo —global   
How To Setup Environment For SharePoint Framework In MacOS
 

Step 3 - Install Yeoman SharePoint generator

 
Now let's install the Yeoman SharePoint generator which will help in creating a client-side solution. We can even use the PnP SharePoint Framework generator. To learn more about PnP Yeoman generator, check out this link.
 
Use the below command to install the Yeoman SharePoint generator:
  1. npm install @microsoft/generator-sharepoint --global   
How To Setup Environment For SharePoint Framework In MacOS
 

Step 4 - Download and Install Visual Studio Code

 
Now we are ready to create our SharePoint Framework Project. For that, we are required to have a code editor. We can use one of my favourite editors, Visual Studio Code

To install VS Code, navigate to this link, download the pkg file, and install it.
 

Conclusion

 
It is very easy to set up the environment for SharePoint Framework, and hence, it has become very popular among developers. Tooling is cross-platform, so we can use any OS of our choice.