SharePoint framework development environment setup

What is SharePoint framework (SPFx)?

It is a new development model for building Sharepoint modern page components. Using this Sharepoint framework we can develop SharePoint apps and extensions for SharePoint Online and SharePoint on premise (2019). Sharepoint has evolved with new modern pages, a great look & feel, easy themes, responsive to mobile devices, that means the basic page and web part model has changed.

Tools used: Node.js, Gulp, Yeoman, Visual Code, Typescript

Frameworks: Knockout, Angular, React and other JavaScript frameworks

Key points:

  • It can be used on any platform with any JavaScript framework to build SharePoint customizations
  • 100% JavaScript
  • Runs in the context of user, no permission elevations allowed
  • Solutions built using SharePoint Framework are supported in classic sharepoint sites as well
  • Solutions are responsive to mobile

Install developer tools

  1. Install NodeJS
  2. Install Code editor
  3. Install Yeoman and gulp
  4. Install Yeoman SharePoint generator
  5. Trusting the self-signed developer certificate

1. Install NodeJS

First download NodeJS exe from here. Please download NodeJS version 8x not the later one as they don’t support SharePoint framework. You won’t believe I wasted a month by using NodeJS version 10 and ratifying the issues faced while setting up the development environment.

Better to check your machine already has any version of NodeJS. Run this in command prompt “node -v”. For me it showed v10 was there and uninstalled it.

This time I downloaded “node-v8.12.0-win-x64.zip”, extracted and ran the exe. Just move on with next, next in the installation wizard and successfully installed NodeJS 8x n my local machine.

2. Install Code Editor

You can use any of your desired code editors or IDE that you use for client-side web part. I use Microsoft’s free Visual Studio Code.

3. Install Yeoman and gulp

Nothing to download now. Go to command prompt and run the below code to install gulp.

npm install -g yo gulp

It installs the required dependencies into the local system within 2ecs

But later then wait for 2 to 3 minutes. “Yeoman Doctor” doing some sanity checks in my machine.

After 2minutes I had the below screen saying, “Everything looks all right”. Additional to that I got 2 optional dependencies warning message which I am not sure about, moreover they are not mandatory just optional so I will ignore for now.

4. Install Yeoman SharePoint generator

npm install -g @microsoft/generator-sharepoint

5. Trusting the self-signed developer certificate

Run the below code in command prompt

gulp trust-dev-cert

This will open a windows prompt confirmation window, where you need to click yes which allows to use a self-signed development certificate on your machine. This is important for SharePoint framework to launch a localhost site in your local machine to debug or test web parts.

Finally we have completed all installations and our development environment is ready to build custom components for modern SharePoint pages.

I will let you know how to create a modern web part using SharePoint framework in my next blog.

Thanks for your time.