Application environment configuration

ionic-v1
1

Is there an accepted pattern for configuring an ionic app’s environment config for development, staging, etc?

{
  development: {
    host:  "localhost:3000"
  },
  staging: {
    host: "staging.myapp.com"
  }
}

Do we take advantage of gulpfile.js and use something like gulp-replace?

2 Likes
2

I currently rather lamely just replace it when I’m building… I should use my Grunt process to replace it.

You may want to see what this guy is doing : Yeoman Generator - New Name

Welcome former(?) Sencha-er. I remember you from the Sencha forums.

3

Hello, has anyone found a good way to setup dev/prod configurations with gulp?

4

I am curious if there is any more current practices here. A solution along the lines of what the OP is asking for is here: http://geekindulgence.com/environment-variables-in-angularjs-and-ionic/.

However, I don’t like rewriting source. Not the end of the world but seems like too much machinery, IMO.

I also don’t think detecting the platform is sufficient, since there might be (or in our case will be) a staging env as well as production.

My thoughts are to do something like this:

  • Introduce a new file that “stamps” the current environment. Specifically I am thinking of a 1-line file that holds a global JS var like: env = ‘development’; The Git repo would have the default development version.
  • Add a build script that knows how to set up the environment, while hiding the implementation so that the process can stay consistent even if we change the impl. E.g. gulp build_env staging
  • Include the stamp file in index.html
  • Create angular constants for environment-based properties, set up conditionally based on the value of the env variable. Note if dynamic loading of JS like Require.js is in place, then one can conditionally require a different version of the constants source file.