Set up development environment for SharePoint Framework solutions

By | July 16, 2018

This post will explain step by step procedure of SharePoint Framework development environment set up. So we need to download and install,

  • Node JS
  • Yeoman and Gulp
  • Yeoman SharePoint Generator
  • Code Editor [visual Studio Code]
  1. Install Node JS: Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine. It is basically used for packaging.
  • Download and Install Node JS LTS Version from here

Run the .exe file and proceed with Node.js setup wizard

Now, runt he Node.js command prompt from start menu, below screenshot is confirmation for successful installation of Node.js in your machine.

Run npm -v, node -v to verify the version of npm and node

2. Install Yeoman and Gulp:

Yeoman is a scaffolding tool which helps in creating new projects [templates]. It includes a Yeoman generator for creating new web parts.

Gulp is a JavaScript task runner that lets you automate repetitive tasks such as,

  • Bundling and minifying libraries and stylesheets
  • Refreshing browser when you save a file
  • Running unit tests
  • Running code analysis
  • copying modified files to an output directory

Run below command to install Yeoman and Gulp,

npm install -g yo gulp

Install Yeoman SharePoint Generator,

npm install -g @microsoft/generator-sharepoint@latest

3. Code Editor: we need a code editor or an IDE which help us to write code. we can pick any one editor from below,

  • Visual Studio Code
  • Atom
  • Webstorm

We will download and install Visual Studio Code from here.

Optional tools:

  • Fiddler
  • Postman Plug-in for Chrome
  • Cmder for windows
  • Oh My zsh for Mac
  • Git Source control tools

In the upcoming post, we will see how to create our first client side web part i.e, the traditional Hello World Web Part demo project.

I am going to use Reactjs, Angularjs and PnPJS in my upcoming SharePoint Framework solutions.

7 thoughts on “Set up development environment for SharePoint Framework solutions

  1. Nada Fryman

    Good ¡V I should definitely pronounce, impressed with your web site. I had no trouble navigating through all the tabs as well as related information ended up being truly easy to do to access. I recently found what I hoped for before you know it at all. Reasonably unusual. Is likely to appreciate it for those who add forums or something, website theme . a tones way for your customer to communicate. Nice task..

    Reply
  2. Barb Brenchley

    Hi my friend! I wish to say that this article is awesome, nice written and come with almost all significant infos. I¡¦d like to peer more posts like this .

    Reply
    1. Angada Post author

      Thanks @Barb Brenchley, will try to share more posts.

      Reply
  3. Byron Kamnik

    hey there and thank you for your info – I’ve certainly picked up anything new from right here. I did however expertise several technical issues using this site, since I experienced to reload the web site many times previous to I could get it to load properly. I had been wondering if your hosting is OK? Not that I’m complaining, but slow loading instances times will often affect your placement in google and could damage your high quality score if advertising and marketing with Adwords. Well I’m adding this RSS to my e-mail and can look out for a lot more of your respective exciting content. Ensure that you update this again very soon..

    Reply
  4. Enid Hackl

    Its like you read my mind! You seem to know a lot about this, like you wrote the book in it or something. I think that you can do with a few pics to drive the message home a bit, but instead of that, this is excellent blog. An excellent read. I will definitely be back.

    Reply
  5. Lakesha

    Attractive portion of content. I just stumbled upon your website and
    in accession capital to claim that I acquire actually loved account your blog posts.

    Any way I will be subscribing for your feeds and even I success you get admission to consistently rapidly.

    Reply

Leave a Reply

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