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

Question

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

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.

Answer 1

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.

Answer 2

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.

Answer 3

I used this package and it works great:

https://www.npmjs.com/package/gulp-ng-config

As long as you have a task that runs before your minify/browserify/etc, you can have it included into your single compiled JS file.

Answer 4

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.