Chances are you’ve had an urgent work conversation like this:
“We really need to build a quick proof of concept!” “OK, what is the time frame?” “Well, to be honest with you… We’d like to have it yesterday!”
In my previous blog, I introduced you to Hyland University - offering free, unlimited access to Nuxeo Platform video training. I had briefly mentioned that we used an embedded AngularJS application in a Nuxeo cloud instance to build the Hyland University. Today, I will explain this concept in detail. Let me walk you through our experience, so you can benefit from it and learn how to build and deploy awesome AngularJS applications in a Nuxeo instance very quickly. Not quite “yesterday”, but very quickly!
That’s how things started for Hyland University. We wanted a quick proof of concept - preferably “yesterday”! - to validate our vision without investing too much of our developers’ valuable time. So we made a list of our requirements, which were in fact quite common for a web application:
- Browsing
- Handling content
- Managing users and access rights
- Applying business rules
- Providing a back-office for management purpose
The Nuxeo Platform instance can easily handle these requirements. So, using Nuxeo Studio, we built a content model with a few document types where courses can reference videos, and videos can reference resources.
As you can see it’s a pretty basic setup - something that a Nuxeo Studio beginner can create without any problem. We also implemented a few business rules using Automation Chains.
Creating a Custom UI Using AngularJS and REST API
We have the content model ready but we knew the Nuxeo Platform’s default web UI won’t do the trick for Hyland University. We need something more appropriate and customized. Fortunately, the Nuxeo Platform exposes its resources and functionalities through a REST API, which allows creating a custom UI using any programming language.
JavaScript seemed like the obvious choice to build a responsive front-end. After trying different frameworks, we decided to go with AngularJS. We had a JQuery and node.js Nuxeo javascript client, but nothing for AngularJS yet. So we did what we do best - we built it! And let me tell you… the result was awesome! See for yourself: Nuxeo AngularJS client.
We also used an awesome UI framework named Semantic UI to give Hyland University a great look. This is what we got:
You can also use other frameworks instead of Semantic UI; for instance, Bootstrap.
Now we come to one of the most important question: How will we deploy it?
Embedding the AngularJS Project in a Nuxeo Instance
The current setup would have been perfect if we wanted to deploy the AngularJS application in a stand-alone fashion. But that would require resources, setting up a server and a lot of configuration that we didn’t want to go through, especially since we have the perfect infrastructure already built for this already - Nuxeo Cloud, our Cloud Content Management system!
For that reason, we agreed our goal was to embed the AngularJS application into a Nuxeo Platform instance and then direct people to this interface instead of the default one.
To get to this point we:
- Created a project that builds the AngularJS application and places it into the platform’s nuxeo.war folder
- Packaged it into a Nuxeo Marketplace package to properly install or upgrade it
- Deployed it through the Private Marketplace Channel
We loved the result so much that we decided to model a generic project out of it for your use! It’s the Nuxeo Angular sample and its detailed usage is explained in our Developing with AngularJS documentation page. You can try this out and start building awesome web experiences for your users. Don’t forget to share your feedback and results with us!
