Creating new applications

Use one of the IBM-provided Angular schematics to generate a new application and then access the application within Order Hub from a new menu item.

Order Hub menu with a new menu item that says "Custom page" which can point to your new application

When you create an application with the schematics, the resulting application is automatically configured to include the libraries that are used by Order Hub to communicate with various services, such as:

The Sterling Order Management System Software system backend
Sterling Intelligent Promising Inventory Visibility tenants
Other micro service tenants
Carbon UI libraries to design pages to have the same look and feel as existing pages in Order Hub.

You can use the scripts to generate one of the following Angular repositories:

An Angular monorepo, similar to how all the Order Hub code is orchestrated.
A basic Angular repository.

Creating an Order Hub monorepo

This schematic creates a new monorepo by using Lerna and Single-Spa.

Make sure that you extracted the Order Hub code. For more information, see Getting started with customizing.
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.
Run the following command to set strict-ssl to false.
```
npm config set "strict-ssl" false
```
Run one of the following commands to reinstall the latest version of @buc/schematics to access the IBM-provided schematics. For Angular v15, run the following command.
```
npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v3latest.tgz
```
For Angular v18, run the following command.
```
npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v4latest.tgz
```

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"
          }
      }
  }
}

In the terminal, go to the folder that you created.
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
```
The schematic supports the following options.
- --skip-git: Do not initialize a GitHub repository. Default false.
- --commit: Initial git repository commit information. Default 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. Default: 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. Default true.
- --skip-install: Indicates whether to install packages. Default false.
- --mode: Set to on-prem to generate code applicable for OMS 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."
Note: If you encounter an error that is similar to the followeding message, you can safely ignore the error. These errors do not affect the icons that are used by Order Hub.
```
Error: Failed to compile entry-point @carbon/icons-angular/
```
Start the server.
```
yarn start-app
```
Note: You see the following message.
```
"** Angular Live Development Server is listening on localhost:<port>, 
open your browser on https://localhost:<port>/<module>/<route> **"
```
You can ignore this message.
Note: If you encounter an error similar to the following message, increase the heap size before you start the new application.
```
Error command failed with exist code 134.
lerna ERR! yarn run start .... exited 134
```
Run the following command and then start the new application.
- Windows CMD prompt:
```
SET NODE_OPTIONS=--max_old_space_size=8048
```
- Bash/Git Bash:
```
export NODE_OPTIONS=--max_old_space_size=8048
```
- Powershell:
```
$Env:NODE_OPTIONS=--max_old_space_size=8048
```
Note: If you need to stop the server, stop the server job and run the yarn stop-app command to verify that everything is stopped properly.
Create the local development server version of the features.json file.
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.
```
<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:
1. For containers: If Order Hub containers are not currently running, go to the devtoolkit_docker/compose directory and run:
```
./om-compose.sh start orderhub
```
2. 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.
3. 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.
4. Click your menu item in the left-hand menu navigation.

Creating an Order Hub basic Angular repo

Make sure that you extracted the Order Hub code. For more information, see Getting started with customizing.
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.
Run the following command to set strict-ssl to false.
```
npm config set "strict-ssl" false
```
Run one of the following commands to reinstall the latest version of @buc/schematics to access the IBM-provided schematics. For Angular v15, run the following command.
```
npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v3latest.tgz
```
For Angular v18, run the following command.
```
npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v4latest.tgz
```
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
```
The following options are supported by the schematic.
- --skip-git: Do not initialize a git repository. Default false.
- --commit: Initial GitHub repository commit information. Default true.
- --module-name: Required. The name of the module. For example, buc-app-settings.
- --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.
- --prefix: The HTML selector to use for generated components. Default: buc
- --mode: Set to on-prem to generate code applicable for OMS on-prem.
For example:
```
ng new --collection=@buc/schematics  --module-name=custom-angularrepo
      --module-short-name=angularrepo  --prefix=angularrepo --mode=on-prem
```
Note: If you encounter an error similar to the following message, then you can safely ignore the error. These errors do not affect the icons that are used by Order Hub.
```
Error: Failed to compile entry-point @carbon/icons-angular/
```
Start the server.
```
yarn start --host=localhost
```
Note:
- You see a message:
```
"** Angular Live Development Server is listening on localhost:<port>, 
open your browser on https://localhost:<port>/<module>/<route> **"
```
  You can ignore this message. Follow the considerations step for creating new applications to view your customization in Order Hub.
Create the local development server version of the features.json file.
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.
```
<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
```

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>

Review the following considerations when you run Order Hub:
1. For containers: If Order Hub containers are not currently running, go to the devtoolkit_docker/compose directory and run:
```
./om-compose.sh start orderhub
```
2. 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.
3. 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.
4. Click your menu item in the left menu navigation.