Code Monkey home page Code Monkey logo

ionic-jhipster-starter's Introduction

The Ionic JHipster Starter ๐Ÿค“

Because Ionic Apps need some JHipster ๐Ÿ’™ too!

Ionic JHipster

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

Build Status

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/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>

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": "ng e2e --port 8100"

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:

npm run e2e

Apache-2.0 ยฉ Okta

ionic-jhipster-starter's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ionic-jhipster-starter's Issues

Ionic 4 support PR

@mraible I have a running Ionic 4 with JHipster! PR for Ionic4 support
At the moment I have only support for JWT auth.

Migration plan

Few days ago, we talked a bit about a migration plan. Let me explain my thoughts even if we can't version it.

Ionic 3 support will be kept

We need to replace
ionic start ${this.ionicAppName} oktadeveloper/jhipster
by
ionic start ${this.ionicAppName} oktadeveloper/jhipster --type ionic-angular
on the generator-jhipster-ionic repo.

The starter path should stay the same on the ionic-team/starters project (ionic-angular/community/oktadeveloper/jhipster)

Ionic 4 support added

The starter path need to be different as the base starter from Ionic 4 apps has been rewritten.
Now the community starter has to be in angular/community.
I propose, if you are ok with that, to create a new path on the ionic-team/starters like angular/community/XXX/jhipster.
And in the generator-jhipster-ionic project we can call it easily with the ionic start command

I will do a PR on the generator repo once you have validated my PR on the starter

Note: I didn't create my PR directly on your project because we should not merge it inside

Easy query params for GET requests won't work

From api.ts, following reqOpts.params is immutable and setting a value without reassigning will not work.

    // Support easy query params for GET requests
    if (params) {
      reqOpts.params = new HttpParams();
      for (let k in params) {
        reqOpts.params.set(k, params[k]); // here
      }
    }
    // Support easy query params for GET requests
    if (params) {
      reqOpts.params = new HttpParams();
      for (let k in params) {
         reqOpts.params = reqOpts.params.set(k, params[k]); // corrected here
      }
    }

I am doing a PR for this.

Upgrade to Angular 8

From the Ionic 4.7.2 Release Notes:

With this version comes support for Angular 8! Follow the below steps to update.

Update @ionic/angular and @ionic/angular-toolkit to the latest releases:

$ npm install @ionic/[email protected]
$ npm install @ionic/[email protected] -D

Update @angular/core and @angular/cli:

$ npx ng update @angular/core @angular/cli

Update @angular-devkit dependencies:

$ npm i @angular-devkit/architect@latest @angular-devkit/build-angular@latest @angular-devkit/core@latest @angular-devkit/schematics@latest

View our Angular 8 Update Guide for tips on potential issues!

[npm ERR]Unexpected end of JSON input while parsing near '..."size":326897,"noatta'

I run into npm ERR when run npm install command ,

commands :
ionic start ionic4j oktadeveloper/jhipster
cd ionic4j/
npm i

error:

โœ– Running command - failed!
[ERROR] An error occurred while running npm i (exit code 1):

        
        npm WARN deprecated [email protected]: 1.2.0 should have been a major version bump
        npm ERR! Unexpected end of JSON input while parsing near '..."size":326897,"noatta'

MacBook-Air:ionic4j tony$ npm i
npm WARN deprecated [email protected]: 1.2.0 should have been a major version bump
npm ERR! Unexpected end of JSON input while parsing near '..."size":326897,"noatta'

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/tony/.npm/_logs/2018-06-24T16_04_44_917Z-debug.log


/.npm/_logs/2018-06-24T16_04_44_917Z-debug.log

2301 silly saveTree โ”œโ”€โ”€ [email protected]
2301 silly saveTree โ””โ”€โ”€ [email protected]
2302 verbose stack SyntaxError: Unexpected end of JSON input while parsing near '..."size":326897,"noatta'
2302 verbose stack     at JSON.parse (<anonymous>)
2302 verbose stack     at parseJson (/usr/local/lib/node_modules/npm/node_modules/pacote/node_modules/make-fetch-happen/node_modules/node-fetch-npm/node_modules/json-parse-better-errors/index.js:7:17)
2302 verbose stack     at consumeBody.call.then.buffer (/usr/local/lib/node_modules/npm/node_modules/pacote/node_modules/make-fetch-happen/node_modules/node-fetch-npm/src/body.js:96:50)
2302 verbose stack     at <anonymous>
2302 verbose stack     at process._tickCallback (internal/process/next_tick.js:188:7)
2303 verbose cwd /Users/tony/dev/ionic/ionic4j
2304 verbose Darwin 17.6.0
2305 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "i"
2306 verbose node v8.11.3
2307 verbose npm  v5.6.0
2308 error Unexpected end of JSON input while parsing near '..."size":326897,"noatta'
2309 verbose exit [ 1, true ]

In README.md Tips section add webpack/webpack.dev.js to files containing PORT 8080

webpack/webpack.dev.js change devServer.target property:

    module.exports = webpackMerge(commonConfig({ env: ENV }), {
    devtool: 'eval-source-map',
    devServer: {
        contentBase: './target/www',
        proxy: [{
            context: [
                /* jhipster-needle-add-entity-to-webpack - JHipster will add entity api paths here */
                '/api',
                '/management',
                '/swagger-resources',
                '/v2/api-docs',
                '/h2-console',
                '/auth'
            ],
            target: 'http://127.0.0.1:8080',
...

entity to User JDL

I have this Jdl

entity NmsAlert {
  alertBegin ZonedDateTime,
  alertSent ZonedDateTime,
  alertAnswered ZonedDateTime,
  text String
}

relationship ManyToOne {
    NmsAlert{userAttended} to User, 
}

And It generates
import { User } from '../../../services/user/user.model';
That doesn't exist

============
I replaced with
import { JhiUser } from '../../../../model/jhi-user';

and created this class in src/model

export class JhiUser {
    constructor(
        public id?: number,
        public login?: string,
        public activated?: boolean,
        public authorities?: any[],
        public email?: string,
        public firstName?: string,
        public langKey?: string,
        public lastName?: string,
        public imageUrl?: string,
        public createdBy?: string,
        public createdDate?: Date,
        public lastModifiedBy?: string,
        public lastModifiedDate?: Date,
        public password?: string
    ) 
    {
        this.id = id ? id : null;
        this.login = login ? login : null;
        this.firstName = firstName ? firstName : null;
        this.lastName = lastName ? lastName : null;
        this.email = email ? email : null;
        this.activated = activated ? activated : false;
        this.langKey = langKey ? langKey : 'en';
        this.authorities = authorities ? authorities : null;
        this.createdBy = createdBy ? createdBy : null;
        this.createdDate = createdDate ? createdDate : null;
        this.lastModifiedBy = lastModifiedBy ? lastModifiedBy : null;
        this.lastModifiedDate = lastModifiedDate ? lastModifiedDate : null;
        this.password = password ? password : null;
    }
}

=====

And is working :-)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.