API Management Toolkit UI

Description

Getting Started

This module is used by apiconnect.

The UI can be run either as API Designer or API Manager - here's how:

First timers:

Instructions for setting up the registries:

npm login --registry=https://dev-console-npm.stage1.ng.bluemix.net --scope=@console
# Username: dev
# Password: bmDev
# Email:    { YOUR_IBM_EMAIL }

Setting up APIM-UI

cd apim-ui
npm install --registry http://apic-ci-npm.hursley.ibm.com:4873/
npm start

Note: you will need to use the appropriate ci registry for the npm install in the steps above, the example is the current dev registry. Details of the different registries can be returned by slackbot in API Connect slack instance by typing ci registry.

First time through, this will take around 10 minutes to download and install the pre-requisite node modules. Once complete, a browser window will open showing API Designer. You're now up and running in offline mode. You'll also have a war file (com.ibm.apim.apimanager-5.0.0.war) in the dist directory which can be deployed to an appliance.

Running / developing the UI

There are four different ways to run the UI:

API Designer dev mode

For developing the toolkit experience. This will open up API Designer without any minification of the code, and will watch the source directory for changes. Intended for fast development of the offline experience - minimal overhead for the developer to try out a change.

gulp serve

API Manager dev mode

For developing the online experience. This will open up API Manager without any minification of the code, and will watch the source directory for changes. It will proxy any /proxy/* API calls to a designated management node, as defined in gulp/proxy.json - you'll want to change this for your own system. Intended for fast development of the online experience, and for testing fixes against management nodes - the fix can be tested against the management node showing the UI issue without modifying the UI code deployed on that system.

{
  "proxy": {
    "forward": {
      "/proxy/(.*)": "https://172.16.80.161/v1/$1"
    },
    "auth": {                                                                                                                         
      "owner": {                                                                                                                      
        "username": "my_username",                                                                                            
        "password": "my_password"                                                                                                        
      },
      ... any other user roles you may have ...
  }
}

gulp serve:online --role <role, e.g. owner>

In order to point your proxy to an existing SAAS stack, you need to:

1. Open https://login.service.{stack}.apim.ibmcloud.com/auth?redirectURL=/token
2. Copy the value in jwt key
3. Remove auth element, add in headers element:

{
  "proxy": {
    "forward": {
      "/proxy/(.*)": "https://stecksalathe.apim.ibmcloud.com/v1/$1"
    },
    "headers": {
      "Authorization": "Bearer  eyJhbGciOiJFUz..."
    }
  }
}

Now, you can run gulp serve:online and omit the --role flag, since the access roles are already defined on your username.

API Designer prod mode

For running the offline experience in compressed, streamlined production mode.

gulp serve:dist

API Manager prod mode

For running the online experience in compressed, streamlined production mode.

gulp serve:online:dist

Running the Toolkit UI tests

Fire up the Toolkit UI in online dev mode:

gulp serve:online

In another window, kick off the test suite:

gulp apim-test