Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
SharePoint 2013 Apps 
and I “MEAN” It 
http://pxml.ly/EO-SP-MEAN 
Eric Overfield 
SharePoint Advocate and Enthusiast 
Pixe...
Introduction – Eric Overfield 
 Founder and SharePoint Branding/UI Lead, PixelMill 
 Speaker, Teacher, Advocate 
 Autho...
What You Will Learn 
 A MEAN stack overview 
 Why we might use MEAN with SharePoint 
 Configuring the MEAN stack 
 Joi...
What is the MEAN stack? 
 MongoDB 
@EricOverfield - pixelmill.com 
 Express 
 AngularJS 
 NodeJS 
 Plus many smaller ...
MongoDB 
 Open source database, lightweight, self contained 
 MongoDB will store our data and is enterprise ready 
 JSO...
Express 
@EricOverfield - pixelmill.com 
 NodeJS package 
 Minimalist web framework 
 Fast, robust, extendable 
 Essen...
AngularJS 
 Client side JavaScript library, built by Google 
@EricOverfield - pixelmill.com 
 Handles UI and data bindin...
NodeJS 
 Our base framework to build our business line app 
 Note: NodeJS is not a full featured web server OOTB 
@EricO...
Why Use MEAN? 
@EricOverfield - pixelmill.com
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 go...
Setting Up 
MEAN Stack 
@EricOverfield - pixelmill.com
MongoDB and NodeJS 
Pick your server architecture 
 Windows, Linux, iOS, BSD - Azure, cloud, on-prem 
@EricOverfield - pi...
Tools: Git, Grunt, Bower, Notepad++ 
Extra tools to help make life easier 
 Git – source control, quickly download existi...
Express and AngularJS 
@EricOverfield - pixelmill.com 
 Can install each component on its own 
 http://expressjs.com/ - ...
Steps to Connect to SharePoint 
@EricOverfield - pixelmill.com 
 Install components and create NodeJS app with Express 
...
SharePoint 
Browser 1 ACS 
nodeJS 
1. Browser requests app from SharePoint / SPO 
via page with app, or site contents 
Spe...
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 ...
SharePoint 
Browser 1 ACS 
nodeJS 
2 3 
4 
5 
6 
6. nodeJS will take context token from POST request 
and send to ACS for ...
SharePoint 
Browser 1 ACS 
nodeJS 
2 3 
4 
5 
6 
7 
7. After validation at ACS, ACS will return an 
accessToken to nodeJS ...
SharePoint 
Browser 1 ACS 
nodeJS 
2 3 
4 
5 
6 
7 
8 
8. nodeJS app may now use client accessToken to make 
requests to S...
SharePoint 
Browser 1 ACS 
nodeJS 
2 3 
4 
5 
6 
7 
9 8 
9. SharePoint returns requested data to nodeJS app 
based on vali...
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 JS...
SharePoint 
2 3 
4 
Browser 1 ACS 
9 8 
nodeJS 
5 
nodeJS / express routes 
6 
7 
10 
/sharepoint/auth /beerapp /beers /be...
nodeJS 
nodeJS / express routes 
2 3 
4 
express “custom api” 
/sharepoint/auth /beerapp /beers /beerskus /beerskudocs 
no...
SharePoint 
2 3 
4 
Browser 1 ACS 
5 
6 
7 
9 8 
10 nodeJS 
express “custom api” 
/sharepoint/auth /beerapp /beers /beersk...
nodeJS 
express “custom api” 
/sharepoint/auth /beerapp /beers /beerskus /beerskudocs 
ACS OAuth Core / AngularJS Model / ...
Creating a MEAN Stack App 
with SharePoint 
@EricOverfield - pixelmill.com 
Demo
A Quick Review 
@EricOverfield - pixelmill.com 
 A MEAN stack overview 
 Why we might use MEAN with SharePoint 
 Config...
Special Thanks to Those Who Got Me Here 
Passport for SharePoint – QuePort and Thomas Herbst 
https://github.com/QuePort/p...
Set Up Secure Certificates for NodeJS/Express 
 Based on: http://greengeckodesign.com/blog/2013/06/15/creating-an-ssl-cer...
Resources 
Install MongoDB 
http://docs.mongodb.org/manual/installation/ 
MEAN Boilerplates 
http://meanjs.org – http://me...
SharePoint 2013 Apps 
and I “MEAN” It 
http://pxml.ly/EO-SP-MEAN 
Thank You 
“Pro SharePoint 2013 Branding and Responsive ...
Upcoming SlideShare
Loading in …5
×

7

Share

Download to read offline

Share point 2013 apps and i mean it

Download to read offline

Combine SharePoint Online and SharePoint 2013 Apps with the MEAN stack, MongoDB, Express, Angular JS and NodeJS, a JavaScript based full stack solution.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Share point 2013 apps and i mean it

  1. 1. SharePoint 2013 Apps and I “MEAN” It http://pxml.ly/EO-SP-MEAN Eric Overfield SharePoint Advocate and Enthusiast PixelMill
  2. 2. 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)
  3. 3. 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
  4. 4. What is the MEAN stack?  MongoDB @EricOverfield - pixelmill.com  Express  AngularJS  NodeJS  Plus many smaller components  End to end JavaScript / JSON based application framework
  5. 5. MongoDB  Open source database, lightweight, self contained  MongoDB will store our data and is enterprise ready  JSON based, using “collections” and “documents” @EricOverfield - pixelmill.com  MSSQL / relational DB admins?  MongoDB will rock your world!  Not strongly typed, using JSON for CRUD
  6. 6. Express @EricOverfield - pixelmill.com  NodeJS package  Minimalist web framework  Fast, robust, extendable  Essentially NodeJS middleware calls  Routes, Views, Controller
  7. 7. AngularJS  Client side JavaScript library, built by Google @EricOverfield - pixelmill.com  Handles UI and data binding  Often used for creating SPAs  Alternatives such as Backbone.js, Ember, Knockout*
  8. 8. NodeJS  Our base framework to build our business line app  Note: NodeJS is not a full featured web server OOTB @EricOverfield - pixelmill.com  Network Application Framework  Based on Chrome JavaScript engine  Event-driven, non-blocking I/O model  Lightweight and efficient, great at I/O
  9. 9. Why Use MEAN? @EricOverfield - pixelmill.com
  10. 10. The Open SharePoint App Model  IIS/Azure/MSSQL/.Net  Apache/mySQL/PHP/Python/Ruby  NodeJS/MongoDB/JavaScript/MEAN @EricOverfield - pixelmill.com
  11. 11. 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 @EricOverfield - pixelmill.com
  12. 12. Setting Up MEAN Stack @EricOverfield - pixelmill.com
  13. 13. MongoDB and NodeJS Pick your server architecture  Windows, Linux, iOS, BSD - Azure, cloud, on-prem @EricOverfield - pixelmill.com 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
  14. 14. 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 @EricOverfield - pixelmill.com
  15. 15. Express and AngularJS @EricOverfield - pixelmill.com  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
  16. 16. Steps to Connect to SharePoint @EricOverfield - pixelmill.com  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!
  17. 17. 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
  18. 18. SharePoint Browser 1 ACS nodeJS 2 2. SharePoint contacts ACS, requesting a signed context token for user / browser
  19. 19. SharePoint Browser 1 ACS nodeJS 2 3 3. ACS returns signed context token to SharePoint
  20. 20. SharePoint Browser 1 ACS nodeJS 2 3 4 4. SharePoint returns the signed context token with auth code to browser
  21. 21. SharePoint Browser 1 ACS nodeJS 2 3 4 5 5. Browser is redirected to nodeJS server endpoint and posts context token for authentication
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. SharePoint 2 3 4 Browser 1 ACS 9 8 nodeJS 5 nodeJS / express routes 6 7 10 /sharepoint/auth /beerapp /beers /beerskus /beerskudocs
  28. 28. nodeJS nodeJS / express routes 2 3 4 express “custom api” /sharepoint/auth /beerapp /beers /beerskus /beerskudocs nodeJS Controllers SharePoint Browser 1 ACS 5 6 7 9 8 10 ACS OAuth Core / AngularJS Model / mongoDB REST / SharePoint
  29. 29. SharePoint 2 3 4 Browser 1 ACS 5 6 7 9 8 10 nodeJS express “custom api” /sharepoint/auth /beerapp /beers /beerskus /beerskudocs ACS OAuth Core / AngularJS Model / mongoDB REST / SharePoint nodeJS / express routes nodeJS Controllers
  30. 30. nodeJS express “custom api” /sharepoint/auth /beerapp /beers /beerskus /beerskudocs ACS OAuth Core / AngularJS Model / mongoDB angularJS / Client Side Routes / Views /beerapp#!/beers /beerapp#!/beers/create /beerapp#!/beers/:beerSku /beerapp#!/beers/:beerSku/edit REST / SharePoint nodeJS / express routes nodeJS Controllers
  31. 31. Creating a MEAN Stack App with SharePoint @EricOverfield - pixelmill.com Demo
  32. 32. A Quick Review @EricOverfield - pixelmill.com  A MEAN stack overview  Why we might use MEAN with SharePoint  Configuring the MEAN stack  Join SharePoint to make it MEAN
  33. 33. 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 @EricOverfield - pixelmill.com Chris Beckett – Inspiration and guidance
  34. 34. Set Up Secure Certificates for NodeJS/Express  Based on: http://greengeckodesign.com/blog/2013/06/15/creating-an-ssl-certificate-for-node-dot-js/ @EricOverfield - pixelmill.com  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
  35. 35. 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 @EricOverfield - pixelmill.com Node Windows - Turn node into service https://github.com/coreybutler/node-windows
  36. 36. 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
  • LisLeckeySwanson

    Oct. 6, 2020
  • williammdavis

    Dec. 4, 2016
  • hcchan10

    Apr. 10, 2015
  • MarcelMolenaar

    Jan. 12, 2015
  • tasuku1127

    Dec. 15, 2014
  • AndrewWoody

    Dec. 11, 2014
  • sympmarc

    Dec. 10, 2014

Combine SharePoint Online and SharePoint 2013 Apps with the MEAN stack, MongoDB, Express, Angular JS and NodeJS, a JavaScript based full stack solution.

Views

Total views

4,506

On Slideshare

0

From embeds

0

Number of embeds

1,983

Actions

Downloads

49

Shares

0

Comments

0

Likes

7

×