Skip to main content

UI Development

This section covers everything you need to develop frontend code for the Mango platform. The Mango UI is built on AngularJS (1.x) with Angular Material and uses webpack for bundling. Whether you are working on the core MangoUI module, building a custom module with frontend components, or creating lightweight user modules, these guides will help you get started.

In This Section​

  • Development Process -- Comprehensive guide for frontend developers, covering the technology stack (AngularJS, webpack, Angular Material), required tools (Git, Node.js, yarn, Maven), code style guidelines (JavaScript ES6, CSS, HTML), development mode configuration, compiling frontend code, debugging, and module directory structure.

  • Java Developer IDE Setup (Legacy) -- Detailed setup instructions for both Eclipse and IntelliJ IDEA, including cloning repositories, configuring Maven, debugging Mango Core, REST API test development, web development workflows, development mode configuration, and build scripts. Covers Mango 3.x and 4.x versions.

  • Java Developer IDE Setup -- Streamlined setup guide for Mango 5.x development using IntelliJ IDEA. Covers cloning the example modules repository, configuring JDK 17, Maven settings, and building modules.

  • Browser Debugging -- How to use Chrome Developer Tools to debug issues in custom Mango pages, including finding errors in the console, editing markup, and checking the Mango log file.

  • User Module Setup -- Creating lightweight AngularJS modules without building a full Mango module. Use the User Module feature to add custom components, directives, and filters that are stored in Mango's file store and loaded at runtime.

Technology Stack​

TechnologyPurpose
AngularJS 1.xCore UI framework
Angular MaterialUI component library (Material Design)
WebpackModule bundling and compilation
ES6 JavaScriptSource language (no transpiler)
yarn 1.xPackage management
Node.jsBuild tooling
MavenModule packaging and deployment

Quick Start​

For most frontend development tasks:

  1. Install Node.js, yarn, and Git
  2. Enable development mode in your Mango env.properties
  3. Run yarn install --frozen-lockfile in your module directory
  4. Run yarn webpack --mode development --watch for live recompilation
  5. Refresh your browser to see changes