Foundational Installations

Installation of Bower Essentials and Components (Angularjs, bootstrap and  CSS)

I advise that “first viewers” of this technical blog series begin with the initial posting at url:  Portal Automation Introduction
As initially stated:  …..each new post will describe configuring a subsequent step(s) in the (initially stated)agenda. I expect to be adding new posts for this series semi-weekly.
A portal is a likely component of network automation tools and requires efficient, minified script components that allow the user to interact with the portal, exchange data and initiate backend data activity.
Community supported code modules are available to enable the aforementioned. “Bower” is one of the community supposed tools whose purpose is to facilitate working agreement between installed versions of Angularjs, jquery, bootstrap and CSS. I should mention that Bower is a package manager and there other ways of ensuring installed package interoperation. However, Bower supports this function as purpose-driven and receives active community support.  I elected to use Bower as a front-end way of mitigating interoperability issues and therefore experienced no issues at that level.
This series entry will describe typical steps of installing Bower and its components and methods of making the Bower components available to HTML and Angularjs source.
Bower installation can be subdivided into two categories:
1)    Components required by Bower (Node.js, NPM, GIT) for Bower to function. and
2)    Code modules necessary for automation applications to function (Angularjs, bootstrap,  CSS, jquery) that are installed by and supported by Bower.
Once Bower and the modules that it supports are installed; the installed Bower components  (Angularjs, CSS, bootstrap and jQuery) must be referenced in the user’s application HTML source  code as either <link> or <script> references.
So, the remaining text in this blog entry will include 1) the procedure to install Bower and using Bower to install code modules, and 2) the process for making Bower components available to application source code.
I should mention that all technical cli references from this point forward are w/r to recent versions of Ubuntu Linux.

Bower Installation

  1. Bower pre-install instructions:
    1. Ensure that you have a suitable web server application already installed, such as nginx
    2. Install the preliminary components in the following recommended order:
      1. git
      2. node.js
      3. npm; setup a symbolic link if necessary to associate node with nodejs, depending on how the package installer named the binary
    3. Install Bower globally: sudo npm install bower -g
    4. Create a Bower project directory.
      1. This should be the top level directory below which your .js, and CSS files will be located.
      2. this could be below your web server(nginx)/html directory or in some other location of your choosing
    5. In your Bower project directory: execute bower init
      1. answer installation questions as you prefer. Few answers will impact the condition of your installation
      2. you should now have a bower.json file (Bower installation information in json format) in your project directory
  2. Bower Component Installation
    1. Install Angularjs from Bower
      1. execute bower install angularjs –save
      2. Angularjs is now installed in the bower_components/angular(or angularjs) directory.  The minified version of angular (angular.min.js) should be the version used and is also contained in this directory.
    2. Install the CSS framework bootstrap
      1. execute bower install bootstrap —save
      2. bootstrap is now located in bower_components/bootstrap
      3. the preferred javascript file is located at: bootstrap/dist/js/bootstrap.min.js
      4. the preferred CSS file is located at: bootstrap/dist/css/bootstrap.min.css
    3. Making Bower Components available to the Application
      1. The Bower and Bower components installations are complete. Bear in mind that the angularjs, CSS jQuery and bootstrap files are those that will need to be referenced in your applications View (HTML) body or heading as <script> for .js files and <link href> for CSS files.
      2. If you installed Bower components below your application directory, then HTML script location references will be in the tree below your HTML file directory.  If your application is not in the tree above the Bower component installation, then you may need to have symbolic references somewhere at or below your application directory.
The next entry will describe the installation, environment and interoperation of the MVC components in the virtual lab application:
  1. Model
    1. Flask
    2. Python
  2. View
    1. nginx
    2. wsgi​
  3. CSS
    1. Controller
    2. Angularjs