Add-in Manager / Workplace

Workplace Build Process

If you customize the Workplace self-service app, such as changing its colors, you must rebuild it. Making any sort of change to the Workplace files requires a new build.

Prerequisite

Note : If you are using Archibus V.2023.03, see the instructions in the archived help: https://help.archibus.com/system_v2023.03/sysman.htm#workplace/build_process.htm.

Archibus Workplace relies on a number of tools that execute in the Node.js environment.

  1. Install Node.js using the link https://nodejs.org. Install the recommended version for your OS.

  2. Install yarn using the link https://yarnpkg.com/en/. Install the recommended version for your OS.

The yarn program is a package manager and is used to download and install the libraries used by Workplace.

Overview

The Workplace user interface components are created using the React JavaScript framework. The components are typically created as ES2015 JavaScript classes or functions. Each class is contained in a single file in the source project. The project JavaScript files need to be packaged so that they can be executed in a browser. The assembly of the project files requires a "bundling" step. Workplace uses Webpack (https://webpack.js.org/) to perform the bundling step.

Obtaining the Project Source Code

The code for Workplace is included in the distributed WAR file. The Workplace source code files are located in the ./schema/ab-products/essential/dev/workplace folder of the WAR file.

  1. Open a terminal or command prompt and navigate to the ../schema/ab-products/essential/dev/workplace directory.

  2. Execute the command yarn install . This command installs the application dependencies.

  3. Execute the command yarn develop . This command processes the Workplace files and places the output in ../schema/ab-products/essential/workplace

  4. Workplace can now be opened in a browser using the URL http://[server]/archibus/schema/ab-products/essential/workplace .

Webpack Scripts

The following Webpack scripts are defined in Workplace's package.json file.

Script Name

Purpose

When to Use

yarn develop

Bundles the app JavaScript, HTML, CSS and static files in develop mode. Includes source maps for better debugging

Development

yarn production

Bundles the app JavaScript, HTML, CSS and static files in production mode. Optimizes the output for size and performance

When the app is ready to be deployed.

yarn watch

Monitors the project file system and bundles the app as changes are made to the source code. Bundles the app code in develop mode.

Development. Allows code changes to be visible in the browser without having to execute yarn develop after every code change.

yarn test

Executes the Workplace app tests

yarn format

Executes the prettier script

Use to format JavaScript and CSS code prior to committing code changes.

yarn lint

Executes the eslint script

Use to statically check the JavaScript code

yarn validate

Executes both eslint and prettier

Execute before committing code.

yarn storybook

Starts the storybook service

Use when inspecting or designing workplace components.

See Also