Generates an Ionic v1 frontend from an existing JHipster AngularJS project, supports all authentication types and translation.
Ionic 2 and Angular 2 are both released and I do not plan on upgrading this module to use them. Because of that, I will no longer be maintaining or providing support for this project. Thanks for all of the support and I hope this project helped.
I have shifted my focus to a new JHipster mobile generator utilizing React Native, Ignite JHipster
The goal of this module is to generate an M-Ionic frontend from an existing JHipster project.
An example from start to finish can be seen:
###Key Features Login, Registration, Settings, Password Change, and Password Reset all function the same as in a regular JHipster application, except with an Ionic frontend.
CORS proxy is set up in gulp/watching.js to forward gulp's live-reload to a running JHipster server. If the JHipster application is running on port 8080, you should be able to log in from gulp's live-reload. Default proxies are below.
Gulp Path | Proxies To JHipster |
---|---|
http://localhost:3000/api | http://localhost:8080/api |
http://localhost:3000/oauth | http://localhost:8080/oauth |
Please note: If you are running microservices, you will need to add proxy paths for each of the microservice routes. |
- Auth
- OAuth2
- JWT
- App Types
- Monolith
- Gateway/Microservices
- Translation
- Websockets (see Websocket section for setup)
- Session Auth
- Social Login
- JHipster (Installing JHipster)
- M-Ionic (Installing M-Ionic)
To install everything needed, run:
npm install -g ionic yo bower gulp generator-m-ionic cordova
This module also requires an existing AngularJS JHipster project to copy the authentication files from. It will not work with Angular 2.
To install this module:
npm install -g generator-jhipster-ionic
To update this module:
npm update -g generator-jhipster-ionic
From a completely empty directory:
yo jhipster-ionic --force
Follow the prompts and enter the path to your JHipster project's parent directory. Choose the JHipster project from which to generate the Ionic project. A Cordova project and an M-Ionic front-end are generated in the current directory. JHipster files are then be copied and formatted into the Ionic project.
Currently all JHipster files are copied to the 'app/main/jhipster' folder (except translations, see below). The rest of the app follows M-Ionic's project structure.
To run your app with live-reload and a CORS proxy, run:
gulp watch
CORS settings can be found in gulp/watching.js. Endpoints are set up for /oauth and /api to http://localhost:8080.
If you are running microservices, you will need to add proxy paths for each of the microservice routes. If you need
CORS on your server backend, uncomment the CORS section in src/main/resources/config/application.yml
of your JHipster
project.
M-Ionic provides a massive tool set for an Ionic app. For example, cordova commands have a wrapper through gulp. Check out M-Ionic's Dev Intro to see how to use them.
Translations are copied over from the JHipster project into the app/i18n/ folder. If you update your translations, either manually copy them over or re-run the generator.
If your ionic client shows 403 forbidden or "Origin header value 'http://localhost:3000' not allowed." in JHipster application, then you must configure WebsocketConfiguration.java as follows:
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/websocket/tracker")
/*add the line below */
.setAllowedOrigins("*")
.withSockJS().setInterceptors(httpSessionHandshakeInterceptor());
}
To run the app on a device/emulator:
- Set up config.xml
- Add the platforms you need
- iOS: Ensure you have the proper provisioning profile
- Make sure to specify the API url in constants/env-prod.json and build with --env=prod to inject the URL into all
files contacting the API.
- Note that you can not use
http://localhost:8080
as your API url when running on device. You must specify an IP to your JHipster backend that is accessible on your device (public domain/IP or local IP of JHipster backend)
- Note that you can not use
- Run the cordova command (use the wrapper to build the project before deploying it)
gulp --cordova 'run ios --device'
- v2.2.2 - Fix bower versioning to exact versions, add note to top about maintenence.
- v2.2.1 - Fix angular apps with capitalized base names
- v2.2.0 - Prevent generation JHipster apps with Session or NG2 selected
- v2.1 - Add Websocket support
- v2 - Add Translation support
- v1.1 - Set up a CORS proxy for developing locally.
- v1 - Basic Ionic application with JHipster authentication features.
Apache-2.0 © [Jon Ruddell]