Awesome Open Source
Awesome Open Source

BX-bot UI

Build Status

Note: This project is very much work in progress and not safe for production.

What is BX-bot UI?

BX-bot UI is an Angular app (and learning journey!) for administering BX-bot.

Although being developed as a 'real-world' app, the code tries to showcase different features of Angular and TypeScript. It's not meant to be an Angular 101 tutorial - the Angular Documentation does a far better job!

Installation Guide

The Docker way

If you want to just play around with the UI, Docker is the way to go.

  1. Install Docker on the machine you want to run the app.
  2. Fetch the BX-bot image from Docker Hub: docker pull gazbert/bxbot-ui:0.0.1
  3. Run the Docker container: docker run --name bxbot-ui-0.0.1 -it --rm -p 4200:4200 gazbert/bxbot-ui:0.0.1
  4. Open a browser and go to: http://localhost:4200
  5. You can stop the container using CTRL-c

The current Docker image is not a release, but rather a rolling development version of the UI...

The manual way

You'll need node.js (at least node 6.9.x) installed to build and run the app.

  1. Install the Angular CLI globally: npm install -g @angular/cli
  2. Clone this repo locally.
  3. Change directory to the root of the project.
  4. Run npm install to install the dependencies - you'll only need to do this once, unless the versions are updated in the package.json
  5. To start the app: npm start
  6. Open a browser and go to: http://localhost:4200
  7. To stop the app, CTRL-c from the command line.

Build Guide

Follow the instructions in the The manual way section if you've not already done so.

The project uses Angular CLI commands to build, test, and run the app.

Building the App

  1. Run npm run build to compile the application into the dist output directory.

Jasmine Unit Tests

The app has behaviour-driven unit tests written using the excellent Jasmine framework.

  1. To run the tests once: npm run test:once
  2. To continuously run the tests in the background using Karma: npm test - Karma will monitor code changes and trigger re-running of the tests.
  3. To stop Karma, CTRL-c from the command line.

Protractor End-to-End Tests

The app has e2e tests written using Protractor.

  1. To run the tests once: npm run e2e. It's usually best not to have the app running at the same time.


The build has a TSLint script that checks for code readability, maintainability, and functionality errors. The tslint.json file contains the linting rules.

  1. To run the linter: npm run lint


The app uses Angular's In Memory Web API as a replacement backend for development and local testing. The API config configuration options are set in app.module.ts.

The application config is in JSON format and lives in the in-memory-data.service.ts file.

To communicate with the bots for real, the app will need configuring to use BX-bot UI Server - currently work in progress.

Coming Soon

  • Integration with BX-bot UI Server.
  • A new 'Runtime' screen tab for displaying the bot's status, stopping/restarting, and viewing/downloading the latest log file.


This app started life as the Angular 4 QuickStart app and was later migrated to use the Angular CLI. It took (a lot of) inspiration from the following awesomeness:

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (245,462
Angular (12,442
Jasmine (387
Protractor (253
Related Projects