Preparing to deploy new applications

Edit online

Before you can deploy new applications (like devtoolkit_docker/orderhub-code/my-custom-app), you need to indicate which applications to deploy. For example, you can be working on two new applications but you might want to deploy only one.

For deploying customizations for existing applications, see Preparing to deploy customizations for existing applications.

Procedure

  1. Retrieve the Customization folder, Customization client ID, Customization auth key for each of the tenants where you want to deploy the customizations.

    You might need to contact an administrator to get the Customization auth key if the tenants are already configured for customization. For more information, see Enabling the customization menu for a tenant.

  2. Retrieve the Feature JSON value from Order Hub.
    1. Log in to Order Hub.
    2. Switch to the customization tenant where you tested your customizations.
    3. Go to Settings > Customization.
    4. Select the custom menu item that launches the custom application.
    5. If you want to deploy customizations to the customization tenant where you tested your customizations, ensure that you select Hosted by IBM and you clear Local development environment. Otherwise, the tenant will continue to connect to your local server.
    6. In the Relative URL field, add the relative path to your application.
      To find the relative path, complete the following steps:
      1. Open the <custom-module-name>/packages/<module-short-name>-root-config/src/assets/routes.json file.
      2. In the redirects element, find the route that the application redirects to.
      3. Open the <custom-module-name>/packages/<route-name>/src/app/features/<module-short-name>/<module-short-name>-routing.module.ts file.
      4. Find the <path> that the route is pointing to. The default value is home.
      5. The final relative URL is: /<module-name>/<route-name>/<module-short-name>/<path>

      Start with a forward slash (/). You do not need to include a trailing slash. For example, /custom-app/custom-page1/custom/home.

    7. Save all changes.
    8. Copy the JSON from the Feature json field in the UI.
      The JSON from the UI resembles the following sample.
      {
    "featureId": "custom-[Id]", // must be unique
    "state": "ACTIVE",
    "sequence": 0,
    "title": "[Title to display for the custom application]",
    "iconName": "website-20",
    "link": "/[module-name]/[path to new route]",
    "path": "/[path to new route]",
    "hidden": true,
    "allowedRoles": [   //the roles that can access this customization
      "Fulfillment Manager",
      "Tenant Administrator"
    ],
    "description": [
      {
        "locale": "en_US",
        "language": "en",
        "title": "Title to display for the custom feature"
      }
    ],
    "type": "IFRAME"
  }
  3. Open the features.json in the module's root directory.
    For example, devtoolkit_docker/orderhub-code/custom-app/features.json. If the file does not exist, then create the file.
  4. Paste the JSON that you copied from step 2.h as an array element in the features.json file.
    Depending on the contents in the features.json, you might need to surround the code with square brackets [] to add as an array element.
  5. Add build targets for your customizations, depending on the type of repository that you use.
    - If you use an Order Hub monorepo for your customizations:
    1. In each route, for each environment where you want to deploy customizations, add a build target to build your customizations.
      1. Open each route's package.json file. For example, devtoolkit_docker/orderhub-code/custom-app/packages/custom-page1/package.json and devtoolkit_docker/orderhub-code/custom-app/packages/custom-page2/package.json.
      2. Add the following build target command for the environments where you want to deploy the customizations.
        "build-<env>": "yarn build --deploy-url=<customization folder>/<module-name>/<route-name>/",
        The value for <customization folder> is the value that you retrieved from step 1. Each target environment has a different customization folder value.
        For example, if you want to deploy to four environments; dev1, qa3, preprod, and prod, then add the following code.
        "build-dev1": "yarn build --deploy-url=/buc-app-customization/T3R4fagafd45aadfaffasf/custom-app/custom-page1/",
"build-qa3": "yarn build --deploy-url=/buc-app-customization/dbU2K1u4seqrRKwBZTyMp1lUJwqQkJ5A/custom-app/custom-page1/",
"build-preprod": "yarn build --deploy-url=/buc-app-customization/zdD4uxaf8GRTbzMSg8zU2K/custom-app/custom-page1/",
"build-prod": "yarn build --deploy-url=/buc-app-customization/balohTK3ang5GmXsRwOSeSidbQOKEw6N/custom-app/custom-page1/",
    2. Add build targets to the root-config package.json file.
      1. Open the devtoolkit_docker/orderhub-code/<custom-module-name>/<custom-short-name>-root-config/package.json root config folder.
      2. For each environment where you want to deploy customizations, add build targets similar to the following code.
        "build-<env>": "yarn build --env baseHref=<customization folder>/<module-name>/ --env deploy-url=<customization folder>/<module-name>/<route-name>/",
        Where <route-name> is the default route.
        For example, if you want to deploy to four environments; dev1, qa3, preprod, and prod, then add code similar to the following sample:
        "build-dev1": "yarn build --env baseHref=/buc-app-customization/T3R4fagafd45aadfaffasf/custom-app --env deploy-url=/buc-app-customization/T3R4fagafd45aadfaffasf/custom-app/custom-page1/",
"build-qa3": "yarn build --env baseHref=/buc-app-customization/dbU2K1u4seqrRKwBZTyMp1lUJwqQkJ5A/custom-app --env deploy-url=/buc-app-customization/dbU2K1u4seqrRKwBZTyMp1lUJwqQkJ5A/custom-app/custom-page1/",
"build-preprod": "yarn build --env baseHref=/buc-app-customization/zdD4uxaf8GRTbzMSg8zU2K/custom-app --env deploy-url=/buc-app-customization/zdD4uxaf8GRTbzMSg8zU2K/custom-app/custom-page1/",
"build-prod": "yarn build --env baseHref=/buc-app-customization/balohTK3ang5GmXsRwOSeSidbQOKEw6N/custom-app --env deploy-url=/buc-app-customization/balohTK3ang5GmXsRwOSeSidbQOKEw6N/custom-app/custom-page1/",
    3. For each environment where you want to deploy customizations, add a build target in the <module-name>/package.json file.
      1. Open the <custom-module-name>/package.json file. For example, custom-app/package.json.
      2. Make a copy of the build line for each target environment.

        For example, assume that you want to deploy to four environments; dev1, qa3, preprod, and prod. Paste the line four times.

        Replace build with build-<environment> in each copied line. For example:
        "build": "lerna run build --stream", 
"build-dev1": "lerna run build-dev1 --stream", 
"build-qa3": "lerna run build-qa3 --stream", 
"build-preprod": "lerna run build-preprod --stream", 
"build-prod": "lerna run build-prod --stream",

    - If you use an Order Hub basic Angular repo for your customizations:

    For each environment where you want to deploy customizations, add a build target in the <module-name>/package.json file.
    1. Open the <module-name>/package.json file. For example, custom-app/package.json.
    2. Make a copy of the build line for each target environment.

      For example, assume that you want to deploy to four environments; dev1, qa3, preprod, and prod. Paste the line four times.

      Replace build with build-<environment> in each copied line and add --deploy-url=<customization folder>/<module-name>/, where the value for <customization folder> is the value that you retrieved from step 1.

      Each target environment has a different customization folder value. For example:
      
"build": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build --aot --prod",
"build-dev1": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build --aot --prod --deploy-url=/buc-app-customization/T3R4fagafd45aadfaffasf/custom-app/",
"build-qa3": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build --aot --prod --deploy-url=/buc-app-customization/dbU2K1u4seqrRKwBZTyMp1lUJwqQkJ5A/custom-app/",
"build-preprod": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build --aot --prod --deploy-url=/buc-app-customization/zdD4uxaf8GRTbzMSg8zU2K/custom-app/",
"build-prod": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build --aot --prod --deploy-url=/buc-app-customization/balohTK3ang5GmXsRwOSeSidbQOKEw6N/custom-app/",
  6. If you use a CI/CD pipeline to deploy customizations, check in all customization changes to your repository.

What to do next

Deploy customizations.