(Optional) Customizing Frontend Compilation

Prerequisite

• Before performing custom frontend compilation, ensure that node.js of version 14.21.3 and npm of version 6.14.18 have been installed in the environment, and the npm source has been configured. Otherwise, the compilation may be abnormal or take a long time.
• You have obtained the frontend open-source code omsdk-web.zip.

Procedure

1. Enable the custom frontend compilation function.

   Change _NeedBuildCustomizedWeb in the project.conf configuration file to yes. The file path is {project_dir}/config/project_cfg/project.conf.

2. Place the frontend open-source package omsdk-web.zip in the {project_dir}/src/app/build_customized_web_project directory.
   

   The name of the frontend open-source software package must start with omsdk-web and end with .zip.

3. In the {project_dir}/src/app/build_customized_web_project directory, implement the compilation script build_customized_web_project.sh. The following is an example:

   #!/bin/bash
   CURR_DIR=$(dirname "$(readlink -f "$0")")
   WEB_MANAGER_DIR=""
   function build_web()
   {
     cd "${CURR_DIR}"
     local web_zip="$(find "omsdk-web"*.zip -maxdepth 1 -type f)"
     local web_zip_basename="$(basename "${web_zip}" ".zip")"
     unzip -q -o "${web_zip_basename}.zip" -d "${CURR_DIR}"
     cd "${web_zip_basename}"
     npm install --ignore-scripts
     if (($? != 0)); then
       echo "[ERROR] npm install failed."
       return 1
     fi
     npm run build
     if (($? != 0)); then
       echo "[ERROR] npm run build failed."
       return 1
     fi
     cp -r dist/* "${WEB_MANAGER_DIR}/"
     return 0
   }
   function main()
   {
     set -ex
     echo "##################### start to prepare web package ############################"
     if [ "$1" == "" || "$1" == "/" || "$1" == "~" ]; then
       echo "[ERROR] param is invalid."
       return 1
     fi
     WEB_MANAGER_DIR="$1"
     build_web
     if (($? != 0)); then
       echo "[ERROR] prepare web package failed."
       return 1
     fi
     echo "#################### prepare web package successfully ##########################"
   }
   main "$@"

4. In {project_dir}/build/build.sh, implement the compilation script for invoking the extended _NeedBuildCustomizedWeb switch. The following code is in the build.sh file and must be placed before the code of the _NeedCustomizedWebNav and _NeedCustomizedWebAssets functions.

   # Customize the frontend compilation function.
   # For details about the implementation of build_customized_web_project.sh, see the corresponding section. The code must be placed before the code of the _NeedCustomizedWebNav and _NeedCustomizedWebAssets functions.
   # TOP_DIR={project_dir}
   if [ "${_NeedBuildCustomizedWeb}" == "yes" ];then
        bash "${TOP_DIR}/src/app/build_customized_web_project/build_customized_web_project.sh" "${OMSDK_TAR_PATH}/software/nginx/html/manager"
        ret=$?
       if [ "$ret" != "0" ];then
           return 1
        fi
   fi

Usage Examples

After the new frontend functions are compiled and deployed in the environment, you can view the functions on the web page of the edge management system, as shown in Figure 1.

Figure 1 New functions