SharePoint Framework Tooling | Web Stack tooling

“SharePoint framework is all about typical web stack tooling”

Node.Js Hosting platform
Yeoman Generates templates
Gulp Task management and automation
TypeScript Typed JS
VS Code Source editor..or you can select any other
AngularJS/ Ember JS/ ReactJs/ Knockout..etc Client side framework

You can be selected client side framework as your preference. Angular and Ember is full option frameworks. If you are a less experienced or finding for lightweight frameworks React or Knockout would be better preferences.

SharePoint Framework tooling Legacy SharePoint tooling
Node.js IIS/ .Net framework
Gulp MS Build
Yeoman Visual Studio template selector
TypeScript C#

You can use any source editor as your preference. If you are mostly coupled with Visual studio you may need to install ‘node.js’ on it. If you free to develop with any development environment; VS code, Sublime, Brackets, Notepad++ ..etc are options.


SharePoint framework dev startup | npm generating | Yeoman scaffolding

This will be first step towards developing on SharePoint Framework. You will use npm to manage the packages and Yoeman for generate SharePoint framework.

#check for existence of Node.js; install if following not returns version
node -v 

#install Yeoman
npm install -g yo

#install generator
#Office template
npm install -g generator-office

#move to your working folder or create folders if required
cd D:\location
mkdir "Folder Name"

#Yeoman console..and pick your should be office generator
#Or else directly call callout below
yo office

After execution of above code your can select default selections and also able to provide customized values if required.

You can be used either Powershell or Cmder. But I prefer Cmder since it gives better experience if your are a windows user. But for other OS users, you can pick as you wish.

Note: Now, your source template is generated(scaffolded) and can be startup editing with any favorite code editor such as  VS, VS code, Sublime, NotePad++ or any.


Introduction to SharePoint Framework| Rise of new SP development model

Introduction to SharePoint Framework

  • SharePoint Framework for client-side development, easy integration with the Microsoft Graph and support for open source tooling. It’s purely concentrated on integration of modern UX(User Experience) with SharePoint.
  • As for announcements, this available since 3rd quarter of 2016
  • Allow developers to make use of the latest JavaScript frameworks like React and Angular. This opens doors towards open source development on SharePoint rather than sticking on to Windows and Visual studio.
  • provides dramatically better experiences, performance, mobile support and more while broadening SharePoint developer ecosystem from .NET and beyond
  • Available for existing SharePoint sites and can be include client side web parts into SharePoint pages.
  • This introduces new page experience including page structure.

What includes in SharePoint Framework?

  • Capable of including enterprise mobility..responsive and also scale well with any device
  • Deep customization is highly capable..since more tooling and libraries can be used
  • Expands potential of SharePoint and Microsoft Graph API
  • Enabled for both cloud (O365) or on on-premise

Why another model?

  • Despite the different forms of add-ins the model has some limitations, one of which is the use of iframes for integrating add-ins on pages.
  • Modern SharePoint UX along with all its components, uses responsive web design
  • Its another tool for your toolbox, its upto you to pick the best for your job
  • Modern team sites look great and offer improved user experience in the mobile-first world

When you should use SharePoint Framework?

whenever you want to extend the capabilities of the modern team sites, solutions based on the SharePoint Framework are your only option

It is the only SharePoint development model that works with modern SharePoint sites.

Its backward compatible (works well in both modern and classic)

For example, if you were to build a Web Part that interacts with the Microsoft Graph, you could build a 100% client-side solution using Angular, ADAL JS and OAuth implicit flow.
Continue reading

SharePoint Apps Introduction #2 |Hosting models in SharePoint Apps

There are mainly two hosting models which are “SharePoint Hosted” and “Cloud Hosted”. Cloud hosted model is subdivided into two models as “Provider Hosted” and “Auto-hosted.”

SharePoint hosted Apps

  • Contains only client side code and resources such as web pages and JavaScript’s etc.
  • Severed up entirely by SharePoint environment

Cloud hosted App hosting

  • As mentioned, there are two variations in this those are provider-hosted and auto-hosted
  • Both types has associated “remote web” which host app-start page and required resources
  • Capable of hosting custom database to store app specific data

Provider hosted apps

  • Provider hosted apps with multi-tenancy creates complexity
  • This separates app data from tenancy, so that user in an one tenancy cant access data in a separate tenancy (which is good for policies)
  • Comparatively more cost and time to develop apps in provider hosted apps

Auto hosted apps

  • No involvement with scalability and data isolation which was there in the provider hosted development (No worries ☺)
  • Only supported in O365(online cloud), but no idea whether this will introduced to On-premise apps
  • O365 provided SharePoint where Windows Azure hosts “remote web” and provides SQL Azure database on demand

Advantages of Auto hosted

  • Lowe development cost compared to provider hosted apps
  • Less complex
  • Data isolation



SharePoint Apps Introduction | which you should know before develop with SharePoint App model

With the rise of cloud platform and cloud model (office 365), app model came into conversation with addressing the some of the drawbacks which was with SharePoint custom solutions. Even though there are many disadvantages with the App model solution designers go to this model with the requirement.

Following few points better to know before jump into the model;

  • W3wp.exe – SharePoint worker process which manages solutions which deployed as a farm solution
  • SPUWorkerProcess.exe – worker process which manages solutions which deployed as a sandbox solution

Since all the models which were before running inside the SharePoint, there is high couple and dependencies which can be accounted as a disadvantages.

  • There is possibility of custom codes affect the processes and codes of SharePoint – scalability and environment risks
  • Less ability to upgrade the SharePoint with the tightly coupled behavior and its complex behavior – high dependencies
  • When code running with elevated privilege can do any action which site administrator (security violation with impersonation) can do. Sandbox box solutions scope this impact to some extent but code within the scope will affected – permission issue
  • Sandbox solutions it’s not possible to run code with impersonation and only capable of running codes as current user – impersonation issue
  • Final major problem with the installation and upgrading. This may require restart of IIS on front-end servers – installation and upgrading issue

Impersonation in SharePoint

Running custom codes as an administrator to perform some task which signed in or other users could not perform. This achieved by using SPSecurity.RunWithElevatedPriviledges.

Advantages of SharePoint app model

  • App support for both Office 365 (cloud) and on premise
  • App code runs separately apart from SharePoint environment
  • Code can be run under distinct authentications
  • Apps deployed using app catalog make easier to discover, install and upgrade
  • App code access the SharePoint point across web service entry points

SharePoint tenancy

Set of site collections configured and administered as a set (bundle). Business users who access the tenancy knows a tenants.

When O365 creates new tenancy, it created new administrative site collection with can be accessibly by the tenant administrator.

When deploying apps into SharePoint on premise it takes “default tenancy” where tenancy concept that much not important.

Services which supports for SharePoint app model

App Management Service

It contains configuration data for Apps which installed, configured, permissions and licensing of SharePoint apps. This can be configured manually in the ‘Central Administration’ and it’s already configured in the Office 365.

Site Subscription Setting service

Contains configuration data of every site tenancy and includes those in its own database. This need to be configured using PowerShell and pre-configured in the Office 365.

Scopes of SharePoint Apps (App installation scopes)

1. Site Scope

Launched and installed in the same scope of SharePoint site.

2. Tenancy Scope

App installed in special type of SharePoint site known as “app catalog”. So that users can use the app in site as they prefer. This scope is useful when users in the tenancy can pick the app and use in their site as prefer. Permission handling on app still with the administrator.

There are two isolated places where you can push custom codes to SharePoint. Those are as bellows;

  • Client side – runs on the client’s browser. You could write with JavaScript, Silverlight, VBScript, Flash or whatever client side scripting technique. This always act as a “SharePoint hosted app”
  • Server side – can be write with language like C# and this need to execute code outside the SharePoint host environment. This mostly become a cloud hosted app.

In later post I will be further talking about hosting models, configuration files within the apps, packaging and etc.