1

I was asked to integrate my React app into a SharePoint 2010 page. I've never worked with SharePoint before. I've tried searching online, but couldn't find any definite answer if this is doable with an older version of SP, like 2010, or how to start approaching this. Lots of resource on using React in SP use SPFx which is not available for SP 2010 as far as I understand.

Can anyone give me a few pointers on where to start with this? Right now I have a standalone React app and, I guess, "Design" access level to a SP 2010 website (I can create new pages).

1

I've never embedded a react app before but look into Content Editor webparts. You can embed HTML or code into these, and/or reference external css/scripts from these. This will be the most direct method of getting code onto a page. You can add these by editing a page and clicking anywhere that says "Add a Web Part". Then it's "Media and Content > Content Editor".

The alternative would be to build an actual SharePoint solution using Visual Studio and deploying it, which if you've never worked with SharePoint before, you don't want to do.

1

Yeah, SPFx isn't available in older versions like 2010.

I have tried something like this (with SharePoint 2010), but instead of using React, I used Vue.js. I wasn't required to embed an existing app, but was able to start from scratch and I found for my needs, there was really only one viable option:

  • Host your react app on a new SharePoint wiki page by editing the source code to include <link> tag references to the react library and the pre-built .js file(s) for your project.

You can use the content editor web part, but I found it suboptimal for when you're trying to enhance an existing page that already has webparts and other content on it; I resorted to just inserting a link directing users to a separate wiki page.

Because you're going with react, you can use a node.js build system like Webpack during development (but remove the local http server as SharePoint uses IIS); this allows you to use Typescript with type definition libraries, but your build scripts needs to automatically upload your built files to SharePoint after node.js processes them (however, there's a trick to do this, by mounting a document library as a network drive; see below).

Also, if you use typescript, you might want a SharePoint 2010-compatible type definition library like here: https://github.com/gandjustas/sptypescript, which give you type hintings with the JSOM (Javascript object model).

Getting node.js + webpack to work on a SharePoint 2010 document library:

While this method does not need Visual Studio or even SharePoint Designer, it is a hack, and doesn't allow webpack hot reloading to work. BUT - it does allow you to treat a SharePoint page library as if it were a local folder, node.js can watch it and you can F5 in a browser and be able view at development time how your code interacts with SharePoint.

Unfortunately this won't always work if your farm administrator has disabled WebDav, which is required to get it to mount in Windows Explorer. You also need the WebClient service on your machine to be started. Also I've only tested this in Windows 7.

  • Create a SharePoint wiki pages document library to use as a dev folder and mount it as a network drive, using Windows Explorer (e.g. http://sharepoint/site/SitePages/ would be mapped to R:\). You have to map it as a network drive so your command prompt or powershell can also mount it. Also there may be issues with getting this to work if you don't already control a SharePoint instance. An easy way to mount a SharePoint document library as a network drive is to visit it in IE and click on the button in the ribbon 'Open with Windows Explorer', and then mount it using the address Explorer gives you. Google can help you here.
  • Use this R:\ drive as your development folder - setup a new webpack + react template in it, but disable any local http server in your webpack script, as you're using SharePoint, which uses IIS - you only want webpack to build your typescript+sass (etc). After you've mounted it as a network drive, point node.js to watch the drive, using npm run watch or whatever command is applicable to your project.

I'd also advise you don't init a git repo in your R:\ drive, as all the files in that drive are uploaded to SharePoint over HTTP.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.