share point 2013 apps and i mean it

Eric Overfield

SharePoint Advocate and Enthusiast

PixelMill

http://pxml.ly/EO-SP-MEAN

and I “MEAN” It

SharePoint 2013 Apps

Introduction – Eric Overfield

Founder and SharePoint Branding/UI Lead, PixelMill

Speaker, Teacher, Advocate

Author, SharePoint Community Organizer

Located in Davis, CA

ericoverfield.com

@EricOverfield

Order Your Copy

http://pxml.ly/zsqykd

Co-author: “Pro SharePoint 2013 Branding and Responsive

Web Development” (Apress – June 12th, 2013)

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


MSSQL / relational DB admins?

MongoDB will rock your world!

Not strongly typed, using JSON for CRUD

Open source database, lightweight, self contained

MongoDB will store our data and is enterprise ready

JSON based, using “collections” and “documents”

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

http://nodejs.org/

http://nodejs.org/

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

http://git-scm.com/downloads

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

http://expressjs.com/

https://angularjs.org/

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!


nodeJS

Special thanks to Todd Baginski for original flowchart

http://channel9.msdn.com/Events/SharePoint-Conference/2012/SPC030

SharePoint

ACSBrowser 1

1. Browser requests app from SharePoint / SPO

via page with app, or site contents

nodeJS

SharePoint

ACSBrowser 1

2

2. SharePoint contacts ACS, requesting

a signed context token for user / browser

nodeJS

SharePoint

ACSBrowser 1

2 3

3. ACS returns signed context token to SharePoint

nodeJS

SharePoint

ACSBrowser 1

2 3

4

4. SharePoint returns the signed context token

with auth code to browser

nodeJS

SharePoint

ACSBrowser 1

2 3

4

5

5. Browser is redirected to nodeJS server endpoint

and posts context token for authentication

nodeJS

SharePoint

ACSBrowser 1

2 3

4

5

6

6. nodeJS will take context token from POST request

and send to ACS for validation

nodeJS

SharePoint

ACSBrowser 1

2 3

4

5

67

7. After validation at ACS, ACS will return an

accessToken to nodeJS App for access to SharePoint

nodeJS

SharePoint

ACSBrowser 1

2 3

4

5

67

8

8. nodeJS app may now use client accessToken to make

requests to SharePoint as user

nodeJS

SharePoint

ACSBrowser 1

2 3

4

5

67

89

9. SharePoint returns requested data to nodeJS app

based on valid accessToken and authorization

nodeJS

SharePoint

ACSBrowser 1

2 3

4

5

67

89

10

10. nodeJS will return final data to browser,

in our case JSON data in the form of an API

nodeJS

/sharepoint/auth /beerapp /beers /beerskus /beerskudocs

nodeJS / express routes

SharePoint

ACSBrowser 1

2 3

4

5

67

89

10

nodeJS



nodeJS Controllers

SharePoint

ACSBrowser 1

2 3

4

5

67

89

10

ACS OAuth Core / AngularJS Model /

mongoDB

REST /

SharePoint

express “custom api”

SharePoint

ACSBrowser 1

2 3

4

5

67

89

10 nodeJS



mongoDB

REST /

SharePoint


nodeJS Controllers


angularJS / Client Side Routes / Views

/beerapp#!/beers /beerapp#!/beers/create

/beerapp#!/beers/:beerSku /beerapp#!/beers/:beerSku/edit

nodeJS



mongoDB

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


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


SharePoint 2013 and NodeJS - Bjørn Einar

https://github.com/bjartwolf/SP2013Node


Chris Beckett – Inspiration and guidance


http://msdn.microsoft.com/en-us/library/office/dn775099(v=office.15).aspx


https://github.com/bjartwolf/SP2013Node

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/

Run NodeJS in IIS

https://github.com/tjanczuk/iisnode

MEAN Boilerplates

http://meanjs.org – http://mean.io

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


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

Thank You

Eric Overfield

@EricOverfield

ericoverfield.com

Order Your Copy

http://pxml.ly/zsqykd

“Pro SharePoint 2013 Branding and Responsive Web Development”

(Apress – June 12th, 2013)

http://pxml.ly/EO-SP-MEAN

and I “MEAN” It

SharePoint 2013 Apps

share point 2013 apps and i mean it

Education

mean stack join sharepoint

ericoverfield pixelmill

mean stack overview

branding sharepoint

mean open source

io8why use mean

pro sharepoint

sharepoint community