Javascript
Application
  • Introduction
  • Ansible and ACI
  • Cisco ACI API
  • Python Basics
  • Python ReST w/Requests
  • Javascript
  • Config ACI Programatically
  • Finished
  • References

One of the things we always want to do in this lab is inspire the posiblities. Sometimes it is hard to understand how exactly the ACI ReST API actually can transform network access from the perspective of simple scsripts to full blown applications that complete network tasks with ease.

When you observe the various integrations that Cisco has accomplished for OpenStack, Kubernetes, OpenShift and others you are just seeing this concept in action. That which the API is used by different integration components to configure network elements.

So to show this we have built for you a more complex application in javascript that you will be adding some functionality to. We have already integrated login/logout to the fabric, we have transfered the endpoints code over the full foundation of the app. We just want to provide a cool place to add some code to give you an idea of what could be accomplished with ACI.

In the previous example of javascript we created a application with NPM. For this portion of the lab we are going to use NPM again in a different directory that is going to contain a set of file structures that we have built for you to accelerate this more complex version of the lab.

Step 1 - Stop NPM From Previous JavaScript Section of Lab

Please stop the NPM process of the previous lab portion by pressing CTRL-C to stop the process in your terminal window. This should return you to the prompt.

Also, please close any of the tabs open in your VSCode editor to keep things clear for this next section.

Step 2 - Change directory and initialize NPM

You will be working on a new directory struture that we have placed under the ~/ltrdcn-3225/jsapps. This new directory is called tenant. Under this directory is a bigger application structure. Here you have to initialize NPM for this application. 


    cd ~/ltrdcn-3225/jsapps/tenant

And then we will initialize NPM: 


    npm init

Tip

Use default options by hitting 'Enter' then typing 'yes' at the end.

Step 3 - Install lite-server


    npm install lite-server --save-dev

Step 4 - Update package.json file

In the IDE modify the package.json file in the ~/ltrdcn-3225/jsapps/tenant adding the following line to the scripts object. Don't forget to include the comma on the line above for correct JSON syntax. 


{
    "name": "tenant",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "dev": "lite-server"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "lite-server": "^2.3.0"
    }
}

Watch out!

Make sure to include the comma (as shown on line 7) for correct JSON syntax.

Step 5 - Configure HTTP port file for Lite-Server

You will now create another file in the IDE named bs-config.json in the ~/ltrdcn-3225/jsapps/tenant directory containing the following JSON data structure.

  1. Right click on the tenant folder
  2. Click New file and enter bs-config.json

{
    "host": "10.0.226.241",
    "port": 10004
}

Step 6 - Start NPM

You have to start NPM as we did previously to start lite-server that will be hosting the application on this server. 


    npm run dev

You should then be able to reach the application in the following url: http://10.0.226.241:10004 that will show you the application that you will be working on expanding functionality.

Step 7 - Login into APIC from this app

Click on the Login Form button and enter the credentials for the ACI fabric.

  • APIC IP Address: 10.0.226.41
  • Username: aciproglab04
  • Password: cisco.123

After that you should see some data show in the tool related to the lab ACI Fabric. We have included the same endpoint viewer and we have some other widget type data for your pleasure. Now you will work in the create network section of this tool to configure some networks via this interface into the fabric.