This is a personal blog post that is primarily intended for tracking my own learning rather than provided to the Alfresco Community for educational purposes. However if you find it useful, informative or have any comments on it then please comment below.
At the end of my last blog I'd just published my first NPM package that provided some basic Express middleware configuration for Passport.js and Express Router. Having got this working successfully with the Vue.js CLI I decided to see if it could just as easily be applied to a React development environment.
Something I frequently read when people are discussing the differences between Angular and React is that the former is a "framework" and the latter is a "library". The suggestion being that Angular comes with everything you need to develop an application whereas React is something that you can plug into any number of different environments. This suggestion is also frequently debunked as there are now well established patterns for building React applications however it was pretty late in providing it's own standard application development template with the "create-react-app" project.
I was hoping that this would be just as simple to plug the Alfresco Auth Router into as the Vue CLI but there were a couple of hoops that needed to be jumped through first.
The main issue was that all of the server configuration was part of a separate NPM package called "react-scripts" that setup a webpack-dev-server for serving the web application. It is however possible to "eject" from the standard project to get access to the full server configuration, which can be done by running:
npm run eject
...you then get access to the various scripts and configuration files for setting up the server (however I later discovered that this actually isn't required).
The "scripts/start.js" file provides a "runDevServer" function in which it is possible to add in the required dependencies (after installing them)...
npm install --save-dev passport flash express-session alfresco-auth-router
However the problem I was finding was that all my XHR requests were getting routed back to "/index.html" and reloading the page.
It seems that the approach recommended for handling API calls in an application built with "create-react-app" is to configure a proxy to handle the requests (interestingly I found this is also the approach taken with the Aurelia as both use http-proxy-middleware).
Whereas my Vue.js project had separate pages for login and content the approach taken with "create-react-app" is around Single Page Applications (SPAs). This meant that when authentication failed I was always going back to the same page - and authentication was failing when I was trying to login!
With an SPA for React the solution seemed to be to use react-router to set up path based routes. An example React authentication flow is provided here. In this scenario it would seem that my "alfresco-auth-router" solution is not applicable. Instead the approach to use is to configure a proxy to your Alfresco Repository in the "package.json" file and manage the session token and requests within the application itself.
Working with JSX meant it was necessary to configure Sublime Text with additional syntax handling. The recommended package appears to be "babel-sublime".
I was able to get back REST API calls working and rendering the contents of company home.... the next stage is to break this into re-usable components that can be used across multiple UI frameworks.
