Because Ionic Apps need some JHipster too!
The Ionic JHipster Starter is designed to be used with a JHipster backend. You can create a project with it directly, or use Ionic for JHipster.
This project provides a base template of functionality for an Ionic app. The Ionic for JHipster module provides entity generation and additional features that require logic to install (e.g. OAuth authentication).
To use this starter, install the latest version of the Ionic CLI and run:
ionic start ionic4j oktadeveloper/jhipster --type angular
You can also install it using the Ionic for JHipster Module:
npm install -g generator-jhipster-ionic @ionic/cli @angular/cli ionic4j
This module allows you to generate entities using:
ionic4j entity <name>
Or by importing JDL:
ionic4j import-jdl <file.jdl>
NOTE: If you have any issues with the commands above, you can also use the
yo jhipster-ionic equivalents.
yo jhipster-ionic # create an app yo jhipster-ionic:entity <name> yo jhipster-ionic:import-jdl <file.jdl>
In production, you will need to enable CORS in your backend's
src/main/resources/config/application-prod.yml file. Set the allowed-origins so it works with
cors: allowed-origins: "http://localhost:8100"
The Ionic JHipster Starter comes with a variety of ready-made pages.
The Ionic JHipster Starter comes with some basic implementations of common services.
User service is used to authenticate users through its
signup(accountInfo) methods, which perform
requests to an API endpoint that you will need to configure.
ApiService is a simple CRUD frontend to an API.
The Ionic JHipster Starter comes with internationalization (i18n) out of the box with ngx-translate. This makes it easy to change the text used in the app by modifying only one file.
To add new languages, add new files to the
following the pattern of LANGCODE.json where LANGCODE is the language/locale
code (ex: en/gb/de/es/etc.).
This starter borrows its testing infrastructure from Daniel Sogl's Ionic Super Starter. Thanks Daniel!
There are a number of scripts in
package.json you can use to run tests:
"test": "jest", "test:watch": "jest --watch", "test:ci": "jest --runInBand", "test:coverage": "jest --coverage", "e2e": "ng e2e --port 8100"
NOTE: If you'd like to convert your project so you can run
ng test to run your tests, see Angular CLI: "ng test" with Jest in 3 minutes.
To run a unit test you have three options.
npm testruns all your created unit-tests
npm run test:ciif you want to run the unit-tests with you favorite CI
npm run test:coverage
If you want to add ionic-native mocks you should definitely check out Chris Griffith's ionic-native-mocks repository
See the unit test example at
The E2E test configuration is from the official ionic-unit-testing-example repository. The e2e folder structure has been changed a bit.
/e2e - pages - spec
Add your pages into the
/pages folder and your tests into the
See the example end-to-end test in
To run the e2e tests:
npm run e2e