Share point 2013 apps and i mean it

SharePoint 2013 Apps
and I “MEAN” It
http://pxml.ly/EO-SP-MEAN
Eric Overfield
SharePoint Advocate and Enthusiast
PixelMill

Introduction – Eric Overfield
 Founder and SharePoint Branding/UI Lead, PixelMill
 Speaker, Teacher, Advocate
 Author, SharePoint Community Organizer
 Located in Davis, CA
Co-author: “Pro SharePoint 2013 Branding and Responsive
Web Development” (Apress – June 12th, 2013)
Order Your Copy
http://pxml.ly/zsqykd
ericoverfield.com
@EricOverfield
Co-author: “Black Magic Solutions for
White Hat SharePoint” (August, 2013)

What You Will Learn
 A MEAN stack overview
 Why we might use MEAN with SharePoint
 Configuring the MEAN stack
 Join SharePoint to make it MEAN
@EricOverfield - pixelmill.com

What is the MEAN stack?
 MongoDB
 Express
 AngularJS
 NodeJS
 Plus many smaller components
 End to end JavaScript / JSON based application framework

MongoDB
 Open source database, lightweight, self contained
 MongoDB will store our data and is enterprise ready
 JSON based, using “collections” and “documents”
 MSSQL / relational DB admins?
 MongoDB will rock your world!
 Not strongly typed, using JSON for CRUD

Express
 NodeJS package
 Minimalist web framework
 Fast, robust, extendable
 Essentially NodeJS middleware calls
 Routes, Views, Controller

AngularJS
 Client side JavaScript library, built by Google
 Handles UI and data binding
 Often used for creating SPAs
 Alternatives such as Backbone.js, Ember, Knockout*

NodeJS
 Our base framework to build our business line app
 Note: NodeJS is not a full featured web server OOTB
 Network Application Framework
 Based on Chrome JavaScript engine
 Event-driven, non-blocking I/O model
 Lightweight and efficient, great at I/O

Why Use MEAN?

The Open SharePoint App Model
 IIS/Azure/MSSQL/.Net
 Apache/mySQL/PHP/Python/Ruby
 NodeJS/MongoDB/JavaScript/MEAN

Reasons to use MEAN
 Open source, inexpensive framework
 Very scalable, extremely fast processing
 NodeJS is very good at dispatching requests and heavy I/O
 Large community with large support base
 Not based on .NET, C#, MSSQL, etc
 May already be using for other business applications

Setting Up
MEAN Stack

MongoDB and NodeJS
Pick your server architecture
 Windows, Linux, iOS, BSD - Azure, cloud, on-prem
MongoDB
 Download MongoDB from http://mongodb.org
 *Review their documentation, insightful
NodeJS
 Download NodeJS from http://nodejs.org
 *Have installer add node and npm to path

Tools: Git, Grunt, Bower, Notepad++
Extra tools to help make life easier
 Git – source control, quickly download existing projects
 http://git-scm.com/downloads
 Bower – NodeJS package manager (Similar to PHP’s Composer)
 npm install –g bower
 Grunt – NodeJS task runner, aids running packages
 npm install –g grunt-cli
 Notepad++ - Powerful source editor, NodeJS plugin exists
 http://notepad-plus-plus.org

Express and AngularJS
 Can install each component on its own
 http://expressjs.com/ - “npm install express -g” or “npm install express-generator -g”
 https://angularjs.org/
 Create own Express/NodeJS app, download and include AngulaJS
 Or, use a NodeJS package!
 Mean.io (node package), MeanJS.org (git project)
 MeanJS.org
 git clone https://github.com/meanjs/mean.git meanjs
 Modify app settings in package.json
 npm install

Steps to Connect to SharePoint
 Install components and create NodeJS app with Express
 Need SSL certificates as well (review references for howto’s)
 Create SharePoint App in Visual Studio
 Register App in SPO to get Client Id and Client Secret
 /_layouts/15/AppRegNew.aspx
 Update NodeJS App to complete oAuth authorization, returns accessToken
 Start with Passport for SharePoint
 https://github.com/QuePort/passport-sharepoint
 Create Model, View and Controller in NodeJS using Express methods and AngularJS
 Bust out that JavaScript and JSON!

SharePoint
Browser 1 ACS
nodeJS
1. Browser requests app from SharePoint / SPO
via page with app, or site contents
Special thanks to Todd Baginski for original flowchart
http://channel9.msdn.com/Events/SharePoint-Conference/2012/SPC030

SharePoint
Browser 1 ACS
nodeJS
2
2. SharePoint contacts ACS, requesting
a signed context token for user / browser

SharePoint
Browser 1 ACS
nodeJS
2 3
3. ACS returns signed context token to SharePoint

SharePoint
Browser 1 ACS
nodeJS
2 3
4
4. SharePoint returns the signed context token
with auth code to browser

SharePoint
Browser 1 ACS
nodeJS
2 3
4
5
5. Browser is redirected to nodeJS server endpoint
and posts context token for authentication

SharePoint
Browser 1 ACS
nodeJS
2 3
4
5
6
6. nodeJS will take context token from POST request
and send to ACS for validation

SharePoint
Browser 1 ACS
nodeJS
2 3
4
5
6
7
7. After validation at ACS, ACS will return an
accessToken to nodeJS App for access to SharePoint

SharePoint
Browser 1 ACS
nodeJS
2 3
4
5
6
7
8
8. nodeJS app may now use client accessToken to make
requests to SharePoint as user

SharePoint
Browser 1 ACS
nodeJS
2 3
4
5
6
7
9 8
9. SharePoint returns requested data to nodeJS app
based on valid accessToken and authorization

SharePoint
Browser 1 ACS
nodeJS
2 3
4
5
6
7
9 8
10
10. nodeJS will return final data to browser,
in our case JSON data in the form of an API

SharePoint
2 3
4
Browser 1 ACS
9 8
nodeJS
5
nodeJS / express routes
6
7
10
/sharepoint/auth /beerapp /beers /beerskus /beerskudocs

nodeJS
2 3
4
express “custom api”
nodeJS Controllers
SharePoint
Browser 1 ACS
5
6
7
9 8
10
ACS OAuth Core / AngularJS Model /
mongoDB
REST /
SharePoint

SharePoint
2 3
4
Browser 1 ACS
5
6
7
9 8
10 nodeJS
mongoDB
REST /
SharePoint
nodeJS Controllers

nodeJS
mongoDB
angularJS / Client Side Routes / Views
/beerapp#!/beers /beerapp#!/beers/create
/beerapp#!/beers/:beerSku /beerapp#!/beers/:beerSku/edit
REST /
SharePoint
nodeJS Controllers

Creating a MEAN Stack App
with SharePoint
Demo

A Quick Review
 A MEAN stack overview
 Why we might use MEAN with SharePoint
 Configuring the MEAN stack
 Join SharePoint to make it MEAN

Special Thanks to Those Who Got Me Here
Passport for SharePoint – QuePort and Thomas Herbst
https://github.com/QuePort/passport-sharepoint
SharePoint 2013 and NodeJS - Bjørn Einar
https://github.com/bjartwolf/SP2013Node
Todd Baginski
SharePoint 2013: node.JS Remote Event Receiver
http://msdn.microsoft.com/en-us/library/office/dn775099%28v=office.15%29.aspx
Building Cloud-hosted apps for SharePoint with PHP and node.JS
http://channel9.msdn.com/Events/SharePoint-Conference/2012/SPC030
Chris Beckett – Inspiration and guidance

Set Up Secure Certificates for NodeJS/Express
 Based on: http://greengeckodesign.com/blog/2013/06/15/creating-an-ssl-certificate-for-node-dot-js/
 Install openssl (cygwin with openssl packages)
 Create a Certificate Authority
set RANDFILE=.rnd
openssl genrsa -des3 -out ca.key 1024
openssl req -new -key ca.key -out ca.csr
openssl x509 -req -days 365 -in ca.csr -out ca.crt -signkey ca.key
 Create a Server Certificate
openssl genrsa -des3 -out server.key 1024
openssl req -new -key server.key -out server.csr
 Then, remove the passphrase from the server certificate:
cp server.key server.key.org
openssl rsa -in server.key.org -out server.key
 And then, generate your self-signed certificate
openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt

Resources
Install MongoDB
http://docs.mongodb.org/manual/installation/
MEAN Boilerplates
http://meanjs.org – http://mean.io
Run NodeJS in IIS
https://github.com/tjanczuk/iisnode
Setting up MEAN stack
http://thecodebarbarian.wordpress.com/2013/07/22/introduction-to-the-mean-stack-part-one-setting-up-your-tools/
http://thecodebarbarian.wordpress.com/2013/07/29/introduction-to-the-mean-stack-part-two-building-and-testing-a-to-do-list/
Passport for SharePoint
https://github.com/QuePort/passport-sharepoint
SharePoint 2013, NodeJS and Passport project
https://github.com/bjartwolf/SP2013Nodev
Authentication Code OAuth flow for apps in SharePoint 2013
http://msdn.microsoft.com/en-us/library/office/jj687470%28v=office.15%29.aspx
Node Windows - Turn node into service
https://github.com/coreybutler/node-windows

SharePoint 2013 Apps
and I “MEAN” It
http://pxml.ly/EO-SP-MEAN
Thank You
“Pro SharePoint 2013 Branding and Responsive Web Development”
Eric Overfield
@EricOverfield
ericoverfield.com
(Apress – June 12th, 2013)
Order Your Copy
http://pxml.ly/zsqykd

Share point 2013 apps and i mean it

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Share point 2013 apps and i mean it

Similar to Share point 2013 apps and i mean it (20)

More from Eric Overfield

More from Eric Overfield (18)

Recently uploaded

Recently uploaded (20)

Share point 2013 apps and i mean it

Editor's Notes