How to set up the best Microsoft 365 development environment

In this post we’re going to go beyond Microsoft’s guide to setting up your SharePoint development environment and get you setup with the best development environment any professional can have. This guide is applicable to both Mac and Windows environments.

Components / Pre-Requisites

Here is a list of the technologies we’ll use. Don’t worry, we’ll go through all of them.

• Microsoft Terminal
• Microsoft 365 Developer program
• VS Code
• NodeJS and nvm for Windows
• Powershell
• M365 CLI

Sign up for Microsoft 365 Developer Program

Microsoft offers developers a test environment to work on Microsoft 365 with sites, solutions, and content optionally added. This is an amazing tool that you should take advantage of.

Sign up on the Microsoft 365 Developer site.

VS Code

We will need to write code and scripts at some point. If you don’t have it yet, install VS Code on any platform.

Microsoft Terminal

If on Windows, I much prefer the Microsoft Terminal app available in the Windows App Store. It runs Powershell by default and supports multiple tabs and other new features. This is an optional step – you can use Powershell if you prefer.

NodeJS

NodeJS is a tool to use Javascript packages locally and write server-side code in Javascript. We need it to install many of the packages used for Microsoft 365 development.

We are not going to install NodeJS from the Node website. Instead we will install a version manager. You may run into situations where you need a different version of Node to support an older solution, and it is important that you be able to smoothly switch from one version to another without uninstalling and replacing.

NVM

On Windows, you may download NVM for Windows here.

On Mac or WSL, install NVM:

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

The command above runs and downloads the install script. The command below ensures that your new ~.nvm directory is added to the correct profile.

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

Full documentation for NVM.

You can use Homebrew on Mac if you prefer.

Install Node

We will start by installing the latest version of Node, which is supported by Microsoft. At time of writing the latest LTS version is v14.17.0.

nvm ls # Lists installed version and available LTS versions
nvm install 14.17.0 # Installs v14.17.0

You can switch between versions in the future via:

nvm use { version } # Switches to user-defined version

Yarn (optional)

I prefer using Yarn instead of NPM as a package manager for my Node projects. This means instead of using the npm command to install packages within projects, we will use Yarn. We will also need to remember to set a no-install flag when we create SPFx solutions.

npm i -g yarn # Installs the yarn package manager globally with npm

And add the global yarn install location to PATH:

export PATH="$(yarn global bin):$PATH"

Install M365 CLI

The CLI for Microsoft 365 is a cross-platform tool to manage Microsoft 365 and create new solutions and automation scripts.

Yarn:

yarn global add @pnp/cli-microsoft365

or NPM:

npm i -g @pnp/cli-microsoft365

Login:

m365 login

Follow the prompts to log in. You should log in to the development tenant you set up at the beginning of this guide.

Install Powershell

On Windows, open Powershell as admin:

Install-Module -Name Microsoft.Online.SharePoint.PowerShell # Install SharePoint Management
Install-Module -Name PnP.PowerShell # M365 PnP Powershell

On Mac, using Homebrew:

brew cask install powershell # Install Powershell
pwsh # Verify Powershell is installed
Install-Module -Name PnP.PowerShell # M365 PnP Powershell inside Powershell shell (see P on left side of terminal)

Install SharePoint Development Tools

If you will develop SPFx or Teams solutions, you will need to install some dependencies first. If you won’t ever develop SharePoint solutions, you won’t need these tools.

This command adds three packages: gulp, which is used to build and serve projects. Yeoman, which is a scaffolding tool to setup your SharePoint projects. And the SharePoint generator template, which works with Yeoman to guide the scaffolding process.

yarn global add gulp yo @microsoft/generator-sharepoint

Start Developing!

Now it’s time to start building solutions. See our other posts for more guides to help you get started.