OpenZiti Console

The OpenZiti Console is an administrative web interface for an OpenZiti network.

Deployments

Read the production deployment guides for the console as well as the controller, router, etc.

Link to deployment guides

Requirements

To build and run the application from source, you'll also need to make sure you have the following developer tools installed and available on your command line.

Tool	Version
Node.js	=18
npm	>=8.1
ng	=16

Install Angular CLI

This provides the ng command.

npm install -g @angular/cli@16

Projects

This repository houses two projects.

1. ziti-console-lib - Angular library used by the console UI.
2. app-ziti-console - console UI with two deployment modes.
3. Single page application mode (recommended)
4. Node.js server mode (server.js, deprecated)

Build

From the project root:

1. Install the projects' dependencies.

   npm install

2. Build the library project with Angular.

   ng build ziti-console-lib

Build the Single Page Application

This is the recommended approach.

1. Build the console project with Angular.

   ng build ziti-console

2. You must host the static files with a web server. See the deployment guide for details on configuring the controller to host these files.

3. Access the console at the controller's address: https://localhost:1280/zac

Build the Standalone Node Server

This deployment mode is deprecated by the SPA mode.

1. Build the console project with Angular.

   ng build ziti-console-node

2. If developing the standalone Node server, run it.

   node server.js

3. Access the console at http://localhost:1408

4. Configure the server with the URL of the controller's edge-management API, e.g. https://localhost:1280

Developing with Angular

There are two elements to the Angular app.

From project Root:

1. Install dependencies

   npm install

2. Run & watch changes in the core library in ziti-console-lib by running the npm script watch:lib

   ng build ziti-console-lib --watch

   • Note: The NPM library is referenced/linked in package.json as "ziti-console-lib": "file:dist/ziti-console-lib". This library includes the pure javascript code it shared with ziti-console, and the Angular code it shares with other apps.

3. Then in a separate window run & watch changes in the main application app-ziti-console

   ng build ziti-console-node --watch

This ensures changes made to the NPM library get pulled into the Angular app as you are developing