How to organize your ADF app.config for multiple environments

[eugenio_romano]

You are developing an ADF app but you notice that you need a different configuration for different environments.

You have many environments including development, master, production but they all depend on your  app.config.json. Each time you switch environment may you have to change or copy a different app.config.json. 

Why do you need to do that? The problem is that ADF requires that the name of your configuration file has always to be app.config.json.

Yes is my problem!!! how to make it works in multiple environments?

1. Let's create in our app folder two files with different configurations for your environments: 
   •  app.config_dev.json (development environment)
   •  app.config_dist.json (distribution environment)
2. Let's change the .angular-cli.json to move in your build the right configuration file 

    "apps": [
    {
    "name": "dist",
    "root": "src",
    "outDir": "dist",
    "assets": [
      ....
      {
       "glob": "app.config_dist.json",
       "input": "../src/",
       "output": "app.config.json"
      }, 
      ....
    }
    {
    "name": "dev",
    "root": "src",
    "outDir": "dist",
    "assets": [
      ....
     {
      "glob": "app.config_dev.json",
      "input": "../src/",
      "output": "app.config.json"
     }, 
     ....
   }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
   ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
   
   

   Notice that in the assets array is already present an app.config.json reference you should remove it. I used this conf on my machine it works

3. Modify your package.json and add in the scripts section:

     "scripts": {
       "ng": "ng",
       "start": "ng serve --open --app dist",
       "start:dev": "ng serve --open --app dev",
       "build": "ng build --app dist",
       "build:dev": "ng build --app dev",
       "test": "ng test",
       "lint": "ng lint",
       "e2e": "ng e2e"
     }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

After this change what you need to do is run the command:

• npm run start:dev or npm run build:dev to use the app.config_dev.json
• npm run start or npm run build to use the app.config_dist.json

You can find more documentation about how to set up the angular cli here: https://github.com/angular/angular-cli/wiki