Skip to main content
Version: 2.x

Upgrading the UI Customizer

The customizer helps extend the functionality of the UI by allowing you to add custom components to the UI. This guide will help you upgrade the customizer to the latest version.

Prerequisites​

  • Node.js version 20 or above (which can be checked by running node -v).
  • Docker

Steps​

Dependencies to remove​

  • react-scripts
  • node-sass

Dependencies to add​

  • Add the following dependencies to the customizer folder
npm install -D @babel/cli @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react babel-plugin-cjs-esm-interop sass watch

Update the package.json file​

  1. Add the following scripts to the package.json file
package.json
{
  "scripts": {
    "dist": "rm -rf dist && sass ./src/scss:./dist/css &&  babel src/ -d dist --copy-files  && npm link",
    "watch": "watch 'npm run dist ' ./src",
    "css": "watch 'npm run css_dist ' ./src"
  }
}

2. Add the babel configuration in the package.json

```json title="package.json"
{
  "babel": {
   "babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "modules": false
        }
      ],
      [
        "@babel/preset-react",
        {
          "runtime": "automatic"
        }
      ]
    ],
    "plugins": [
      "@babel/plugin-transform-runtime",
      [
        "babel-plugin-cjs-esm-interop",
        {
          "format": "mjs"
        }
      ]
    ]
  },
  }
}
  1. Add the package exports configuration
package.json
{
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "require": "./dist/index.js"
    },
    "./dist/css/index.css": "./dist/css/index.css"
  }
}
  1. Move react, and react-dom to peer dependencies. You can move the dependencies that exist in the ui to peer dependencies so as to prevent conflicts.
npm install --save-peer react@18 react-dom@18 semantic-ui-react@3.0.0-beta.2 immutable

Update the Dockerfile​

  1. Update the Dockerfile to include the following commands
# Before
FROM node:12.22.12
# After
FROM node:22-slim
WORKDIR /tmp/work
COPY ./package.json .
RUN npm install
COPY src src
RUN npm run dist

Running the customizer​

To run the customizer, run the following command:

npm run watch

This will watch for changes in the src folder and compile the files to the dist folder.

Building the customizer​

To build the customizer, run the following command:

npm run dist