Skip to content

A Simple Guide to Setup your Mac (OSX or macOS) Development Environment for the SharePoint Framework

Bill Bär ('bɛər) > Posts > A Simple Guide to Setup your Mac (OSX or macOS) Development Environment for the SharePoint Framework

| Getting Started SharePoint Framework SPFx Tutorials

Prerequisites Before you can build and test solutions on a live SharePoint environment, you will need an active Office 365 Tenant.  Follow the instructions https://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant to setup your Office 365 Developer Tenant.

Overview

The SharePoint Framework is a Page and Part model that enables fully supported client-side development, easy integration with the Microsoft Graph and support for open source tooling. This guide will help you prepare your OSX or macOS development environment for developing solutions with the SharePoint Framework.

Install Homebrew

Homebrew is a package manager for Mac. brew Open Terminal and enter the following code to install Homebrew: /usr/bin/ruby -e "$(curl -fsSL [https://raw.githubusercontent.com/Homebrew/install/master/install](https://raw.githubusercontent.com/Homebrew/install/master/install))" Homebrew will also install XCode Command Line Tools. Enter the following code to verify Homebrew is up to date: brew update Enter the following code to ensure your system is ready to run brew: brew doctor Enter the following code to add Homebrew’s location to your .bash_profile or .zshrc file: export PATH="/usr/local/bin:$PATH"

Install Node.js and npm

npm (Node Package Manager) is a package manager for Node.js that allows you to quickly and easily set up local Node environments and plugins. nodejs Enter the following code to install Node.js and npm: brew install node Optional Enter the following command to install Grunt: npm install -g grunt-cli

Install Visual Studio Code

Download and install Visual Studio Code at https://code.visualstudio.com/ and copy the package to your Applications folder. vscode

Install Yeoman and Gulp

Yeoman helps you kick-start new projects, and prescribes best practices and tools to help you stay productive. SharePoint client-side development tools include a Yeoman generator for creating new web parts. The generator provides common build tools, common boilerplate code, and a common playground web site to host web parts for testing. yeoman Enter the following command to install Yeoman: npm install -global yo Gulp.js is a streaming build system that automatically takes care of redundant tasks for you. gulpjs Enter the following to command to install Gulp: npm install --global gulp-cli

Install Yeoman SharePoint generator

The Yeoman SharePoint web part generator helps you quickly create a SharePoint client-side solution project with the right toolchain and project structure. Enter the following command to install the Yeoman SharePoint generator: npm install -g @microsoft/generator-sharepoint That’s it, you’re ready to start building web parts!  Review https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment to download optional tools and for additional informational. Learn more about the SharePoint Framework at https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview.

More like this...

Skip to footer