Node.js is changing the world! 


Why I say that, is many apps that we use today like Uber are using Node.js to change how we consume IT and live our lives. 


Based on this radical way Node.js is having this success I felt intrigued to learn about it.  The great thing for me, as an infrastructure guy, is node’s simple design means it’s easy to pick up and get going.

 

My plan here was to start small and build a basic web app (we have to start somewhere) and have it directly get data from a Nimble Array API.  Using Julian Cates’ excellent work on https://connect.nimblestorage.com/people/juliancates/blog/2016/09/27/adventures-in-nodejs-with-the-nimbleos-api  it gave me an incredible head start to building the code to presenting volume data onto a web page.

 

In this blog I have decided not to try and teach all about Node as there are plenty of great resources on the web to get going.  I thought it would be good to go through the key parts of the code working with the Nimble RestAPI.

 

Basic Node Web Page

 

Once you have installed Node and get the relevant NPM packages running you can then build your code out.


To start out I took Julian’s code and saved it in a file called nimble.js. I added my local Nimble Virtual Array details and logon credentials.

 

When I ran the command node followed by the .js I created (nimble.js) from cli I got the following response:

 

Using token: 8e1a96e8ed6ef1557c4f4dea40c2c71d

{ startRow: 0,

  endRow: 3,

  totalRows: 3,

  data:

   [ { id: '061ed454a4cb537eb6000000000000000000000002',

       name: 'sql' },

     { id: '061ed454a4cb537eb6000000000000000000000001',

       name: 'test' },

     { id: '061ed454a4cb537eb6000000000000000000000003',

       name: 'test123' } ] }

 

You can see on the output that the token was presented and the volumes on the array too.  This is due to the console.log in the code at both the Get Token and Get Volume.

 

The next step was to get this presented onto a HTML page in the raw JSON using Node’s package called Express.

 

Express is a web application framework for Node.js, released as free and open-source software. It is designed for building web applications and APIs

 

With Express you build out the app by doing the following:

 

         var express = require('express');

         var app = express();

 

The above lines of code start Express in the web app and provide a variable called app to build an instance.


The next part is to open a TCP port for the site which is below on TCP 5000

 

          var port = 5000

                 app.listen(port, function(err){

                 console.log('running server on port ' + port);

          });

 

 

 

Next, use Express’ app.get command to point the API call for getting the volume data and presenting to a HTML page. This was done with the following code:

         

         app.get('/volumes', function (req, res) { < Get Token / Get Volume Code > };

 

When the Node web app was started on my MacBook and pointed to my browser to HTTP://localhost:5000/volumes the following was presented (with JSONview Chrome Extension visualising the JSON into a nicer format):

 

3.png

4.png

 

The output from app.get shows retrieval of raw data from the Nimble RestAPI.  You can also see from Nimble UI under the Audit log that API calls are being accepted too:

 

5.png

 

Next Step was to render this raw data and present it onto a table on a webpage.

 

Building the Web Page

 

Express has a great feature that allows templating engines to build out your HTML Sites.  There are many templating engines out there.  I found EJS worked best for me.  EJS is when you use a HTML bootstrap template. You simply change the file extension from HTML to EJS and the page would just work like its original format.

Now you are using a templating engine like EJS you can use Javascript code inside your HTML page.

To set the EJS as the template engine in Express the below setting is configured in the web app:

 

          app.set('view engine', 'ejs');

 

Express Routes

 

To simplify my code, I have decided to use a feature in Express called routes.

 

By adding the following code to my web app I am able to create a variable that tells my web app it is required to route this code to this location which holds a js file called nimbleRoutes.

 

          var nimbleRouter  = require('./src/routes/nimbleRoutes')(nav,data);

          app.use('/NimbleProd1', nimbleRouter);

 

So any code that I build in nimbleRoutes.js is exported and called in the app.use Express command.  This means as my code scales I just add my routes and use them when required.

 

The raw JSON data outputted from the previous stage provided the starting point to become more specific on what data should be presented on the webpage.

 

Any of the fields in the data hierarchy on the JSON output could be rendered onto the webpage.  I decided on 3 fields which include :

         

            Name

            Size

            App_category

 

I had to amend Julian’s code in the Get Volume function to instead of

 

              console.log(JSON.parse(str));

 

to utilise the Express command res.render.  The res.render take the JSON and gets into the JSON hierarchy at the data level in a variable called result.

 

               response.on('end', function () {

                                    var results = JSON.parse(str);

                                    var result = results.data;

                                    res.render('NimbleProd1', {

                                    title: 'Nimble API Integration’,

                                    data: result

                                                            }

                                                            );

             

             

                });

 

With EJS when you want to add your JavaScript code in the HTML page you simply insert the JS Code with <% insert JS Code %>.

The below code is what is used to render the 3 categories for presenting on the webpage from the data variable:

 

          <tbody>                              

                 <% for (var i = 0; i < data.length; i++) { %>

                        <tr>

<td><%= data[i].name %></td>

                                    <td><%= (data[i].size /1024 ) + " GB" %></td>

                                    <td><%= data[i].app_category %></td>

                        </tr>   

                                    <% } %>

          </tbody>

                       

Once the web app is started the code is presented on my Mac on http://localhost:5000/NimbleProd1

 

6.png

 

 

Moving the Web App into a Docker Container.

 

The next phase was to port my Node web app into Docker. By using my web app source code, to move the app into a container was incredibly easy.  The code was published to github and essentially I needed the following files from web app:

 

    package.json –          Contains the NPM information to install packages

     app.js              –          The web app code starts from this file

     src/routes/* –          All routes are built in the directory

     src/views/* –          All EJS (HTML) is built in the directory

 

Docker was built on Centos and once installed I created a Dockerfile.  Each Dockerfile is a script, composed of various commands and arguments used succesfully for organizing things and greatly helping with deployments by simplifying the process start-to-finish.  The Official Node Docker image was used for this web app and I built the following Dockerfile to create the app:

 

With in the Dockerfile there is the NPM install which installs the packages stated in the packages.json file. It then starts the web app with NPM start and opens up port 5000 inside the container.

 

  7.png

 

Now you have the Dockerfile saved in the same directory as your source code you then run the below command. This builds an image of the Node Web App called steve/nimblenode-web_v1.1.app:

 

  0.png

 

All that is needed now is to create a container from the image and open the port to connected to the 5000 which was used in the Dockerfile. Below is the command used:

 

  10.png


Once the docker is running which can be seen by docker ps command you can then connect to the web app.

 

I installed this docker web app in a different lab pointing at a CS700 array.  I changed the IP in the code to the CS700 and then created a service account called Restapi to authenticate the request.

 

Here is the below information outputted from the web app from the CS700. You can see the app is not running on localhost but is running on 172.16.45.160:49162.  The container is using port 5000 however the docker converts the port internally from 5000 to 49162 which I set on the docker run command:

 

  1.png

 

What really impressed me on the exercise was the portability of the web app with Node.  I did not change any code other than the IP details when moving it from my Macbook in Dev to Production in Docker container.

 

Github

 

 

I have shared my Node app on Github on the following link –

 

https://github.com/nimblesteve/api-dash.git - All that needs changing is the Nimble Array IP and logon credentials to your Nimble Array and the app will communicate via API.  

 

Next Node Project

 

I really enjoyed learning about Node.  I think I will plan a second project over the next few weeks to see what else we can do with Nimble's RestAPI and Node.


Watch this space!