Add end-to-end example of usage with sp-pnp-js

[koltyakov]

No description provided.

[koltyakov]

(() => {

  /**
   * This part is only for testing simplification from a random page.
   * Loads pnp global shim from CDN.
   * ES6 imports works as well. $pnp stands for global shim object.
   */
  if (typeof $pnp === 'undefined') {
    let s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = 'https://cdnjs.cloudflare.com/ajax/libs/sp-pnp-js/3.0.1/pnp.min.js';
    document.head.appendChild(s);
  }

  const waitFor = (cond, cb) => {
    if (!cond()) {
      setTimeout(() => waitFor(obj, cb), 100);
    } else {
      if (cb && typeof cb === 'function') {
        cb();
      }
    }
  };

  waitFor(() => typeof $pnp !== 'undefined', () => {

    // Usage in proxy mode

    const proxyUrl = 'http://localhost:8080'; // sp-rest-proxy's url for a dev project
    // _spPageContextInfo should be mimiced on locally served page
    if (typeof _spPageContextInfo === 'undefined') {
      _spPageContextInfo = {};
      _spPageContextInfo.webServerRelativeUrl = '/sites/site/web'; // Provide a web's relative URL
      _spPageContextInfo.webAbsoluteUrl = `${proxyUrl}${_spPageContextInfo.webServerRelativeUrl}`;
    }

    // PnP JS Core setup
    $pnp.setup({
      sp: {
        headers: {
          Accept: 'application/json;odata=verbose;'
        }
      }
      // `baseUrl` with `_spPageContextInfo.webAbsoluteUrl` can be used
      // or strict Web object creation as shown below
    });

    // Create new Web object with `webAbsoluteUrl` to proxy
    let web = new $pnp.Web(_spPageContextInfo.webAbsoluteUrl);

    // Using POST method to create an item as example
    web.getList(`${_spPageContextInfo.webServerRelativeUrl}/Lists/CustomList`)
      .items.add({
        Title: 'New Item'
      }).then(console.log);

  });

})();

Request from non-SharePoint page

Request in Proxy

[koltyakov]

Blog post article with setting up SPFx and Proxy with PnP JS Core section as a bonus.