Creating and Managing Build Variants in DevEco Studio Projects

#harmonyos #buildvariants #environmentconfiguration #devecostudio

Read the original article：Creating and Managing Build Variants in DevEco Studio Projects

Requirement Description

How can we implement different build variants in a HarmonyOS application with different configurations.

Background Knowledge

Build variants allow developers to create different versions of an app with configurations for various environments (For example: development, staging, production). This is achieved through build profile configurations that define environment-specific variables.

Implementation Steps

1. Configure project-level build-profile.json5 to define available modules and targets.

"modules": [
    {
      "name": "entry",
      "srcPath": "./entry",
      "targets": [
        {
          "name": "dev",
          "applyToProducts": [
            "default"
          ]
        },
        {
          "name": "staging",
          "applyToProducts": [
            "default"
          ]
        },
        {
          "name": "production",
          "applyToProducts": [
            "default"
          ]
        }
      ]
    }
  ]

2. Configure module-level build-profile.json5 to specify environment-specific variables.

"targets": [
    {
      "name": "dev",
      "config": {
        "buildOption": {
          "arkOptions": {
            "buildProfileFields": {
              "VARIANT_NAME": "dev",
              "BG_COLOR": "#e3f2fd",
              "APP_TITLE": "Development"
            }
          }
        }
      }
    },
    {
      "name": "staging",
      "config": {
        "buildOption": {
          "arkOptions": {
            "buildProfileFields": {
              "VARIANT_NAME": "staging",
              "BG_COLOR": "#fff9c4",
              "APP_TITLE": "Staging"
            }
          }
        }
      }
    },
    {
      "name": "production",
      "config": {
        "buildOption": {
          "arkOptions": {
            "buildProfileFields": {
              "VARIANT_NAME": "prod",
              "BG_COLOR": "#c8e6c9",
              "APP_TITLE": "Production"
            }
          }
        }
      }
    }
  ]

3. Clean the project and generate build profiles.

4. Access these variables in the code using the BuildProfile object.

import BuildProfile from 'BuildProfile';

@Entry
@Component
struct Index {
  @State message: string = BuildProfile.APP_TITLE.toString();
  @State color: string = BuildProfile.BG_COLOR.toString();

  build() {
    Column() {
      Text(`Build Variant: ${this.message}`)
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.Black)
    }
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
    .backgroundColor(this.color)
  }
}

You can have different implementations for each profile, either through direct usage of BuildProfile variables or build different components based on the build variant.

5. Switch between different targets.

Code Snippet

Complete codes are below;

Project level build-profile.json5;

{
  "app": {
    "signingConfigs": [],
    "products": [
      {
        "name": "default",
        "signingConfig": "default",
        "targetSdkVersion": "5.1.0(18)",
        "compatibleSdkVersion": "5.1.0(18)",
        "runtimeOS": "HarmonyOS",
        "buildOption": {
          "strictMode": {
            "caseSensitiveCheck": true,
            "useNormalizedOHMUrl": true
          }
        }
      }
    ],
    "buildModeSet": [
      {
        "name": "debug",
      },
      {
        "name": "release"
      }
    ]
  },
  "modules": [
    {
      "name": "entry",
      "srcPath": "./entry",
      "targets": [
        {
          "name": "dev",
          "applyToProducts": [
            "default"
          ]
        },
        {
          "name": "staging",
          "applyToProducts": [
            "default"
          ]
        },
        {
          "name": "production",
          "applyToProducts": [
            "default"
          ]
        }
      ]
    }
  ]
}

Module level build-profile.json5;

{
  "apiType": "stageMode",
  "buildOption": {
  },
  "buildOptionSet": [
    {
      "name": "release",
      "arkOptions": {
        "obfuscation": {
          "ruleOptions": {
            "enable": false,
            "files": [
              "./obfuscation-rules.txt"
            ]
          }
        }
      }
    },
  ],
  "targets": [
    {
      "name": "dev",
      "config": {
        "buildOption": {
          "arkOptions": {
            "buildProfileFields": {
              "VARIANT_NAME": "dev",
              "BG_COLOR": "#e3f2fd",
              "APP_TITLE": "Development"
            }
          }
        }
      }
    },
    {
      "name": "staging",
      "config": {
        "buildOption": {
          "arkOptions": {
            "buildProfileFields": {
              "VARIANT_NAME": "staging",
              "BG_COLOR": "#fff9c4",
              "APP_TITLE": "Staging"
            }
          }
        }
      }
    },
    {
      "name": "production",
      "config": {
        "buildOption": {
          "arkOptions": {
            "buildProfileFields": {
              "VARIANT_NAME": "prod",
              "BG_COLOR": "#c8e6c9",
              "APP_TITLE": "Production"
            }
          }
        }
      }
    }
  ]
}

Index.ets;

import BuildProfile from 'BuildProfile';

@Entry
@Component
struct Index {
  @State message: string = BuildProfile.APP_TITLE.toString();
  @State color: string = BuildProfile.BG_COLOR.toString();

  build() {
    Column() {
      Text(`Build Variant: ${this.message}`)
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.Black)
    }
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
    .backgroundColor(this.color)
  }
}