Getting started with customizing next-generation Order Hub

Before you customize next-generation Order Hub, you must get the next-generation Order Hub source code and decide whether to create new applications or to customize existing applications to meet your business needs. After you customize next-generation Order Hub, test your customizations to verify that they are working as intended in your environment.

Procedure

Set up all the necessary components for the next-generation Order Hub container by installing Docker. You do not develop next-generation Order Hub customizations within the container. You can develop customizations on your local workstation.
Install a Node.js version that is compatible to Angular v15. For more information, see Version compatibility. If multiple node versions are needed, you can consider using nvm for Mac or Linux®) or nvm-windows (for Windows).
Install Yarn.
Install the Angular CLI globally by running the npm install -g @angular/cli@15 command in a console.
For optimal performance, download and set up a developer toolkit environment on your local workstation. Do not set up the toolkit inside another Docker container or on a virtual machine. For more information, see Setting up a developer toolkit environment.
1. Download the developer toolkit to your local workstation where you want to develop customizations for Order Hub.
  
  Tip: For Windows, save the devtoolkit_docker.tar file to the root directory, such as C:/devtoolkit_docker.tar. After installation, files are extracted to your local workstation, and long file paths might cause issues.
2. Open a console on your local workstation.
3. Browse to the location where you downloaded the .tar file and run the following command.
```
tar -xf devtoolkit_docker.tar && chmod +x devtoolkit_docker/compose/*.sh 
```
  The command creates a devtoolkit_docker folder on your local workstation.
4. In the devtoolkit_docker/compose directory, create a copy of the devtoolkit_docker/compose/om-compose.properties.sample file and name it om-compose.properties as shown in the following example.
```
cp om-compose.properties.sample om-compose.properties
```
5. Set the appropriate value for the AP_HOST property. For more information, see Overriding the default docker compose properties.
6. Start Docker.
  If you installed Docker Desktop, start Docker Desktop. If you installed Docker Engine, start Docker through the command line interface by using the sudo service docker start command.
7. Set up the developer toolkit by running one of the following commands.
  - To set up next-generation Order Hub in the developer toolkit, run the ./om-compose.sh setup-orderhub command.
  - To set up a new, full developer toolkit to also include other Order Management Software-related containers, such as Sterling Business Center, run the ./om-compose.sh setup command.
  - To upgrade an existing full developer toolkit to also include other Order Management Software-related containers, such as Sterling Business Center, run the ./om-compose.sh setup-upg command.
8. To extract the source code to your local workstation, run the following command. Use the source code to customize Order Hub.
```
./om-compose.sh extract-orderhub-code oms
```
  The source code is available on your local workstation at devtoolkit_docker/orderhub-code.
  Note: If you used Windows Subsystem for Linux version 2 (WSL 2) to install the toolkit, the files are also available on your local workstation. For example, if you ran the commands in WSL in /mnt/c/devtoolkit_docker, then the files are also available in C:/devtoolkit_docker. Complete all customizations on your local workstation, which is in C:/devtoolkit_docker.
Customize Order Hub to suit your business needs. You can create an application that you access through a new menu item, or you can customize existing applications that are provided by IBM®.
For more information, see either Creating new applications in next-generation Order Hub or Customizing existing applications.
Note: To help you build UI components, you can use the storybook. Access the storybook at https://localhost:8443. If you changed the OH_EXT_HTTPS_PORT in the om-compose.properties file, then update the port from 8443 to the port that you specified. The orderhub extension Docker container must be running to access the storybook. If the container is not running, go to devtoolkit_docker/compose and run the ./om-compose.sh start orderhubext command.