Hippo CMS with Angular 6, how to start

What is Hippo CMS?

Hippo is the open-source content management system based on Java language, easy to integrate, testable and compatible with Java standards. Using Hippo is easy way to serve your content from CMS where non technical user could easily create and edit it.
Read more about Hippo CMS and its architecture at official website.

Hippo CMS Content REST API

Initially Hippo was designed and created for using classic hierarchical Model-View-Controller pattern to render web pages where every page is a hierarchy of MVC components. JavaServer Pages and FreeMarker template engine were and still are technologies strongly supported by Hippo for generating views.

Nowadays, when everything is heading towards REST communication architecture, also Hippo CMS is moving with the times. Its developers team met the challenge and exposed Hippo CMS’s content and content management capabilities over RESTful web services.

Contest REST API is one of several available mechanisms to expose RESTful services. This is a generic REST API running on top of the delivery tier, automatically exposing all published content in Hippo’s content repository based on the document types. If the Content REST API is insufficient, there is a possibility to create your own custom services using the delivery tier’s support for JAX-RS.

Hippo CMS and Angular

Using Angular applications is a common way to consuming RESTful Web Services. Hippo team also indicates Angular app as great approach for retrieving and displaying documents stored in Hippo CMS’s content repository. Tutorial on official page contains ‘Feed an AngularJS App’ section which describes how to run the Hippo project with this first, slowly getting old, version of Angular. Let’s go one step further and try to build new, being on top Angular 6 application, presenting our previously mentioned, documents from content repository.

Basing on Hippo CMS 12 and Angular 6 documentation and resources, we’re showing below simple example.

Example

This example concerns running whole project on your local development machine. It shows how to get a document’s full content including texts, images and rich text content.

Prerequisites:

  • Java 8 installed
  • Maven 3 (3.2.1+) installed
  • basic understanding of HTML, JSON, and Angular (2+)
  • Node.js and npm installed

1. Creating the Hippo CMS Server

To simplify, let’s follow official Hippo page and create the project using the Hippo CMS Maven archetype:

Building the project:

Running the project:

Above steps allows us to go to: http://localhost:8080/cms/, log in with: “admin” as username and password, and then manage and look over our CMS content.

2. Enabling REST resources

Go to: http://localhost:8080/essentials where you can find a Feature Library and add features that will be available in your project.

Select Tools:
find and click “Use Rest Services setup”
make sure the option “Enable generic REST resources” is checked
→ click on the “Run setup” button.

After adding or modifying features in your project, as in this case, you always have to rebuild and restart the project with Maven.

3. Creating Hippo Document Type

Let’s assume that we want to create “news” section. Every news contains: photo, header and content.

Log in to: http://localhost:8080/cms/, move to “Content” tab. Select” Document Types” option from select menu. Click “New document type” on your project name, name it and now you can arrange it. Using field types on the right side menu, try to make a document to look like this one:

Fields: News photo → image link, Header → string, Content → Rich Text Editor

By clicking on each element you can set its Path option. Path will be used to invoke to these elements in Angular application.

Save and commit Document Type. Now it’s ready to use in our documents.

4. Creating documents

Select Document option from select menu and click “Add new document” on your project name. Name it and choose created earlier Document Type.

Fill all fields with your custom texts. If you want add a photo you must add it in your “Images” section before (select “Images” option from select top menu. Click “Add image” on your project name, select photos from your local hard drive and upload them).

After saving, closing and publishing document that you have already created, your Hippo CMS service is now exposing it as REST API Conent. You can check it at: http://localhost:8080/site/api/documents.

5. Creating the Angular 6 application

If you are new in Angular 6, according official quide, you can easily install Angular and learn how to make project, components and services. These steps are perfectly described in this tutorial, so I am sending you to it instead of describing them here.

In clear, new project find app.module.ts module and add HttpClientModule to @NgModule → imports.

Model
We can create simple HippoDocument model on which our JSON data will be mapping on. This will give us easier access to the document’s data fields.

Service
Create rest service with “ng generate service” command. Add HttpClient method getting our Hippo document by id:

Component
Mentioned news section can be treated as one news.component in our Angular application. Generate component with “ng generate component” command. Get Hippo document from CMS content repository by using our rest service like this:

Document’s id, you can find at all documents API at: http://localhost:8080/site/api/documents or after logging in: http://localhost:8080/cms/console and searching in content → documents.

View
Now everything is ready to use our CMS content in component view.

Data from news.component.ts can be easily used in our news.component.html like this:

or image:

header”, “content” and “image” after “myhippoproject” namespace are “Path” attributes that we set during creating “Document Type” in Hippo CMS.

And that’s it. From this moment content is managed by CMS and can be changed or replaced very quickly. Now we can also add styles, js scripts or whatever we want to our view.

6. Editing content

Editing content is fast and simple, but only if you did your best while creating it. Let’s assume that you did.

Log in at: http://localhost:8080/cms, in “Content” section find and select your news document, and click “Edit”. After changing texts, images etc. don’t forget to save and publish document. Your changes will be implemented immediately on client side.

As admin, at: http://localhost:8080/cms/console, you have more possibilities in managing CMS like renaming, deleting or configuring your content and also changing settings and configuration of whole project.

Conclusion

Integrating Hippo CMS with latest version of Angular seems not complicated. You shouldn’t worry about the little documentation on this subject.

In example above very simple and fast integration was presented. Complicity will increase with the increase of project size and client’s expectations.

Hippo CMS except basic content binding can be also used for:

  • managing page layout,
  • duplicating the same documents like news, posts on blog very easy,
  • managing chanels – having multiple views (website, mobile, rest, etc) on the same content,
  • translating – having one site in multiple languages,
  • having multiple domains (different hosts).

Thanks to using based on components Angular application, we can reasonably divide websites on easily manageable components which have clearly defined rest connections with Hippo CMS content. For example during creating website, elements like sub-pages, sliders, articles an so on, could be treated as separated components what gives us the ordered code of our application.

 

To learn about all possibilities of Hippo CMS visit the official website: https://www.onehippo.org.

Recommended Hippo CMS links: Tutorial, Documentation, Videos

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *