Adding new routes to existing applications

You can customize applications by adding new routes to the applications. You use the schematics command to create the packages for each route and update the files within the application.

Procedure

Open a terminal and go to the Order Hub code directory.
- For on-premises container customers, the default location is devtoolkit_docker/orderhub-code.
- For on-premises traditional customers, this directory is the directory where the on-prem-source.tar file was extracted.
Go to the module that you want to customize. For example, if you want to update the order module, then go to the buc-app-order folder. For example:
```
cd devtoolkit_docker/orderhub-code/buc-app-order
```
Open the app-config.json that is in the module that you want to customize and add the new routes that you want to include in the application.
Run the following schematics command. This command creates the packages for each new route and update the necessary files within the application.
```
ng g @buc/schematics:add-app-to-existing-monorepo --app-config-json app-config.json --module-short-name short-name-for-the-module --prefix selector-prefix --mode on-prem
```
The schematic supports the following options.

--app--config-json

This option is required. Use the existing app-config.json file in the module that you want to customize.

--module-short-name

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

--prefix

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

--mode

Set to on-prem to generate code applicable for Sterling™ Order Management System Software on-premises deployments.

--is-custom-app

Indicates whether or not the current repository is a custom application. Use true to indicate that the current repository is a custom application, or use false for an existing Order Hub application. The default is false.
For example,
```
ng g @buc/schematics:add-app-to-existing-monorepo --app-config-json app-config.json --module-short-name order --prefix buc --mode on-prem
```
Test the customized routes locally by opening the overrides.json file in the module and modifying the object for the new route to be "use Prod":false.
For example,
```
    "custom-route": {
      "useProd": false
    }
```

If the route is added as a new menu, create the features.json file. For more information, see Creating the features.json files. A features.json file example.

[
    {      
"id": "custom-order",      
"title": "Custom Order",      
"icon": "shopping--cart-16",      
"parentFeatureId": "oms-order-search",      
"navigation" :
 {        
"route" :
 {            
"link": https://localhost:8300/buc-app-order/custom-route/order/home,            
"path": "/custom-route/order/home"
        }
      },      
"enablementCondition":
 {           
"byResourceId": "BUCORD0005,BUCORD0006"
      },      
"type": "IFRAME"
    }
]

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
```
To see the changes on the local server, run yarn start-app.

Prepare for deploying the customized routes.

Copy the development version of the features.json file from the <order_hub_code_directory>/shell-ui/assets/dev/features.json file to <order_hub_code_directory>/shell-ui/assets/features.json file. Change the navigaion>route>link property to /buc-app-<module short name>/<path to the page>. The example features.json file.

[
    {      
"id": "custom-order",      
"title": "Custom Order",      
"icon": "shopping--cart-16",      
"parentFeatureId": "oms-order-search",      
"navigation" :
 {        
"route" :
 {            
"link": "/buc-app-order/custom-route/order/home",            
"path": "/custom-route/order/home"
        }
      },      
"enablementCondition":
 {           
"byResourceId": "BUCORD0005,BUCORD0006"
      },      
"type": "IFRAME"
    }
]

Open the <order_hub_code_directory>/<module-name>/package-customization.json file. In the routes object, ad every route in the module that is customized.

For example.

{
  "repositoryName": "buc-app-order",
  "customizationContextRoot": "/order-management-customization",
  "routes": {
    "custom-route": {
      "type": "code",
      "custom": true
    }
  }
}

Open the ../<module-name>/packages/<route-name>/package.json file for each new customized route. Add a "build-merge" script that has the same value as the "build" script.

What to do next

Continue to deploy the customized routes.

For more information, see Building the customizations.