# 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:

$3

#### Instructions for setting up the registries:
``shell
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
`shell
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.

$3

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.
`shell
gulp serve
`

$3

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 ...
}
}
`

`shell
gulp serve:online --role
`
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.

$3

For running the offline experience in compressed, streamlined production mode.
`shell
gulp serve:dist
`

$3

For running the online experience in compressed, streamlined production mode.
`shell
gulp serve:online:dist
`

Running the Toolkit UI tests

Fire up the Toolkit UI in online dev mode:
`shell
gulp serve:online
`

In another window, kick off the test suite:
`shell
gulp apim-test
``