How to Create Single Page Application in SharePoint – Part 1

This would be an article series in which, I will be covering the steps to create a Single Page Application (SPA) in SharePoint using ReactJS.

I would like to begin the series with a detailed introduction and motivation for the beginners. In case, you want to begin with the actual steps to create a single page application in SharePoint, skip this article and refer to Part 2 directly.

A Simple Introduction to Create SPA in SharePoint

It is well known among SharePoint community that SharePoint Framework (SPFx) has emerged as the most popular development method in recent times. One of the requirements from the SharePoint Developers community was to enable SharePoint developers in creating the SPAs. The SPFx method provided that hope. Initially, there was a plan by Microsoft to approach the SPFx in a phased manner and include the SPA module after the client side webpart module is stabilized.

In the latest version of SPFx there is an option to convert the existing webparts to single part app pages (SPAP). Now, I am not sure if this is Microsoft’s version of SPAs in SharePoint or if there is any plan to include SPA module in SPFx in the future.

SPAPs are the extensions of client side Webparts. These types of pages basically allow just one webpart on a page and restrict developers or power users from adding multiple webpart to the page.

The overall development experience is exactly similar to client side webparts development method using SPFx. Developers should first create the client side webpart using SPFx method and then follow few additional steps to convert the existing page to single part app page(SPAP) using either PowerShell script or by running a JS scripts as explained in the official documentation here.

If you look from developer’s perspective, below mentioned are the high-level steps to create SPAPs.

• Create a new client side webpart using SPFx development method : Click Here for detailed steps from Microsoft official documentation
• After deploying this webpart you need to add it to the SharePoint page : Click Here for the steps to add webparts to modern SharePoint pages
• Now, you can convert this page as a single page app part (SPAP) : Click Here to refer to the steps to convert the page to single part app page (SPAP)

single page app page (SPAP) is definitely not a Single Page App (SPA). Hence, I am writing this article which will help you to create SPA from within SharePoint using NodeJS based development.

A Quick Motivation for this Article Series

We the SharePoint Developers have seen through numerous development methods starting from the Farm based solutions to the latest offering of SPFx. However, we have always been confined by the rules set forth by the development models. SPFx method provides much-needed liberty and the development experience.

Many SP Developers may not be aware that SPFx is derived from the same principle of NodeJS based open source development. In fact, much before the SPFx was officially announced there were few demos and documentation conducted and written by Microsoft about how NodeJS development method can be leveraged. This was a preparatory measure to prepare the developers for the SPFx.

In this article series, I will also provide the steps to develop a Single Page Application using node.js based development method, which communicates with SharePoint resources using REST APIs and performs desired activities.

Comparison with SharePoint Framework (SPFx)

Before I begin this section, I would like to mention that this development approach is by no means to highlight the limitations of SPFx or to discredit its solid development approach. I would also like to mention here that this is not a Microsoft’s officially recommended approach. You may want to use this for some experiments. As this approach provides better flexibility as compared to the SPFx. Please refer below for some of the features which are different in comparison to SPFx.

• If you are from the Node.JS based open source development world, adoption to this approach is like a breeze. As you will be using SharePoint as a service rather than as a development platform and there is no difference in the development approach.
• Mentioned below are some of the limitations of SPFx v1.7(version I was using at the time of writing this article)
  • The latest version of SPFx has a dependency on older versions of
    • Typescript i.e. TypeScript Version 2.4.2
    • ReactJS i.e. React Version 15
    • Webpack i.e. Webpack v3.6.0
    • Office UI Fabric React e. Version 5 (Latest version of Office UI Fabric react is v6.0 which depends on React 16)
  • Gulp JS + webpack are used for the bundling purpose. Still, Gulp commands are used as compared to more simplified webpack based commands.
  • Typescript is almost mandatory in SPFx.
  • Not possible to use external libraries which have a dependency on the latest versions of React or Typescript

Recommendations: Though it is possible to deploy and use a real SharePoint SPA, it is recommended that you use this approach to experiment and build components and/or solutions which are currently not possible through SPFx. You can later convert them to SPFx when the SPFx extends the support in the upcoming releases.

Prerequisites

This article series is not an extensive guide for all the technologies used to develop the SPA. Mentioned below are some of the good to have and non-mandatory prerequisites that will help you to understand and adopt this method quickly.

• The reader has knowledge about SPFx (Not mandatory though)
• The reader has some knowledge about Open source development using Node.js and has already installed all the relevant packages such as (NodeJS, NPM, webpack etc.)
• The reader has some understanding about Advanced JS, Typescript and ReactJS
• The reader is aware of the existence of JS bundler libraries such as web pack, Gulp etc.,
• SharePoint Online development environment setup is already available

Take a Tour of SPA Article Series

This article series is divided into three major parts as mentioned below.

• Part 1: Introduction & Motivation (This article)
• Part 2: Getting Started
  • Basic setup
  • How to open a SharePoint page and connect to Node.JS development environment
• Part 3: Simple SharePoint SPA with an example
  • SPA Layout using CSS grid
  • Display of SP lists in Side Nav and content in the Main section

Note: Please be informed that this method is not an officially recommended method by Microsoft. Please proceed to use this as per your judgment and business use cases.