I lost interest in documenting this and also Jon Ruddell has created a module for this: https://jhipster.github.io/modules/marketplace/#/details/generator-jhipster-ionic

Also, I'm moving to NativeScript rather than to Ionic 2.

JHipster-Ionic (Work in Progress)

This is an attempt to show how to build an Ionic app using JHipster as backend

The project is structured in 2 modules:

• server: the JHipster backend
• mobile: the Ionic app

The guiding principle is be to generate the mobile app using Yeoman Generator-M-Ionic to benefit from its great tooling while following JHipster angular code conventions so that JHipster users feel at home.

If the prototype is successful, JHipster could be extended with a sub generator that would generate CRUD screens for each entity in mobile app or it could be just documented in our Tips'n tricks section

Environment

• Ubuntu
• java 8
• node 0.12.4
• Android SDK

Generating modules

Server

mkdir server
cd server
yo jhipster

I chose the default options except for:

• gradle to be consistent with Android and Apache Cordova
• gulp to be consistent with Generator-M and Ionic
• no translation

Test that app works:

./gradlew bootRun

Open http://127.0.0.1:8080

Mobile App

The Ionic app was generated by Yeoman Generator-M

mkdir mobile
cd mobile
yo m

I chose the default options except for:

• appName: "jhipsterApp" to be consistent with JHipster angular module
• appId: "com.mycompany.myapp" to be consistent with JHipster
• no i18n/l10n
• no iOS

Test that app works in browser:

gulp watch

Open http://127.0.0.1:9000

Differences in angular projects

Project structure

• JHipster: organized by feature, a folder can contain a state, a controller and a template. Generic components (filters, directives, services) are stored in 'components' folder.
• Generator-M: organized by module and type, all states are defined in one file per module (e.g. main.js)

Modules

• JHipster: single module
• Generator-M-Ionic: Multi modules but at least app and main

Naming conventions

• JHipster: MainController defined in main.controller.js
• Generator-M-Ionic: MainCtrl defined in main-ctrl.js

Generator-M pull requests

I proposed some PR to Generator-M to make it easier for JHipster.

• 220: Add templates path to gulpfile.js config

API

Generating

JHipster uses Swagger to document its API, it's available at http://localhost/v2/api-docs but it requires authentication.

JHiposter's swagger specification file could be generated statically by build process and processed to generate some client code like swagger-js-codegen. JHipster's API controllers should probably be better annotated.

An alternative is to use dynamic clients: swagger-js or swagger-client

API versioning

Currently in JHipster, the server and angular codes are coupled so there's no problem of compatibility.

When building a mobile app, this problem can occur because you don't manage when users will update the mobile app.

So, it could mean:

• server and mobile app must have a version number
• server API URL may include version (e.g. /api/v1) or use media-type application/vnd.jhipster.v1+json
• mobile client should send its version number upon each request using an HTTP header. This can be implemented by using $http interceptors and pre-defining some standard responses like "client too old" that the mobile app can use to notify the user that she must update the app.

Cross-origin resource sharing (CORS)

JHipster backend must set response headers indicating that it allows CORS, it can be done in 2 ways:

• by mapping a servlet filter on '/api'
• by using new annotation @CrossOrigin introduced in Spring 4.2

Spring 4.2 did not fully work with JHipster 2.19.0, so we will have to wait for JHipster to support Spring Boot 1.3 when it's released. In the meantime I copied ApiOriginFilter from swagger-codegen project and configured it in WebConfigurer.