topic Alfresco Auth Router and React "create-react-app" in Alfresco Archive

topic Alfresco Auth Router and React "create-react-app" in Alfresco Archive https://connect.hyland.com/t5/alfresco-archive/alfresco-auth-router-and-react-quot-create-react-app-quot/m-p/160329#M114305 <HTML><HEAD></HEAD><BODY><PRE __default_attr="info" __jive_macro_name="alert" alert="info" class="jive_text_macro jive_macro_alert">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.</PRE>At the end of <A _jive_internal="true" href="https://community.alfresco.com/people/ddraper/blog/2016/12/28/my-first-npm-package" rel="nofollow noopener noreferrer">my last blog</A> I'd just published my first <A href="https://www.npmjs.com/package/alfresco-auth-router" rel="nofollow noopener noreferrer">NPM package</A> that provided some basic Express middleware configuration for <A href="http://passportjs.org/" rel="nofollow noopener noreferrer">Passport.j</A>s and <A href="https://expressjs.com/en/guide/routing.html" rel="nofollow noopener noreferrer">Express Router</A>. Having got this working successfully with the <A href="https://github.com/vuejs/vue-cli" rel="nofollow noopener noreferrer">Vue.js CLI</A> I decided to see if it could just as easily be applied to a <A href="https://facebook.github.io/react/" rel="nofollow noopener noreferrer">React</A> development environment.Something I frequently <A href="https://medium.com/@paramsingh_66174/angularjs-vs-reactjs-e651a194dfcb#.i98km7hql" rel="nofollow noopener noreferrer">read</A> when people are discussing the differences between <A href="https://angular.io/" rel="nofollow noopener noreferrer">Angular</A> 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 "<A href="https://github.com/facebookincubator/create-react-app" rel="nofollow noopener noreferrer">create-react-app</A>" 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 "<A href="https://www.npmjs.com/package/react-scripts" rel="nofollow noopener noreferrer">react-scripts</A>" that setup a <A href="https://webpack.github.io/docs/webpack-dev-server.html" rel="nofollow noopener noreferrer">webpack-dev-server</A> 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:<PRE class="language-none line-numbers"><CODE>npm run eject‍‍‍‍‍</CODE></PRE>...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)...<PRE class="language-none line-numbers"><CODE>npm install --save-dev passport flash express-session alfresco-auth-router‍‍‍‍‍</CODE></PRE>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 <A href="https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/" rel="nofollow noopener noreferrer">configure a proxy</A> to handle the requests (interestingly I found this is also <A href="https://github.com/aurelia/cli/issues/256" rel="nofollow noopener noreferrer">the approach</A> taken with the <A href="http://aurelia.io/" rel="nofollow noopener noreferrer">Aurelia</A> as both use <A href="https://www.npmjs.com/package/http-proxy-middleware" rel="nofollow noopener noreferrer">http-proxy-middleware</A>).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 <A href="https://github.com/reacttraining/react-router" rel="nofollow noopener noreferrer">react-router</A> to set up path based routes. An example React authentication flow is provided <A href="https://github.com/ReactTraining/react-router/tree/master/examples/auth-flow" rel="nofollow noopener noreferrer">here</A>. 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 "<A href="https://github.com/babel/babel-sublime" rel="nofollow noopener noreferrer">babel-sublime</A>".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.</BODY></HTML> Thu, 05 Jan 2017 13:20:41 GMT ddraper 2017-01-05T13:20:41Z Alfresco Auth Router and React "create-react-app" https://connect.hyland.com/t5/alfresco-archive/alfresco-auth-router-and-react-quot-create-react-app-quot/m-p/160329#M114305 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 Thu, 05 Jan 2017 13:20:41 GMT https://connect.hyland.com/t5/alfresco-archive/alfresco-auth-router-and-react-quot-create-react-app-quot/m-p/160329#M114305 ddraper 2017-01-05T13:20:41Z