Home

Awesome

MyHero UI Service

This is the FrontEnd UI Service for a basic microservice demo application.

ui

This provides an alternative web front end to the original hpreston/myhero_web into a voting system where users can vote for their favorite movie superhero.

This UI is built with AngularJS and Bootstrap to provide a more Cloud Native style frontend.

Details on deploying the entire demo to a Mantl cluster can be found at

The application was designed to provide a simple demo for Cisco Mantl. It is written as a simple Python Flask application and deployed as a docker container.

Other services are:

The docker containers are available at

Environment Installation

The MyHero-UI service is built on AngularJS and leverages npm to install dependencies and local execution. You'll want to have Node.js installed if you plan to run locally, that is NOT within the Docker Container model.

Basic Usage

Docker Container

The best option for running the service is as a Docker Container. This removes the need to install Node on your local machine or edit any configuration files.

After cloning the repository and entering the directory. You can build the container like this:

docker build -t myhero_ui:local .

This will create a new docker image on your local machine for the service. You can verify like this:

docker images 

# OUTPUT
REPOSITORY                                     TAG                 IMAGE ID            CREATED             SIZE
myhero_ui                                      local               304e562b0ba0        5 seconds ago       184.8 MB

To run the container, a few pieces of information need to be provided. This includes:

Note: the addresses for the App, Spark, and Tropo services will be in the format of "http://app.domain". If you are running the services all locally on your machine, they would be similar to "http://localhost:15001".

You provide this information as environment variables to the container. These commands are an example:

# First set some local environment variables for the details needed
export MYHERO_APP_SERVER=<your app server address> 
export MYHERO_APP_KEY=<your app server key>
export MYHERO_SPARK_SERVER=<your spark bot address>
export MYHERO_TROPO_SERVER=<your tropo app address> 

# This command will start a container and connect to the terminal so you can watch it
docker run -it \
	-e myhero_app_server=$MYHERO_APP_SERVER \
	-e myhero_app_key=$MYHERO_APP_KEY \
	-e myhero_spark_server=$MYHERO_SPARK_SERVER \
	-e myhero_tropo_server=$MYHERO_TROPO_SERVER \
	-p 8080:80 \
	myhero_ui:local

# OUTPUT
Configuring UI to use APP Server: <your app server address>

Starting Web Server
172.17.0.1 - - [19/Aug/2016:14:12:01 +0000] "GET / HTTP/1.1" 200 4839 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/601.7.7 (KHTML, like Gecko) Version/9.1.2 Safari/601.7.7" "-"

Accessing

Once started up, you can browse on your local machine to http://localhost:8080 to open the site. Should look something like this.

ui

Local Development with Vagrant

I've included the configuration files needed to do local development with Vagrant in the repo. Vagrant will still use Docker for local development and requires the following be installed on your laptop:

To start local development run:

Each of the services in the application (i.e. myhero_web, myhero_app, and myhero_data) include Vagrant support to allow working locally on all three simultaneously.