Project: BBB Admin Page – Implementing a General Web Server on a BeagleBone Black

So far, we’ve implemented a very simple web page served by the BeagleBone Black (BBB) and setup a development environment. But to build a sophisticated web-based administration application, we need build a framework to support our future work. Our end goal is a Single Page Application (SPA) built using AngularJS. In this post, we’re going prepare for the Angular-izing of our work by adding node.js plumbing on the BBB to allow an infrastructure to server up web components.

As we did in the last post, we’ll use the “Install New npm Packages” tool to add a new module called serve-static. serve-static allows us to serve files from our node.js server on the BBB. Though it works from the root of where our node.js server is running, we can add directory support based on how we decide to organize our code. From Visual Studio 2013 (VS2013), select the npm element in the Solution Explorer tree, then select the “Install New npm Packages …” option. Once the dialog comes up, search for “serve-static” and install.

Since serve-static also needs the finalhandler module, also install it.

Install the serve-static module

Install the serve-static module

Now, let’s modify our HTML file and code to begin using benefits of the serve-static module. We’ll first rename our client.html to be a more generalized name: index.html. Similarly, we’ll rename our server.js file to be a more generalized name: app.js.

We are now ready to full integrate serve-static into our app.js code.

Adding serve-static into app.js

Adding serve-static into app.js

Most of the code here is boilerplate from the serve-static module’s npm page. We essentially define our modules (lines 3-8), setup default files for index (line 10-11) and then fire up the server in lines 13-21).

We can test our changes in VS2013, if we comment out the setInterval timer, which invokes a push of the temperature. If we don’t we’ll see an error because our the file location referenced will not be found and our file server will crash. We’ll remember to uncomment this line before we upload to the BBB. The result of our VS2013 debugging is:

Debugging serve-static using VS2013

Debugging serve-static using VS2013

With it working on the PC, we’re ready to test this infrastructure on our BBB – we’ll fire up our trusty WinSCP and transfer down the changes, making sure that we also include the serve-static and finalhandler modules, in addition to the renamed index.html and app.js files. Again, perhaps the better route is pushing the results to github, then bringing down the results to the BBB, but the WinSCP is a bit of a short cut. Here’s how our updated app looks now – the console below is from a PuTTY connection and the browser is on the PC (note the URL which references the BBB and the port we’ve selected for our server).

BBB Serving Temperature Using serve-static Module

BBB Serving Temperature Using serve-static Module

With a generalized server in place, we’re ready to move towards building a more sophisticated application. Next post, we’ll start adding an AngularJS framework to our project.

The updated project at github is here: https://github.com/bitstobrowser/AdminApp

 

Advertisements