Skip to main content
The Pixwel UI is the browser front end to the Pixwel API, for both end users and administrators. It lives under ui/ and is split into two apps:
AppPathStackStatus
3.xui/3x/ (package pixwel-ui)React, Webpack 5, SCSS, Ant Design, ZustandCurrent — where new work happens.
2.xui/2x/AngularJS, Gulp, KarmaLegacy — still runs alongside 3.x, but not where new features go.
New development targets ui/3x. The rest of this page describes it.

​
Setup

Work in ui/3x with pnpm — its engines field says npm, but npm install fails there. Install with pnpm install. Node 22 (ui/3x/package.json engines).
cd ui/3x
pnpm install
pnpm start        # Webpack dev server on port 9000 (https://development.pixwel.com:9000)
pnpm start:dev    # dev server with DEV=true, opens a browser
For the full command list and how the bundle is built, see Webpack.

​
Structure

Everything below is under ui/3x/:
PathDescription
index.js / app.jsApp entry and root component.
pages/One directory per route (for example project/, asset/, shares/, work-requests/).
layouts/Page shells the routes render into.
modules/Shared application code (see below).
stores/Zustand state stores, named use-*-store.js.
scss/ & theme/Styles (SCSS) and theme tokens.
config/ & constants/Build/runtime configuration and shared constants.
utils/Plain helper functions.
cypress/ & tests/Cypress E2E and Jest unit tests — see UI testing.
stories/Storybook stories (pnpm storybook).
dist/Build output (generated by the Webpack build).

​
Inside modules/

PathDescription
components/Reusable React components.
services/API calls and integrations (REST/GraphQL).
hooks/Custom React hooks.
contexts/ & providers/React context and provider wrappers.
hoc/Higher-order components.
navigation/Routing and nav structure (router.js).

​
Tooling

  • Build/serve — Webpack 5 (webpack.config.js); see Webpack.
  • Tests — Jest (jsdom) for unit tests and Cypress for E2E; see UI testing.
  • Linting — ESLint flat config (eslint.config.mjs) + Stylelint for SCSS, via pnpm lint. Husky runs lint-staged on commit.
  • Deploy — Vercel (ui/3x/vercel.json, ui/create-vercel-output.js).

​
More UI docs

  • Webpack — how the front end is built, served, and bundled.
  • UI testing — running and writing tests.
  • Video player — the in-app preview player.