How to create configuration for development and production builds

Hey there,

Within an Ionic 2 app, is it possible to provide a configuration file that can be injected into my application with difference values for a development vs a production build?

AKA, within a component I could have:

import { Component } from '@angular/core';
import { CustomConfig } from 'ionic-angular';

@Component({
  selector: 'my-component',
  templateUrl: 'my-component.html'
})
export class MyComponent {

  constructor(
    private config: CustomConfig
  ) {
    console.log(this.config.databaseUrl);
  }

}

And my custom config file could be something down the lines of:

{
  $development: {
    databaseUrl: 'http://localhost:4567'
  },
  $production: {
    databaseUrl: 'https://my.database.com'
  }
}

Then when I’m developing with ionic serve it would use the $development configuration and when building with ionic build ios --prod it would use the $production configuration.

Is this built in by default?

1 Like

there is nothing build in like this, yet.

Follow up this discussion - there are some workarounds mentioned

This may work for you. I check value of window.location.hostname

If its localhost - that generally means its dev… haven’t tested apps via cordova though, but good enough for Ionic Dec dev (e.g. ionic serve) vs public websevers