Author: David Petersen

Last year, I decided that I wanted to learn different ways to create web applications.  The two major candidates were Angular 1.x and ReactJS.  I went through some courses on Pluralsight and other training sites for both.  After “playing” around with both, I can honestly say that I prefer ReactJS over Angular.  Angular 2.0 looks promising, but I think some of the same reasons I choose React over Angular still exist:

1. Angular supplements HTML with its own attributes and puts javascript in HTML.  React is straight Javascript.
2. You have to learn a whole framework with Angular.  With React, I can choose my own ecosystem.
3. One thing I read, is that because React is just javascript, it teaches you to be a better JavaScript programmer.
4. React is focused on doing one thing and being the best at it.  It makes UI’s fast!  The virtual DOM just makes sense to me.
5. Data flow in React is one way.  It flows down from the top and state is passed back up.  That makes sense to me.

I’ve been developing React apps on NodeJS but I’m a SharePoint Developer.  I kept wondering if I could write Single Page Apps (SPA) for SharePoint.

Basically, my requirements were:

1. Write a ReactJS app that would compile down to a static JavaScript file that I could embed in a Content Editor Web Part.
2. Use SharePoint’s REST interfaces to access the SharePoint objects.
3. Since this would be hosted on SharePoint, I didn’t need to worry about cross-domain authentication.
4. Use React Router to control app routing.
5. Create a workflow that would allow me to easily develop and deploy these apps to SharePoint.

With the recent guidance from Microsoft about the SharePoint Framework, I thought this was the perfect time to attempt to write a React app on SharePoint.

After a lot of research, I found a couple of things.

There is a project called ReactJS.NET that makes using React with .NET easier.  It focuses on the .NET MVC pattern.  I looked at that, created some demos but it didn’t fit my requirements.  I didn’t want to have to deploy compiled C# code to a SharePoint server.

I decided to start rolling my own solution.  I chose

• ReactJS
• NodeJS
• Babel (to transpile JSX)
• npm (to load the node packages and run scripts
• Webpack to bundle them into static files

I was trying to put this all together when someone recommended that I check out the team at Facebook Incubator’s create-react-app bootstrapper.  After looking through the demos. Installing it myself and creating some quick (albeit small) apps and getting them to run on SharePoint, I think I have found my solution.

A couple of challenges.

1.  How do I develop on NodeJS without connecting to the SharePoint REST interfaces?
2. How do I deploy the created app to SharePoint.

The answer to the first question was to create a “dummy” REST interface for development.  I created the lists that I needed in SharePoint and then used Postman to call the REST interfaces and grab the data that was returned.  I copied that data object into my React App as the data source and then created an API module that would use the local data instead of calling SharePoint.  Since we can request a JSON object from SharePoint using the Accept header, it was easy to recreate the API necessary using array methods.  Once the app was developed using my dummy API, I substituted my real API that actually called the SharePoint REST endpoints.

The second question posed more of a problem.  I planned to put my app on a web part page by referencing it in a content editor web part.  For years I have been storing custom code in the Site Assets library.  You could also create a CDN to host your app code.  Either way, your development workflow needs to be able to copy the static files from your production build, to SharePoint.  My original solution was to upload them via the web interface.  This worked but it was too cumbersome.  My next solution was to map a drive to Site Assets folder in SharePoint.  This works some of the time, but this also is cumbersome.  I recently read about an npm module called spsave.  I’m going to try to work it into my workflow.  This should allow me to automatically deploy my files to SharePoint when I run the build command.

I put together a presentation about my work to get React to work in SharePoint.  It’s still a work in progress.  I delivered the presentation at SharePoint Saturday – Kansas City on October 1 and then again in Minneapolis for SharePoint Saturday – Twin Cities.  My slides are linked below but the best thing to do would be to look at the code of the Contacts app I created for the presentation.  It’s a simple app but demostrates the use of a dummy API to develop with.  The github link to the code is below also.

I plan on continuing to improve my demo and adding to it.  I think I’m going to add some tests and I still need to add a delete function.  If you are interested, go ahead and star my repository.  If you find an error in the code, or a better way of doing something – I’d love to hear about it!  Remember, I’m still learning so be kind!

ReactJs SPA’s on SharePoint

https://github.com/dipetersen/ReactOnSharePoint

spstc2016-reactjs-on-sharepoint