Clever Geek Handbook

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

Let's say that we have a lot of variations in the Spring Framework to set up a compile / run / test environment and use it to bind different properties files with settings. This is to ensure that we don't change anything other than that one environment / profile variable to have the correct settings for the application.

In particular:

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 application where services use those settings. For example.

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

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

Can I use

  • settings.dev.js during development and
  • settings.prod.js to deploy the app for release.
+3


source to share


4 answers


I just worked out a solution to the problem.



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

    to file settings.js

    .

    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'
]);

  • Include settings.js

    in your html or js file.

  • Add settings.js

    to your file .gitignore

    so that your environment specific file won't affect others.

+5


source


You can use Grunt as one approach .

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

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

will be deleted for dev

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

will be deleted for prod

.



Now use command to create production environment grunt

and also to create development env. use grunt dev

.

One more thing, you can use grunt-contrib-watch to automate the dev build:

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

Hope this helps someone.

+3


source


I have used this package and it works great:

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

As long as you have the task running before your minify / browsify / etc, you can include it in a single compiled JS file.

+1


source


To load config files, you can simply use the script tag with the script url in HTML.

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

or

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

Then you can define the variables as usual.

0


source






More articles:


All Articles