Back in May of this year Microsoft announced another new and exciting way to create webparts in SharePoint Online and On Premise: SharePoint Developer Framework. This new methodology enables you to use client side development for building new experiences in SharePoint. The framework is still in developer Preview, but from my short time working with it I am already enjoying the new possibilities. Below is a quick step-by-step guide on how to setup your local developer environment so that you too can join in the fun with this new framework.

0365 Development Environment
  • Create Developer Tenant in O365
  • Create App Catalog
    • Navigate to the admin center for the newly created Development Tenant.
      • Create an app catalog
  • Create Developer Site Collection
    • Navigate to the admin center of your development Tenant
      • Create a new Site Collection with the Developer Site Template.
Development Machine

You will need the following downloads:

  • Node.js
  • Visual Studio Code
  • Python
  1. Install Node.JS.
    1. Make sure that you are installing the Long Term Support Version. (This is usually the latest non-beta version.)
  2. Install Visual Studio Code.
  3. Open up the node console and install the Windows build tools npm package.
    1. Run the following command in the node js console.
      1. npm install –global –production windows-build-tools
  4. Install Yeoman and Gulp packages.
    1. Run the following command in the node js console.
      1. npm i -g yo gulp
  5. Next install the Yeoman SharePoint Generator.
    1. Run the following command in the node js console.
      1. npm i -g @microsoft/generator-sharepoint

Now your development machine is ready to start making client side web parts for SharePoint. If you have any questions about the SharePoint Developer Framework, or about how to install it locally, feel free to reach out to me at rpatrick@composablesystems.com or go to the frameworks GitHub page for more information.


Leave a Reply

Your email address will not be published. Required fields are marked *