Headless Joomla using Angular and Algolia

We had been working with our customer Osians, to build a knowledge base site for the years of archival work they had been doing documenting over 200 years of contemporary Indian culture. The catalog currently boasts of over 125,000 records documented with details.

The site was built off Joomla and worked really well. In 2017, however, there was a need to modernize the stack, and one of the key considerations was to separate out the backend and frontends so that each could be evolved independently. Using Joomla + com_api for the backend was an obvious choice since we already had our data in com_zoo. So it was only a matter of writing API plugins for Zoo. All of our data was already being indexed in Algolia, so no change was needed there.

For the frontend, we chose to use Angular, since the ecosystem of available modules seemed compelling enough and had most of the components we felt we needed.

Post this, it was an interesting exercise of converting the Joomla template into necessary bits in Angular. We chose to use the MDB Bootstrap component since that had a lot of ready-made components like lists, models and plenty of CSS utilities. Our Joomla theme was using bootstrap, so it was possible to reuse a lot of the CSS since we wanted to achieve a similar look with Angular.

Getting used to Angular Services
One very useful design paradigm in Angular is the use of services. Services allow creating purpose specific components that can be injected into the application. We created services for all APIs, for Algolia and also for our handlebar based sub-template system.

Routing and SEF URLs
When transitioning to the angular app, the URLs for all pages had to stay the same, otherwise, we would have ended up losing all the SEO juice. For this, we created a menu API and some routing craft that allowed us to load all Joomla menus via an API which let us use the same aliases as Joomla. Of course, the code isn't the best we hoped for since we had to manually map each of the menu aliases to the angular component.

SEO Impact
One key challenge that came forth with Angular was that Google could no longer index our pages! With Angular, the content on the pages is built on the fly, which is unlike Joomla where pages are rendered from the server. To work around this, we set up a rendertron server. The rendertron server sits behind our NGINX proxy and serves pre-rendered pages. We set up the proxy such that the pre-rendered pages are served only to certain user agents, so only GoogleBot, Bing, Alexa etc see the pre-rendered pages, and all other users see the Angular application. 

 You can visit the website at osianama.com