dystudio / ionic-jhipster-starter

Starter Template for Ionic Apps with JHipster

The Ionic JHipster Starter 🤓

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).

Table of Contents

1. Getting Started
2. Pages
3. Providers
4. i18n (adding languages)
5. Testing

Getting Started

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 @angular/cli
yo jhipster-ionic

This module allows you to generate entities using:

yo jhipster-ionic:entity <name>	

Or by importing JDL:

yo jhipster-ionic:import-jdl <file.jdl>

Tips

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 ionic serve:

cors:
    allowed-origins: "http://localhost:8100"

Pages

The Ionic JHipster Starter comes with a variety of ready-made pages.

Services

The Ionic JHipster Starter comes with some basic implementations of common services.

User

The User service 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 ApiService is a simple CRUD frontend to an API.

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 ./e2e/protractor.conf.js",
"e2e-update": "node node_modules/webdriver-manager/bin/webdriver-manager update --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

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.

1. Run npm test runs all your created unit-tests
2. Run npm run test:ci if you want to run the unit-tests with you favorite CI
3. 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, start your app, then run the tests (in two separate terminal windows):

ionic serve
npm run e2e

Apache-2.0 © Okta