Accessing SharePoint Data Locally

SharePoint

I loathe SharePoint. Its like Google Drive without the easy to use UI. But if you’re used to .NET, then SharePoint is good. I had NEVER used SharePoint before (primarily because I had no need for it and I have a Mac which doesn’t play nice with SharePoint), but here I was having to call a SharePoint list to get the data I needed on the front end.

The problem was that because of the nature of SharePoint, authenticating my machine to request the data through the SharePoint REST API was tricky. I couldn’t send an API token or credentials through the SharePoint REST API request. Needless to say, it was difficult.

SP-REST-Proxy

Shout out to Andrew Koltyakov for creating the SP-REST-Proxy library. It allows you to forward your localhost requests to a local node server authenticated in SharePoint. I’ll show you how I set it up.

Authentication

If you’re like me, you have no clue about the SharePoint set up (or really care). But in order to authenticate your node server, you need to determine if you’re running SharePoint On Premise or SharePoint Online. This will determine how your node server will be authenticated. Check with your SharePoint administrator for this info. For this blog purpose, we’ll assume that it SharePoint On Premise.

Let’s create a file that will hold your private credentials that you use to access your SharePoint site.

  1. Create a file named _private.conf.json*
  2. Add the following code to the file

"source-code"{
"siteUrl": "YOUR_SHAREPOINT_SITE",
"domain": "YOUR_DOMAIN",
"username": "YOUR_USERNAME_TO_ACCESS_THE_SHAREPOINT_SITE",
"password": "YOUR_PASSWORD"
}

  • Make sure to add _private.conf.json to your .gitignore. You don’t want your credentials to your git tracking!

Installations

npm install sp-rest-proxy --save-dev
npm install @angularclass/hmr

Hot Module Replacement (hmr)

This is needed to allow hot module reloading in Angular and will forward all your localhost:4200 requests to localhost:8081, which will forward them to SharePoint

  1. npm install @angularclass/hmr
  2. Create a new file at the root level of your application and name it hmr.ts. Add the following code
import { NgModuleRef, ApplicationRef } from '@angular/core';
import { createNewHosts } from '@angularclass/hmr';

export const hmrBootstrap = (module: any, bootstrap: () => Promise) => {
let ngModule: NgModuleRef;
module.hot.accept();
bootstrap().then(mod => ngModule = mod);
module.hot.dispose(() => {
const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
const elements = appRef.components.map(c => c.location.nativeElement);
const makeVisible = createNewHosts(elements);
ngModule.destroy();
makeVisible();
});
};

3. Create a new environment file named environment.hmr.ts. Add the following code

export const environment = {
production: false,
source: true,
hmr: true,
sharePointURL: 'http://localhost:8081/'
};

4. Add environment.hmr.ts to the environments object in your .angular-cli.json file like so

"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts",
"hmr": "environments/environment.hmr.ts",
}

5. Ensure that all your services that utilize your environment files use the environment.hmr. I found that if I didn’t, I would encounter a cross-origin error. It could have been on account of my SharePoint site authentication settings, but I found that explicitly writing the following worked for me:

import { environment } from '/environments/environment.hmr

Proxy Settings

Making REST calls with the SharePoint REST API follows this format according to the docs:

http://server/site/_api/site

The server will point to the domain of where your SharePoint is hosted followed by /api and then site/../...  We only care about happens after /api.

To reroute your calls to localhost:8081, we’ll add a new file named proxy.conf.json at the root of our application. This file will do the forwarding of calls from our Angular server on localhost:4200 to our proxy server.

Add the following contents to proxy.conf.json

{
"*/_api/**": {
"target": "http://localhost:8080",
"secure": false,
"changeOrigin": true
},
"/style%20library/**": {
"target": "http://localhost:8080",
"secure": false,
"changeOrigin": true
},
"/Style%20Library/**": {
"target": "http://localhost:8080",
"secure": false,
"changeOrigin": true
}
}

You can also add your static assets folder here as well.

The Server

  1. Add the following scripts to your package.json file
"scripts": {

"serve": "node ./server.js",

"hmr": "ng serve --hmr --environment=hmr --verbose --proxy=proxy.conf.json"
}

Running the Whole Application (Finally!)

In terminal or command Prompt, open one tab or window and fire up your node server with npm run serve. After going through the prompts to authenticate yourself, fire up your Angular server with npm run hmr

Open up localhost:8081 and you should see the SP-REST-Proxy page

Hit me up on Twitter or via email if you have questions. I’d be happy to share!

Sources

*sp-rest-proxy

*Angular 4 w/ SharePoint On Premise

*SharePoint REST API

*Filtering, Sorting, and Selecting in SharePoint

*Enabling Hot Module Replacement in Angular

Big Thanks to Andrew Koltyakov for his help and troubleshooting!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s