Creating next-generation Order Hub applications using a monorepo

Using an Angular monorepo strategy uses Lerna to host several applications in a single repository. This setup provides you with the means to reuse the code, share between applications without having to duplicate code or create library repositories and smaller builds per route, which saves you time. The monorepo strategy is used by all IBM® provided Order Hub repositories. This strategy provides you with a clean customization approach where you can customize routes in an existing IBM repository without taking over all unchanged routes.

1. Extract the next-generation Order Hub code. For more information, see Getting started with customizing next-generation Order Hub.
   Note: The version parameter for the om-compose.sh extract-orderhub-code command must be oms to extract the next-generation Order Hub code. The version parameter omoc is not applicable to next-generation Order Hub.
2. Open a console and go to the next-generation Order Hub code directory. The default location is devtoolkit_docker/orderhub-code.
3. To bypass the SSL verification for interactions with registries, set strict-ssl to false by running the following command.

   npm config set "strict-ssl" false

4. Run one of the following commands to reinstall the latest version of @buc/schematics to access the IBM-provided schematics. For Angular v18, run the following command.

npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v4latest.tgz

npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v5latest.tgz

5. Create a folder for your new application. The name of the folder is the module name. In the folder, create an app-config.json file that describes the routes in the module. The value for name must be the module name. See the following example.

{
  "name": "custom-monorepo",
  "devServerConfig": {
      "port": 9300,
      "contextRoot": "/custom-monorepo"
  },
  "prodServerConfig": {
      "hostName": "static.omsbusinessusercontrols.ibm.com"
  },
  "routes": {
      "custom-page1": {
          "devServerConfig": {
              "port": 9301,
              "contextRoot": "/custom-page1"
          }
      },
      "custom-page2": {
          "devServerConfig": {
              "port": 9302,
              "contextRoot": "/custom-page2"
          }
      }
  }
}

6. In the console, go to the folder that you created.
7. Create a workspace and initialize a new Angular application by running the following command.

ng new --collection=@buc/schematics \
--app-config-json=<app-config.json-file-name> \
--module-short-name=<short-name-for-the-module> \
--prefix=<selector-prefix> \
--mode=on-prem

--skip-git

This option does not initialize a GitHub repository. The default is false.

--commit

This option includes the initial GitHub repository commit information. The default is true.

--app-config-json

This option is required. Use the app-config.json file that you created in step 5.

--module-short-name

The short name for the module. If the module name has dashes, then the short name must be the text after the last dash. For example, if the module name is buc-app-settings, the module short name must be settings.

Note: The root-config package is generated based on the module-short-name. Do not rename or add a prefix to the module-short-name or you will not be able to deploy the customizations.

--prefix

The HTML selector to use for generated components. The default is buc.

--shared-library-name

The name of the shared library. The default name is <module-short-name>-shared. The package name is @<prefix>/<module-short-name>-shared.

--generate-root-config

Indicates whether to generate a root-config router project. The default is true.

--skip-install

Indicates whether to install packages. The default is false.

--mode

Set this option to on-prem to generate code that is applicable for next-generation Order Hub.

See the following example.

ng new --collection=@buc/schematics  --app-config-json=app-config.json
      --module-short-name=monorepo  --prefix=monorepo --mode=on-prem

Error: Failed to compile entry-point @carbon/icons-angular/

8. If next-generation Order Hub containers are not currently running, go to the devtoolkit_docker/compose directory and run the following command.

./om-compose.sh start orderhub

9. Create the local development version of the features.json file. For more information, see Creating the features.json files.
10. To test your new application locally, copy the features.json file into the om-orderhub-base container by running the following commands.

docker exec om-orderhub-base bash -c 'mkdir -p /opt/app-root/src/shell-ui/assets/custom'

docker cp <orderhub-code>/shell-ui/assets/dev/. om-orderhub-base:/opt/app-root/src/shell-ui/assets/custom/

11. Start the server by entering the following command.

yarn start-app

"** Angular Live Development Server is listening on localhost:<port>, 
open your browser on https://localhost:<port>/<module>/<route> **"

Error command failed with exist code 134.
lerna ERR! yarn run start .... exited 134

12. To accept the self-signed certificate in the web browser, in a browser, open a tab to https://localhost:9300 and accept the certificate. The port 9300 is the value that is used in devServerConfig in the app-config.json file.

13. Start next-generation Order Hub by opening a tab in a browser to https://localhost:7443/order-management.
    Note: The default port is 7443. If you set the OH_BASE_HTTPS_PORT property in the devtoolkit_docker/compose/om-compose.properties file, use that port number.
14. Click your new menu item in the left menu navigation.