How to organize your ADF app.config for multiple environments

cancel
Showing results for 
Search instead for 
Did you mean: 

How to organize your ADF app.config for multiple environments

eugenio_romano
Alfresco Employee
2 3 5,310

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

3 Comments
jigir_shah
Active Member

Hi @eugenio_romano 


Can you please share updated steps for ADF v3.8 onwards? For me, ng build --app is throwing error as --app unkown option.

Would you please share how to setup multiple environment's app.config file wrt to Latest version?

sanjaybandhniya
Intermediate

Please share updated steps for v3.x.

abbask01
Senior Member

from Angular 6 aand above the angular-cli.json config has been moved to angular.json.

For newer versions of ADF, try the following steps:

  1.  Create a new config file (copy the original) name it: app.config.dev.json
  2. In angular.json add configuration for dev, under projects > app > build > configurations create object
    "dev": {
        "fileReplacements": [
            {
                "replace": "src/app.config.json",
                "with": "src/app.config.dev.json"
            }
        ]
    }
  3. and for serve. add below under projects > app > serve > configurations
    "dev": {
        "browserTarget": "app:build:dev"
    }
  4. In package.json under script add the below snippet
    "start:dev": "npm run validate-config-dev && ng serve -c dev --open",
  5. Notice i've changed the valildate-config too, add script for validate-config-dev to validate our app.config.dev.json

    "validate-config-dev": "ajv validate -s ./node_modules/@alfresco/adf-core/app.config.schema.json -d ./src/app.config.dev.json --errors=text --verbose"

     

  6. once done with the change run the following command in the project root
npm run start:dev

 

Hope it helps.