How To
Summary
How create an Order Hub monorepo and angular repo?
Objective
To create OrderHub Monorepo and Angularrepo.
Steps
(A) Creating an Order Hub monorepo:
(1) Make sure that you extracted the Order Hub code.
(2) Open a terminal and go to the Order Hub code directory.
- For containers, the default location is devtoolkit_docker/orderhub-code.
- For traditional, the location is the directory where the on-prem-source.tar file was extracted.
(3) Run the following command to set strict-ssl to false.
npm config set "strict-ssl" false
(4) Run the following command to reinstall the latest version of @buc/schematics to access the IBM-provided schematics.
npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v4latest.tgz
(5) Create a folder for your 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. For 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"
}
}
}
}
"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 terminal, go to the folder that you created.
(7) Run 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
For example:
ng new --collection=@buc/schematics --app-config-json=app-config.json --module-short-name=monorepo --prefix=monorepo --mode=on-prem
After the command completes, a success message appears: "Packages installed successfully."
Do a yarn start-app to see the actual changes:
export NODE_OPTIONS=--max_old_space_size=8048yarn start-app
(B) Create the local development server version of the features.json file.
(1) Create the following directory structure under orderhub-code directory.
mkdir -p <order_hub_code_directory>/shell-ui/assets/dev
(2) Create a features.json file under shell-ui/assets/dev directory. This file contains an array of features each representing a menu option in the shell's left navigation bar. Each feature is defined by the following properties.
Here is the sample features.json file:
[
{
"id": "monorepo",
"title": "Custom Mono Repo",
"icon": "programs-30",
"iconForRailStateOnly": true,
"navigation" : {
"route" : {
"link": "https://localhost:9300/custom-monorepo",
"path": "/monorepo"
}
},
"type": "IFRAME"
},
{
"id": "angularrepo",
"title": "Custom Angular Repo",
"icon": "tool-30",
"navigation" : {
"route" : {
"link": "https://localhost:4000/custom-angularrepo",
"path": "/angularrepo"
}
},
"enablementCondition": {
"byResourceId": "BUCWSP"
},
"type": "IFRAME"
}
]
(3) Run the following commands to copy the file into the base container.
For containers:
For containers:
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/
For Traditional setup:
Copy the features.json file to the nginx html directory.
If nginx is running locally where the user interface is accessed with localhost, use the following path.
If nginx is running locally where the user interface is accessed with localhost, use the following path.
<html directory>/orderhub/shell-ui/assets/custom/features.json
If nginx is running remotely where the user interface is accessed with a domain URL, use the following path.
<html directory>/ext/orderhub/shell-ui/assets/features.json
Review the following considerations when you are running Order Hub:
(A) For containers: If Order Hub containers are not currently running, go to the devtoolkit_docker/compose directory and run:
./om-compose.sh start orderhub
(B) 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.
(C) In a browser, open a tab to https://localhost:7443/order-management.
Where the port (7443) is:
(C) In a browser, open a tab to https://localhost:7443/order-management.
Where the port (7443) is:
For containers: The default port is 7443 unless you set the OH_BASE_HTTPS_PORT property in the devtoolkit_docker/compose/om-compose.properties file.
For traditional: Use the port number that is configured in the web server configuration.
For traditional: Use the port number that is configured in the web server configuration.
(D) Click your menu item in the left-hand menu navigation.
Creating an Order Hub basic Angular repo
(1) Make sure that you extracted the Order Hub code. For more information, see Getting started with customizing.
(2) Open a terminal and go to the Order Hub code directory.
For containers, the default location is devtoolkit_docker/orderhub-code.
For traditional, the location is the directory where the on-prem-source.tar file was extracted.
For traditional, the location is the directory where the on-prem-source.tar file was extracted.
(3) Run the following command to set strict-ssl to false.
npm config set "strict-ssl" false
(4) Run the following command to reinstall the latest version of @buc/schematics to access the IBM-provided schematics.
npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v4latest.tgz
(5) Create a folder for your application. The name of the folder will be the module name. In the folder, run the following command. The value for --module-name must be the module name.
ng new --collection=@buc/schematics \
--module-name=<name-of-the-module> \
--module-short-name=<the-short-name-for-the-module> \
--prefix=<selector-prefix> \
--mode=on-prem
(6) For example:
ng new --collection=@buc/schematics --module-name=custom-angularrepo --module-short-name=angularrepo --prefix=angularrepo --mode=on-prem
(7) Start the server.
yarn start --host=localhost
(8) Create the local development server version of the features.json file. (Refer to (B) Create the local development server version of the features.json file. in the previous section)
Run the following commands to copy the file into the base container.
For containers:
Run the following commands to copy the file into the base container.
For containers:
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/
For traditional:
Copy the features.json file to the nginx html directory.
If nginx is running locally where the user interface is accessed with localhost, use the following path.
If nginx is running locally where the user interface is accessed with localhost, use the following path.
<html directory>/orderhub/shell-ui/assets/custom/features.json
If nginx is running remotely where the user interface is accessed with a domain URL, use the following path.
<html directory>/ext/orderhub/shell-ui/assets/features.json
(9) Update the src/app/app.component.html file and add some text to display in your application. For example, to add Hello, World!, use the following code:
<div class="app-root-custom-angularrepo">
<div class="app-region-body">
<div class="app-body-content" *ngIf="isBucTenantChangeSuccess || isBucJwtRefreshSuccess">
<router-outlet></router-outlet>
</div>
<div *ngIf="isInitialState" class="app-loading">
<div ibmCol>
<buc-loading [isActive]="isInitialState"></buc-loading>
</div>
</div>Hello World!</div>
</div>
(10) Review the following considerations when you run Order Hub:
(A) For containers: If Order Hub containers are not currently running, go to the devtoolkit_docker/compose directory and run:
./om-compose.sh start orderhub
(B) In a browser, open a tab to https://localhost:4000 and accept the certificate. The port (4000) is the value that is configured for the --port parameter in the package.json file.
(C) In a browser, open a tab to https://localhost:7443/order-management.
Where the port (7443) is:
(C) In a browser, open a tab to https://localhost:7443/order-management.
Where the port (7443) is:
For containers: The default port is 7443 unless you set the OH_BASE_HTTPS_PORT property in the devtoolkit_docker/compose/om-compose.properties file.
For traditional: Use the port number that is configured in the web server configuration.
For traditional: Use the port number that is configured in the web server configuration.
(D) Click your menu item in the left menu navigation.
Related Information
Document Location
Worldwide
[{"Type":"MASTER","Line of Business":{"code":"LOB77","label":"Automation Platform"},"Business Unit":{"code":"BU048","label":"IBM Software"},"Product":{"code":"SS6PEW","label":"IBM Sterling Order Management"},"ARM Category":[{"code":"a8m0z000000cy05AAA","label":"OrderHub"}],"ARM Case Number":"TS017959269","Platform":[{"code":"PF025","label":"Platform Independent"}],"Version":"All Versions"}]
Product Synonym
oms; IBM Sterling Order Management; IBM Sterling Order Management System;
Was this topic helpful?
Document Information
Modified date:
12 March 2025
UID
ibm17185534