In my previous post: How to deploy website to openshift with nginx, I simply introduced how to use the Nginx Builder Image to deploy a website on Openshift.

Reverse Proxy configuration, however, is not part of web content. Thus it is not able to directly to use the Builder Image to setup the config and we will need create a real Nginx Image which can be futher configured with reverse proxy table.

Step 1 – Create Nginx base image

We are creating the Nginx Base Image based on RedHat certified Nginx Builder Image (rhscl/nginx-112-rhel7).

First, let’s create an app that has an empty index.html page from local directory (e.g. $HOME/webfolder):

1

oc new-app registry.access.redhat.com/rhscl/nginx-112-rhel7~$HOME/webfolder --name=nginxbase

This will create corresponding resources like buildconfig, deploymentconfig, imagestream, service etc for nginxbase in Openshift.

Once resources created successfully, let’s build the image

1

oc start-build nginxbase --from-dir=$HOME/webfolder

This will create the Nginx Base image and push to registry in Openshift.

Once the nginxbase image being created, we could remove all other resources:

1
2
3

oc delete bc/nginxbase
oc delete dc/nginxbase
oc delete svc/nginxbase

Step 2 – Add reverse proxy configuration

We will need create a custom image for reverse proxy. First, create an empty folder and add following files:

• Dockerfile
• nginx-proxy.conf: the proxy definition file

In Dockerfile, add following content:

1
2

FROM nginxbase:latest
ADD nginx-proxy.conf /opt/app-root/etc/nginx.default.d/nginx-proxy.conf

When nginx server starts, it will automatically load configuration files *.conf in /opt/app-root/etc/nginx.default.d folder into its default server definition closure. So we add our nginx-proxy configuration file into that folder.

In nginx-proxy.conf file, we could add reverse proxy configuration. For example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

location /userProfile {
  proxy_set_header  Host $host;
  proxy_set_header  X-Real-IP $remote_addr;
  proxy_set_header  X-Forwarded-Proto https;
  proxy_set_header  X-Forwarded-For $remote_addr;
  proxy_set_header  X-Forwarded-Host $remote_addr;
  proxy_pass http://userProfile:8080;
}

location /uploadAsset {
  proxy_set_header  Host $host;
  proxy_set_header  X-Real-IP $remote_addr;
  proxy_set_header  X-Forwarded-Proto https;
  proxy_set_header  X-Forwarded-For $remote_addr;
  proxy_set_header  X-Forwarded-Host $remote_addr;
  proxy_buffering off;
  client_max_body_size 50m;
  proxy_pass http://uploadAsset:8080;
}

Step 3 – Create Reverse Proxy

Next, create reverse proxy app in Openshift:

1

oc new-app --strategy=docker nginxbase~<path to dockerfile> --name=myReverseProxy

Just be aware we have to use docker strategy as app’s build strategy so that Openshift knows that we will upload a Docker project.

Start Build:

1

oc start-build myReverseProxy --from-dir=<path to dockerfile>

Once the build finished, Openshift should automatically deploy a new pod up and running. We could expose the reverse proxy by running

1

oc expose svc/myReverseProxy

and access the nginx reverse proxy through the routes created.

Step1 – Download latest Minishift

Goto Mnishift Github Release Page, it is able to see the binary assets of Minishift for different operation systems. By writing this article, the latest versino of Minishift for MacOS is minishift-1.17.0-darwin-amd64.tgz.

Once downloaded, expand the tar file and copy the minishift file to /usr/local/bin folder

1
2
3
4
5
6

# untar the downloaded file
tar -xvf ~/Downloads/<downloaded file>

sudo cp ~/Downloads/<expanded folder>/minishift /usr/local/bin

sudo chmod +x /usr/local/bin/minishift

Step2 – Install dependencies / Virtualization Environment

Before Minishift can run, we need setup the virualization environment which supports Openshift running under MacOS environment.

When doing this step, I assum you have brew installed /configured correctly in your computer.

You can simply copy and paste code below and run in a terminal.

1
2
3
4
5
6

# Update brew first
brew update
# install docker-machine-driver-xhyve
brew install docker-machine-driver-xhyve
# Set the owner User ID (SUID) for the binary 
sudo chmod u+s $(brew --prefix)/opt/docker-machine-driver-xhyve/bin/docker-machine-driver-xhyve

Step 3 – Run minishift

Once setup virtualization environment successfully, let’s start minishift:

1

minishift start

For first time running, it will download all related dependencies including images / cli binary .

After starting successfully, it is able to see the allocated IP address to the master node of the openshift cluster. In my case it is 192.168.64.2.

Then you should be able to open https://192.168.64.2:8443 in your browser and login with username and password both as admin.

To shutdown your minishift cluster simply run:

1

minishift stop

Download Installer

First, download Node.JS installer according to target operation system from here

The installer downloaded should be executable on target operation system (e.g. .msi on Window and .pkg on MacOSX)

Run Installer

Follow the wizard and install Node.JS to target machine.

Restart and Test

Once installation finished, open a bash or cmd. Installation should have both node and npm commands exposed.

1
2
3
4

$ node --version
v6.9.5
$ npm --version
3.10.10

It is essential to have both commands running correctly.

In this post, I will simply go through how to run this Official RedHat nginx image on Openshift and deploy a website onto it.

So, have your openshift cli tool (oc) ready, let’s get started.

Step 1 - Create App / Deploy website source code

With oc tool, create a new app.

1
2

#oc new-app [BuilderImage]~[Source Code Repo]
oc new-app registry.access.redhat.com/rhscl/nginx-112-rhel7~https://github.com/Keyang/keyang.github.io.git --name=myapp

The openshift will pull the image from the registry and register it locally as builder image which will allow building images along with source code of website. It creates build config.

Then it will pull source code and assemble it with build image to produce another image stream.

This command will also create deployment config and service.

Build Local Source

If you have no accessible git repo, it is able to build againt local source.

Slightly different, create a new app on current folder

1
2

#oc new-app [BuilderImage]~[Source Code Repo]
oc new-app nginx-112-rhel7~./ --name=myapp

This will not actually upload the source code from current folder to Openshift but just create a build config. Thus we need to start the build with extra parameters:

1

oc start-build myapp --from-dir=./

with --from-dir param, oc will upload content of current directory and builder image will assemble the code.

Step 2 - Expose Nginx Server

Once app is created and built, we could expose it through router.

1

oc expose svc/myapp

Once it is exposed, your nginx server and your website should be accessible with the route associated.

Download Binary using XMLHTTPRequest

For XMLHTTPRequest, just simply setup the responseType of XHR instance to either arraybuffer or blob. Example:

1
2
3
4
5
6
7
8
9
10
11

var xhr=new XMLHTTPRequest();
xhr.open("GET", url, true);
//Now set response type
xhr.responseType = 'arraybuffer';
xhr.addEventListener('load',function(){
  if (xhr.status === 200){
    console.log(xhr.response) // ArrayBuffer
    console.log(new Blob([xhr.response])) // Blob
  }
})
xhr.send();

Download with jQuery Ajax

$.ajax does not support either arraybuffer or blob as its dataType. Thus we need write a beforeSend handler:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

//setup ajax
$.ajaxSetup({
  beforeSend:function(jqXHR,settings){
    if (settings.dataType === 'binary'){
      settings.xhr().responseType='arraybuffer';
      settings.processData=false;
    }
  }
})

//use ajax now
$.ajax({
  url:url,
  dataType:"binary",
  success:function(data){
    console.log(data); //ArrayBuffer
    console.log(new Blob([data])) // Blob
  }
})

About ResponseType

For more information about responseType, take a look at this.

Browser support – by time being

• Chrome
• Firefox
• Edge – In development
• Safari – In development

More browser support details can be found here

Requirement

To make your online only web app (like https://studio.psdetch.com) working offline, your web app needs to use https for security request.

5 mins development

Very simple. The steps below works on any web apps:

1. Follow this guide to install sw-toolbox
2. Add service-worker.js at the root folder of your web app. Here, the location (root folder) is important.
3. Add following script to index.html

1
2

<script src="/path/to/sw-toolbox/companion.js" data-service-worker="service-worker.js"></script>

4. Add content to service-worker.js. You can follow the tutorial here. But most situation you can just use following scripts:

1
2
3
4
5
6
7
8
9
10

importScripts("/path/to/sw-toolbox/sw-toolbox.js");
/* this will cache all files of current web app with 
 * "fastest" strategy. 
 */
toolbox.router.get("/(.*)",toolbox.fastest);

/*
* Add external files here.e.g.
* toolbox.router.get("https://code.jquery.com/jquery-3.2.1.min.js",toolbox.fastest);
*/

You can check what I have used for psdetch.

And that’s it. Your whole web app can now work offline. With fastest strategy, response is always returned from Cache and updated immediately if possible. This dramatically increased user experience.

To setup a brand new raspberrypi zero w you need prepare following tools:

• A raspberrypi zero w
• mini HDMI to HDMI convert
• Micro SD card
• USB OTG
• Mouse & Keyboard
• An external SD card reader

All coneectors can come from seller when you purchase Raspberrypi zero w.

Step 2 Download Raspbian Image

You can download official Raspbian OS from here. If you want use other operation systems, it is same setup setups.

Step 3 Write Image to Micro SD card

Be aware, writing image to micro sd card will wipe all data on it

Connect micro sd card to your mac through micro sd card reader.

Once you can see your sd card in finder, you need find out the disk in system.

Open a terminal and run diskutil list:

Find your sd card disk by its name. On my machine, the /dev/disk2 in red rectangle is the disk in system and copy disk2 only (not /dev/disk2) into clipboard.

Unmount the sd card from finder but do not unplug it.

Now, we need flash the image downloaded to sd card. You may need unzip it if the downloaded file is zipped by double click the file in finder. Below is the command to use:

1

sudo dd bs=4M if=<path to downloaded .img file>  of=/dev/r<disk>

Replace the path and <disk> to your own one.

Step 4 Plugin and setup

Now insert the flashed micro sd card to Raspberrypi Zero W and connect everything and you are ready to go.

[Picture]

General Problems

• Resource busy: You need unmount the partitions mounted before you could use dd to write the disk. See above.
• Permission denied: Make sure write protection on your sd card is open. Also use external SD card reader instead of Mac built-in one which could cause this issue.
• Operation not permitted: Make sure your device exists in system (check /dev/diskN)

This blog will go through how to change the location of screenshots to another folder.

Step 1 Create a folder

Create a new folder anywhere using finder or terminal. Here I created blog_statics folder in my Google Drive folder.

Step 2 Change default location of screenshots

Click the created folder in last step and press Command+C to copy the full path to clipboard.

Press Command + Space and type terminal to open terminal

In terminal, type following command:

1

defaults write com.apple.screencapture location <Folder Location>

Note the is the location of your create folder. You could Command+V to paste it from clipboard

It should give following result:

Now all new screenshots should be stored in that place.

Below reference pages were used while doing my study:

• Using webworkers
• webworker and phonegap

1
2
3
4
5
6
7
8
9
10
11
12
13

.select-type-1{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding:1em;
  border:1px solid #ee7122;
  color:white;
  text-align: center;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  background: rgba(255, 255, 255, 0.12) url("../img/arrowdown.png") no-repeat 90% 50%;
  background-size:10%;
}

self-explained.

• a key-value store service: this is used for broadcasting hosts / swarm agents. It can be same kv store swarm used for discovery
• Run docker daemon with following parameters:
  • cluster-store: where the store is
  • cluster-advertise: what network interface to be advertised

    Setup consul KV store

    1 2 3 4 5 6

    docker run -d \ -p "8500:8500" \ -h "consul" \ --restart=unless-stopped \ --name="kv_store"\ progrium/consul -server -bootstrap

Daemon Options

1
2

--engine-opt="cluster-store=consul://$(docker-machine ip mh-keystore):8500"
--engine-opt="cluster-advertise=eth1:2376"

All swarm-agents should have these options otherwise it will be likely get this error:

1

Error response from daemon: 500 Internal Server Error: failed to parse pool request for address space "GlobalDefault" pool "" subpool "": cannot find address space GlobalDefault (most likely the backing datastore is not configured)

Create overlay network

If using docker-compose, there is nothing need to do. As docker-compose will automatically create defaul network if:

• Single host: it will create a bridge
• Multiple host: it will create a overlay

Once docker-compose file finished, just run docker-compose up -d which will create network correspondingly.

otherwise simply use following command at your swarm:

1

docker network create --driver overlay --subnet=10.0.9.0/24 my-net

Docker-compose build on Swarm

There is limitation for docker-compose build as it cannot find the target node to build the image.
The only way currently is to build on the node and tag it rather than on swarm.

1

docker build -t <tag name> path/to/dockerfile

Tools

Unit testing in Angularjs is using (by default) Jasmine and Karma.

Also, angular-mocks needs to be installed. It is needed for injection and some other mock objects.

1

bower install --save angular-mocks

Npm dependencies

Following npm packages are needed and add them as devDependencies:

1
2
3
4
5
6
7

"jasmine-core": "^2.3.4",
"karma": "~0.12",
"karma-chrome-launcher": "^0.1.12",
"karma-firefox-launcher": "^0.1.6",
"karma-jasmine": "^0.3.5",
"karma-junit-reporter": "^0.2.2",
"protractor": "^2.1.0"

karma.conf.js

Configuration for karma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

module.exports = function(config){
  config.set({

    basePath : './',

    files : [
      'www/bower_components/angular/angular.js',
      'www/bower_components/angular-ui-router/release/angular-ui-router.js',
      'www/bower_components/angular-mocks/angular-mocks.js',
      'www/bower_components/jquery/dist/jquery.js',
      //all other lib dependencies
      'www/app.gen.js', // app js file <- generated by browserfi
      'www/app/**/test_*.js' // all tests file
    ],

    autoWatch : true,

    frameworks: ['jasmine'],

    browsers : ['Chrome'],

    plugins : [
            'karma-chrome-launcher',
            'karma-firefox-launcher',
            'karma-jasmine',
            'karma-junit-reporter'
            ],

    junitReporter : {
      outputFile: 'test_out/unit.xml',
      suite: 'unit'
    }

  });
};

Put this file at root of project.

Run test

1. install karma-cli: npm i -g karma-cli
2. run karma start karma.conf.js

This will watch all files and re-run tests if any file changes. Strongly recommended having this opened when developing.

Unit tests for angular.js

Once above setup are done, it is ready to write unit tests.

Simple example

Add test_user.js to www/app/user/ folder or similar. Just keep test_ file name prefix.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

describe("user module",function(){
  beforeEach(module('user'));
  describe("auth factory",function(){
    it ("should manage user session",inject(function(auth){
      auth.initUserWithToken("abc");
      expect(auth.getToken().token).toEqual("abc");
      auth.setPin("1234");
      expect(auth.getToken().pin).toEqual("1234");
      expect(auth.validatePin("1234")).toBe(true);
      expect(auth.validatePin("2234")).toBe(false);
      auth.logout();
      expect(auth.validatePin("1234")).toBe(false);
      expect(auth.getToken()).toBe(null);
    }));
  })
});

Above, it first injects user module and then runs simple tests.

Override providers (factory / service)

If component depends on other providers, it’s able to use jasmine.createSpy to create dummy function.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

describe("account module",function(){
  beforeEach(module('account',function($provide){
    $provide.value('server', {
      call: jasmine.createSpy('call'),
      setHeader:jasmine.createSpy('setHeader')
    });
  }));
  describe("account factory",function(){
    it ("should manage accounts",inject(function(account,server){
      account.save();
      expect(server.call).toHaveBeenCalled();  
    }));
  })
});

Use $httpBackend for $http calls

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

describe("downStreamStore",function(){
  var ds,s,ht;
  beforeEach(module("dataSync"))
  beforeEach(inject(function(downStreamStore,server,$httpBackend){
      ds=downStreamStore;
      s=server;
      ht=$httpBackend;
  }))
  afterEach(function() {
       ht.verifyNoOutstandingExpectation();
       ht.verifyNoOutstandingRequest();
     });
  it ("should retrieve data",function(){
    ht.when("GET","/test").respond({"hello":"test"})
    ht.expectGET("/test");
    ds.syncData("test","/test")
    .then(function(){
      expect(ds.get("test").hello).toBe("test");
    })
    .catch(function(e){
      expect(e).toBeUndefined();
    })

    ht.flush();
  });
})

the test above is synchrounous but with promises. Therefore no need use Jasmine async with done;

Quick Reference:

• Jamine
• Karma Config
• Angular Unit Testing
• Angular Seed (Example of Unit Testing)
• Angular $httpBackend

1
2
3
4
5
6
7
8
9
10
11

var schema=new Schema({
  password:{
    type:String,
    required:true,
    set:hash
  }
})

function hash(plainPwd){
  return require("crypto").createHash("sha1").update(plainPwd).update(secret).digest("hex");
}

The hash will be called mainly on following scenarios:

• When a new doc being created.

  1	model.create({password:"12345"}) //password will be hashed

• When set a value to a doc.

  1	doc.password="22222" // 22222 will be hashed

However, this will not work for update query:

1
2
3

model.update({_id:<id>},{$set:{password:"12345"}}) // password will not be hashed
model.findOneAndUpdate
model.findAndUpdate

For password, it is able to write beforeUpdateHook

1
2
3
4
5
6
7
8

schema.methods.beforeUpdateHook=function(data){
  if (!data || this.password === data.password){
    return ;
  }
  if (data.password){
    data.password=hash(data.password);
  }
}