Git Product home page Git Product logo

sp-rest-proxy's Introduction

sp-rest-proxy - SharePoint REST API Proxy for local Front-end development tool-chains

NPM

npm version Downloads Gitter chat

Allows performing API calls to local Express application with forwarding the queries to a remote SharePoint instance.

Original concept of the proxy was created to show how it could be easy to implements real world data communications for SharePoint Framework local serve mode during web parts debug without deployment to SharePoint tenant. Now the tool is used with multiple teams for modern front-end solutions rapid development.

In a nutshell

Supports SPFx and PnP JS Core

Supported SharePoint versions

  • SharePoint Online
  • SharePoint On-Prem (2019/2016/2013/2010)

Development paradigms

Supports proxying

  • REST API
  • CSOM requests
  • SOAP web services
  • Static resources

Proxy modes

  • API Proxy server
  • Socket gateway server
  • Socket gateway client

Socket proxying allows to forward API from behind NAT (experimental).

How to use as a module

1. Install NPM module in the project:

npm install sp-rest-proxy --save-dev

2. Create server.js with the following code:

const RestProxy = require('sp-rest-proxy');

const settings = {
  configPath: './config/private.json', // Location for SharePoint instance mapping and credentials
  port: 8080,                          // Local server port
  staticRoot: './static'               // Root folder for static content
};

const restProxy = new RestProxy(settings);
restProxy.serve();

Configuration parameters cheatsheet

3. Add npm task for serve into package.json:

"scripts": {
  "serve": "node ./server.js"
}

Check if the path to server.js is correct.

4. Run npm run serve.

5. Provide SharePoint configuration parameters.

6. Test local API proxy in action.

How to develop

Install

1. Clone/fork the project:

git clone https://github.com/koltyakov/sp-rest-proxy

2. CMD to the project folder.

3. Install dependencies:

npm install

4. Build:

npm run build

5. Run the server:

npm run serve

or serve in TypeScript directly

npm run ts-serve

Prompts credentials for a SharePoint site.

6. Navigate to http://localhost:8080 (or whatever in settings)

7. Ajax REST calls as if you were in SharePoint site page context:

REST Client Example

8. Tests.

npm run test

Tests Example

TypeScript support

In early days of sp-rest-proxy, the library was written in ES6 and used module.exports which was kept after migrating to TypeScript later on for the backward compatibility reasons.

In TypeScript, it's better to import the lib from sp-rest-proxy/dist/RestProxy to get advantages of types:

import RestProxy, { IProxySettings } from 'sp-rest-proxy/dist/RestProxy';

const settings: IProxySettings = {
  configPath: './config/private.json'
};

const restProxy = new RestProxy(settings);
restProxy.serve();

Authentication settings

The proxy provides wizard-like approach for building and managing config files for node-sp-auth (Node.js to SharePoint unattended http authentication).

  • SharePoint 2013, 2016:
    • Addin only permissions
    • User credentials through the http ntlm handshake
    • Form-based authentication (FBA)
  • SharePoint Online:
    • Addin only permissions
    • SAML based with user credentials
    • ADFS user credentials (works with both SharePoint on-premise and Online)

For more information please check node-sp-auth credential options and wiki pages. Auth settings are stored inside ./config/private.json.

PnPjs

sp-rest-proxy works with PnPjs (check out brief notice how to configure).

PnP JS Core + sp-rest-proxy

Load page context helper

sp-rest-proxy includes helper method for configuring page context - loadPageContext.

import { loadPageContext } from 'sp-rest-proxy/dist/utils/env';
import { Web } from '@pnp/sp';

// loadPageContext - gets correct URL in localhost and SP environments
loadPageContext().then(async _ => {

  // In both localhost and published to SharePoint page
  // `_spPageContextInfo` will contain correct info for vital props

  // PnPjs's Web object should be created in the following way
  const web = new Web(_spPageContextInfo.webAbsoluteUrl);

  // Then goes ordinary PnPjs code
  const batch = web.createBatch();

  const list = web.getList(`${_spPageContextInfo.webServerRelativeUrl}/List/ListName`);
  const entityName = await list.getListItemEntityTypeFullName();

  [1, 2, 3, 4].forEach(el => {
    list.items.inBatch(batch).add({
      Title: `${el}`
    }, entityName);
  });

  await batch.execute();
  console.log('Done');

}).catch(log);

JSOM (SharePoint JavaScript Object Model)

JSOM can be used in local development mode with sp-rest-proxy with some additional setup.

The local development workbench page should contain JSOM init scripts:

<script type="text/javascript" src="/_layouts/15/1033/initstrings.js"></script>
<script type="text/javascript" src="/_layouts/15/init.js"></script>
<script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.core.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>

Check out the example.

SharePoint Framework

Blog post article with setting up SPFx and Proxy

Use cases

  • Client side applications development with local serve, but real data from SharePoint
  • SharePoint Framework in local workbench with real data
  • Client applications integration test automation scenarios

Usage with Docker

sp-rest-proxy's People

Contributors

koltyakov avatar scatcher avatar hammadfauz avatar airportyh avatar mcleanra avatar svdoever avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.