Is there a way to use different environment profiles for development and production setting for Cordova app based on Ionic Framework

Say like we have in Spring Framework a lot of variations to set compile/run/test time environment, and use it to bind a different properties files with settings. It is made for us not to change anything except this one environment/profile variable to be able to have proper settings for app.

More particularly:

I have two files: settings.dev.js and settings.prod.js

settings.prod.js:

var API_PATH = "http://example.com/api
var OTHER_INPORTANT_SETTINGS = {....}

settings.dev.js:

var API_PATH = "http://localhost.com/api
var OTHER_INPORTANT_SETTINGS = {....}

and an Ionic Framework app where services are using this settings. E.g.

me: $resource(API_PATH + '/my/profile', {}, {...}

And so on in many services and controllers and maybe directives...

Is there some way to use

  • settings.dev.js while in development and
  • settings.prod.js for deployment a release app.

As one of the approaches you can use Grunt.

grunt.registerTask('dev', ['processhtml:dev']);
grunt.registerTask('default', ['processhtml:prod', ...]);

In html:

<!-- build:remove:dev -->
<script src="/your/path/settings.prod.js"></script>
<!-- /build -->

<!-- build:remove:prod -->
<script src="/your/path/settings.dev.js"></script>
<!-- /build -->

It means that <script src="/your/path/settings.prod.js"></script> will be removed for dev, and <script src="/your/path/settings.dev.js"></script> will be removed for prod.

Now to build a production environment use grunt command, and to build a development env. use grunt dev.

And one more thing, you can use grunt-contrib-watch to automate dev builds:

watch: {
    html: {
        files: ['www/*.html'],
        tasks: ['dev']
    }
}

Hope it will help someone.

I just develop a solution for the issue.

  1. Create a grunt task (or the equivalent build tools) to copy the settings.<env>.js file to settings.js file.

    copy: {
  dev: {
    src: 'settings.dev.js',
    dest: 'settings.js'
  },
  prod: {
    src: 'settings.prod.js',
    dest: 'settings.js'
  }
},

grunt.registerTask('dev', [
  'copy:development'
]);


grunt.registerTask('prod', [
  'copy:prod'
]);

  2. Include settings.js in your html or js file.

  3. Add settings.js to your .gitignore file so that your environment specific file won't affect others.

For loading config files you can just ad script tag with the script URL in the HTML.

<script src="/your/path/settings.prod.js"></script>

or

<script src="/your/path/settings.dev.js"></script>

Then you can defined variables as usual.