Make app-debug.apk use production API URL

Ionic Framework ionic-v3
1

Hi all,

I developed a WebService at localhost which is working fine and it is responding on http://localhost/my-web-service/api. So I decided to put it in production to my website (let’s say https://www.mywebsite.com/my-web-service/api).

Now, I would like to test the production api URL installing also the apk to my Android device.

So, in order to build the app, I did “ionic cordova build android” to produce app-debug.apk in the output directory.

The only issue is that I am not able to make this app to point to the production URL.

I’ve read tons of guides and howto on Internet, but still unable to get it working. The only guide that drives me almost to the target is this.

I have also read this one, but still not able to achieve my target.

Basically I would need something like this:

2

It’s been a while though. Were you able to resolve this? I am hitting my head agains walls with exact same problem. Let me know. Thanks.

3

Hi,

it’s been a long time I don’t touch this code, but for what I can see, I created a new directory (i.e. src/environments/) where I put the following three files:
environment.interface.ts:

export interface Environment {
	DEBUG : boolean;
	API_URL : string;
	WS_URL : string;
	BASE_URL : string;
}

environment.prod.ts:

import { Environment } from './environment.interface';

export const ENV: Environment = {
    DEBUG : false,
    API_URL : 'https://www.mywebsite.com/my-web-service/api',
    WS_URL : '',
    BASE_URL : ''
};

environment.ts:

import { Environment } from './environment.interface';

export const ENV: Environment = {
    DEBUG : true,
    API_URL : 'http://localhost/my-web-service/api',
    WS_URL : '',
    BASE_URL : ''
};

After that, I have put environments/environment into tsconfig.json file (compilerOptions section):

{
  "compilerOptions": {
      "allowSyntheticDefaultImports": true,
      "declaration": false,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "lib": [
        "dom",
        "es2015"
      ],
      "module": "es2015",
      "moduleResolution": "node",
      "sourceMap": true,
      "target": "es5",
      "baseUrl" : "./src",
      "paths" : {
        "@app/env" : [
          "environments/environment"
        ]
      }
    },
    "include": [
      "src/**/*.ts"
    ],
    "exclude": [
      "node_modules"
    ],
    "compileOnSave": false,
    "atom": {
      "rewriteTsconfig": false
  }
}

This should do the trick.

4

Hi,
Thank you so much for taking the pain of replying.

It did do the trick. Precise and clear!

It was so frustrating as there’s no straightforward documentation to achieve it. I had been ready with the app 15 days back and still struggled to put this final piece together. All I needed to know was where the configuration was to be handled and how.

I got it working finally. What a relief!

Once again. Thank you. Appreciate it so much!

1 Like