Thursday, April 20, 2017

SharePoint Framework Tool Chain

1. GET NODE

Download LTS ( Long Term Support ) version of node . You can also check if you have node by running
node --version

2. INSTALL NPM

NPM, also know as node package manager is used to install packages and dependencies to your project. If you are coming from a .NET background NPM is like Nugget packages in visual studio.

Usually NPM is installed as a part of Node.js installation.
You can check the version of NPM by running the below command
npm --version

You can install npm by using the below command
npm install -g
-g is a switch which means global and it is installed globally

3. INSTALL YEOMAN

Yeoman is used for scaffolding projects. It can be installed via npm using the below command
npm install yo -g
If you have yeoman installed you can check its version using the below command
yo --version

4. INSTALL SHAREPOINT GENERATOR

This needs to be installed so that yeoman can create SharePoint projects
Use the below command to install SharePoint generator
npm install @Microsoft/generator-sharepoint -g
If you have already installed it , you can check the list of generators installed by running the PowerShell command
yo --generators

 Now your machine is ready to develop modern client webparts using SharePoint framework.

Mentioned below are a couple of new concepts we need to learn while creating these webparts

  • Typescript : is a language developed by Microsoft. This is a superset of JavaScript but is strongly typed and catches syntax errors and exceptions. This allows an easier transition for .NET developers from C# to JavaScript as you can define classes, interfaces, declare datatypes and much more.
These files have .ts as extension and are complied by tsc complier. If you are developing in Visual Studio Code, you don't need to worry about installing tsc. However you may need to if you are using some other IDE.
  • Gulp : Gulp is like MSBuild. This is used to automate tasks like build, package, debug and deploy. Gulp is also installed using  npm
npm install gulp -g
or if you have gulp already installed you can check using
gulp --version 

  • React/Angular : A learning curve to learn modern JavaScript framework like react and angular  

Share This!

0 comments:

Post a Comment