Full stack 4: Putting it all together

Creating a platform PAAS (openshift) and SSL.

Intro

It is time to take our decoupled dependencies and pull them together into an application.

Requirements

Deployment platform
Security
Integrate NODE fx price service module and angularJS fx watchlist

Deployment platform

Our deployment platform needs to provide us with Node and SSL — after doing a little googling and some comparisons i have chosen to use Openshift.

PAAS Openshift

Openshift is whats called a platform as a service (PAAS) and rather than describe it myself here is a quote from their site.

OpenShift is Red Hat’s Cloud Computing Platform as a Service (PaaS) offering. OpenShift is an application platform in the cloud where application developers and teams can build, test, deploy, and run their applications.
OpenShift takes care of all the infrastructure, middleware, and management and allows the developer to focus on what they do best: designing and coding applications.

In summary this means that as a developer i can quickly configure different application platforms and deploy them in order for them to host projects.

Note: I will not go into the specifics of how you setup openshift as they have a wealth of support on their site in the form of get started guides etc on their site.

After registering for an openshift account i have set up a node application using the node.js cartridge.

After following the getting started guides on openshift i have cloned my openshift repository and set up SSH access via PUTTY.

Node server configuration

Security — SSL

In order to provide some extra security to the transport layer we will implement SSL on our node server. This means that the data sent via https will be encrypted.

The first step to implementing SSL is to produce a private key and a certificate. To do this you will need to have openssl installed, if you do not have it already installed here is a tutorial …. for installation.

Generating a private key

Open up a command prompt and enter the following command to create a private key called fxappkey.pem

openssl genrsa 1024 > fxappkey.pem

Generating a certificate

The certificate generated will also contain a public key and will be for public consumption, this will be used to encrypt the data sent from the client.

You use the private key to create the certificate using the following command.

openssl req -x509 -new -key fxappkey.pem > fxapp-cert.pem

Creating the https server

Now that we have created the key and the certificate we need to create the https server.

Having placed our key and certificate in a logical folder on our server, we first need to load them into node.

var fs = require(‘fs’); var credentials = {
       key: fs.readFileSync(__dirname + ‘/cert/fxappkey.pem’),
       cert: fs.readFileSync(__dirname + ‘/cert/fxapp-cert.pem’) }

fs is the filesystem module that shifts with node, hence we are using it to read our key and certificate and save it to an object named credentials.

Now we need to create the https server and pass in our credentials.

var https = require(‘https’);
var port  = 8080;
var ipaddress = '127.0.0.1';var server = https.createServer(credentials, app);    server.listen(port,ipaddress,function(){
       console.log(‘listening on port ‘ + port+ipaddress);
    });

We now have a fully fledged https server — the only caveat being that our certificate is not backed by a certificate authority so the browser will throw a warning — just click the proceed anyway button.

Implementing gch-truefx-pricefeed

As gch-truefx-pricefeed is now a managed dependency via NPM, to install we simply use the following command from the root directory of the project.

npm install gch-truefx-priceservice

The dependency is now installed so we simply have to implement the module.

By following the implementation instructions of gch-truefx-priceservice we have the following …

var trueFXConfig = {
     userName:’TRUFXUSERNAME’,
     password:’TRUEFXPASSWORD’,
     curPairs : ‘EUR/CAD,GBP/USD,EUR/JPY,GBP/JPY,GBP/AUD'
};io = io.listen(server);
require(‘gch-truefx-pricefeed’)(io,trueFXConfig);

Now that we have the server set up lets move onto the client.

Client application

In order to have base UI i will be using twitter bootstrap css and angular UI bootstrap for components.

The reason for using the angularUI bootstrap for components is that i would rather have just a dependency on angular rather than jquery and custom JS.

The philosophy of angularUI bootstrap is nicely captured on the readme file on github.

We are aiming at providing a set of AngularJS directives based on Bootstrap’s markup and CSS. The goal is to provide native AngularJS directives without any dependency on jQuery or Bootstrap’s JavaScript. It is often better to rewrite an existing JavaScript code and create a new, pure AngularJS directive. Most of the time the resulting directive is smaller as compared to the original JavaScript code size and better integrated into the AngularJS ecosystem.

Installing gch-fx-watchlist

As gch-fx-watchlist is registered with the bower registry we need to open a cmd line prompt in our application root directory where the bower.json file is held and run the following command.

 bower install gch-fx-watchlist --save

This will install our gch-fx-watchlist component into our project and by using —save we will also save the dependency to the bower.json file, which now looks like the following.

{
 “name”: “text-fx-watchlist”,
 “version”: “0.0.0",
 “authors”: [
             “Bill Gooch <billgch@gmail.com>”
            ],
 “license”: “MIT”,
 “ignore”: [
 “**/.*”,
 “node_modules”,
 “bower_components”,
 “test”,
 “tests”
 ],
 “dependencies”: {
 “gch-fx-watchlist”: “~0.0.2"
 }
}

Adding gch-fx-watchlist to the project

For clarity i have included all of the individual dependencies loaded in separately.

<!DOCTYPE html>
<html>
  <head>
    <title>gch-ng-component-seed</title>
    <link rel=”stylesheet” type=”text/css” 
          href=”/gch-fx-watch-list.min.css”>
  </head>
  
  <body ng-app=’gch-ng-component-demo’ >    <div class=”centered”>
       <fxmarket-watchlist></fxmarket-watchlist>
    </div> <!— Main app ->
 <script src=”bower_components/angular/angular.js”></script>
 <script src=”app/app.js”></script>
 <!— Angular Components ->
 <script src=”gch-fx-watch-list/dist/gch-fx-watch-list.min.js”>       </script> <!— Angular Component dependencies →
 <script src=”angular-socket-io/socket.js”></script>
 <script src=”socket.io-client/dist/socket.io.js”></script> </body>
</html>

We have included the fxmarket-watchlist style properties with the following line of code.

 <link rel=”stylesheet” type=”text/css” 
       href=”/gch-fx-watch-list.min.css”>

We load in our angularJS framework libs using the following

<!— Main app ->
 <script src=”bower_components/angular/angular.js”></script>
 <script src=”app/app.js”></script>

Our fxmarket-watchlist component is loaded in via ..

 <!— Components ->
 <script src=”gch-fx-watch-list/dist/gch-fx-watch-list.min.js”> </script>

The component relies on the following dependencies, which we load in via ..

 <!— Component dependencies →
 <script src=”angular-socket-io/socket.js”></script>
 <script src=”socket.io-client/dist/socket.io.js”></script>

Now that we have all of the dependencies loaded we simply need to include our directive inside our ng-app with the following code ..

 <fxmarket-watchlist></fxmarket-watchlist>

Conclusion

We have added SSL encryption to our application, deployed via PASS and created a basic full stack application with a decoupled node module and a decoupled angularJS component which have been both utilised in our application.