The Ionic JHipster Starter 🤓
Because Ionic Apps need some JHipster 💙 too!
The Ionic JHipster Starter is designed to be used with a JHipster backend that uses JWT Authentication. 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).
This project is in a beta state, see its v1.0 milestone for progress towards a release.
Table of Contents
- Getting Started
- Pages
- Providers
- i18n (adding languages)
- Testing
Getting Started
To use this starter, install the latest version of the Ionic CLI and run:
ionic start ionic4j oktadeveloper/jhipster
You can also install it using the Ionic for JHipster Module:
npm install -g generator-jhipster-ionic
yo jhipster-ionic
This module allows you to generate entities using:
yo jhipster-ionic:entity <name>
Tips
You will need to enable CORS in your backend's src/main/resources/config/application.yml
file. Set the allowed-origins so it works with ionic serve
:
cors:
allowed-origins: "http://localhost:8100"
The emulator runs on port 8080, so you will need to change your backend to run on a different port (e.g., 8888) when running ionic cordova emulate
. Port 8080 is specified in the following files:
{jhipster-project}/src/main/resources/config/application-dev.yml
{jhipster-project}/webpack/webpack.dev.js
{ionic-project}/src/providers/api/api.ts
Pages
The Ionic JHipster Starter comes with a variety of ready-made pages.
Providers
The Ionic JHipster Starter comes with some basic implementations of common providers.
User
The User
provider is used to authenticate users through its
login(accountInfo)
and signup(accountInfo)
methods, which perform POST
requests to an API endpoint that you will need to configure.
Api
The Api
provider is a simple CRUD frontend to an API. Simply put the root of
your API url in the Api class and call get/post/put/patch/delete.
i18n
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.
Adding Languages
To add new languages, add new files to the src/assets/i18n
directory,
following the pattern of LANGCODE.json where LANGCODE is the language/locale
code (ex: en/gb/de/es/etc.).
Testing
This starter borrows its testing infrastructure from Daniel Sogl's Ionic Super Starter. Thanks Daniel!
Usage
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": "npm run e2e-update && npm run e2e-test",
"e2e-test": "protractor ./test-config/protractor.conf.js",
"e2e-update": "webdriver-manager update --standalone false --gecko false"
Unit Tests
Jest is used as the unit test runner in this project. Jest is a complete and easy to set-up JavaScript testing solution created by Facebook. Some of its benefits are:
- Fast and sandboxed
- Built-in code coverage reports
- Zero configuration
To run a unit test you have three options.
- Run
npm test
runs all your created unit-tests - Run
npm run test:ci
if you want to run the unit-tests with you favorite CI - To create a test-coverage report you can run
npm run test:coverage
Daniel created Ionic Mocks with Jest Support by forking the ionic-mocks ionic-mock repository. There are still some issues. Feel free to help him out with his ionic-mocks-jest repository.
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 src/app/app.component.spec.ts
.
E2E Tests
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 /spec
folder.
See the example end-to-end test in e2e/spec/app.e2e-spec.ts
.
To run the e2e tests, build your app for production, then run the tests.
npm run build --prod
npm run e2e
The Protractor configuration uses serve to serve up the contents of www
on port 8100 before running its tests.
Apache-2.0 © Okta