jhipster / generator-jhipster-ionic

Ionic for JHipster ✨
https://developer.okta.com/blog/2022/05/12/ionic-angular-jhipster
Apache License 2.0
193 stars 50 forks source link

Where to put the prod SERVER API URL #468

Closed wurst44 closed 3 years ago

wurst44 commented 3 years ago

hi @mraible I am not quite sure were to put the prod SERVER API URL. I dont want to debug the APK, and the compiled assets throw cors error while debugging locally. the hipster UI shows, but when trying to login it fails. as soon as I click login admin:admin the APK should make the request to http://server.com:80/api but wireshark shows me that no request to the internet is beeing made.

My server has cors enabled:

jhipster:
    cors:
        allowed-origins: "*"
        allowed-methods: "*"
        allowed-headers: "*"
        exposed-headers: "Authorization"
        allow-credentials: true
        max-age: 1800

I tried to change:

src/environments/environment.prod.ts:
export const environment = {
  production: true,
  apiUrl: 'http://myserver.com:80/api',
};

and:

ionic.config.json:
"proxies": [
        {
            "path": "/api",
            "proxyUrl": "http://myserver.com:80/api"
        }
    ]

when running server on localhost it works. any hints?

thx

mraible commented 3 years ago

Did you run the adb commands?

From the README:

You'll need to run a couple commands to allow the emulator to communicate with your API and Keycloak.

adb reverse tcp:8080 tcp:8080 adb reverse tcp:9080 tcp:9080

On Mar 20, 2021, at 18:17, Peter @.***> wrote:

 hi @mraible I am not quite sure were to put the prod SERVER API URL. I dont want to debug the APK, and the compiled assets throw cors error while debugging locally. the hipster UI shows, but when trying to login it fails. as soon as I click login admin:admin the APK should make the request to http://server.com:80/api but wireshark shows me that no request to the internet is beeing made.

My server has cors enabled:

jhipster: cors: allowed-origins: "" allowed-methods: "" allowed-headers: "*" exposed-headers: "Authorization" allow-credentials: true max-age: 1800 I tried to change:

src/environments/environment.prod.ts: export const environment = { production: true, apiUrl: 'http://myserver.com:80/api', }; and:

ionic.config.json: "proxies": [ { "path": "/api", "proxyUrl": "myserver:80/api" } ]

any hints?

thx

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

wurst44 commented 3 years ago

I am in production, no forwarding, no adb, just APK to SERVER API. my goal is to not even start Android Studio... I am in a GitLab Pipeline and I dont use SSO for now.

I got it: :dancers: :sparkles: :D

export SERVER_API_URL=http://server.com:80/api
ionic capacitor add android;
ionic capacitor copy android; 
cd android;
sed -i -e "s|http:\/\/localhost:8080\/api|$SERVER_API_URL|g" ionic4j/android/app/src/main/assets/public/main.js;
./gradlew assembleDebug; 

APK login and entities page WORK. Same is planed for iOS but I need a macOS runner with xcode ^^

setting ENV (SERVER_API_URL) alone and modifiying the URL inside those files does NOT seem to work:

export SERVER_API_URL=http://server.com:80/api

webpack/webpack.custom.js
ionic.config.json
src/environments/environment.prod.ts
src/environments/environment.ts
www/main.js;

my question would be how to set the SERVER API URL correctly (jhipster/angular?), without doing it the hacky way? and, should there be anything on the "Account" tab?

mraible commented 3 years ago

You might be able to set SERVER_API_URL with environment variables if you change environments to have something like the following:

export const environment = {
  production: false,
  apiUrl: process.env.SERVER_API_URL ?? 'http://localhost:8080/api'
};

Yes, the account tab is empty. See https://github.com/oktadeveloper/generator-jhipster-ionic/issues/389 for more information.

wurst44 commented 3 years ago

setting env SERVER_API_URL seems not to work. And I tried setting enviroment.ts before, gave up...

well, also my above change does not work anymore...

I need to set the URL in capacitor.config.json only now:

"server": {
  "url": "https://hipster.test.de"
}

also there seems to be some major change, so that the hipster ui is fully integrated now (all tabs, etc)? (which seems great! :+1: )

all breaking changes, I tag my base-build-images now ^^ guess I am using generator-jhipster-ionic 6.1.1 now. do you have a releases page?

mraible commented 3 years ago

Releases page is at https://github.com/oktadeveloper/generator-jhipster-ionic/releases.

mraible commented 3 years ago

also there seems to be some major change, so that the hipster ui is fully integrated now (all tabs, etc)?

I'm not sure what you mean. I haven't made any drastic changes recently.

wurst44 commented 3 years ago

sry, because of dependency issues with jhipster 7 I was switching back and forth between JHG 6.10.3 / 6.10.5 / 7 and I think I have the same issue as this guy with 7: "This generator (generator-jhipster-ionic) requires yeoman-environment at least 3.0.0, current version is 2.10.3," https://github.com/merlinofcha0s/generator-jhipster-flutter/issues/51

I think some JH version doese'nt respect JDL config skip client so it renderd the whole jh-client into www, which is not using ionic componentes at all :P

thanks for your support

mraible commented 3 years ago

The Flutter module is a bit different from this one. That module requires you to create a Flutter app inside your JHipster project.

This module, and the React Native blueprint, expect you to generate your app at the same level as JHipster. For example:

- parent directory
  - jhipster-app
  - ionic-app

I documented this in the README, but maybe it can be improved?

mraible commented 3 years ago

Closing due to lack of response.

wurst44 commented 3 years ago

Dono what went wrong but setting src/environments/environment.ts seems to work now