15 February 2017 - Upkar Lidder Open Issue

The new Bluemix Devops site provides the following enhancements:
1. Toolchains that easily integrate the latest tools such as Slack, Sauce Labs, PagerDuty, and others.
2. DevOps Insights analytics
3. Delivery Pipeline
4. WebIDE based on Eclipse Orion

Requirements

  1. Sign up for Bluemix

  2. Download Cloud Foundry command line interface (CLI) tools

  3. Deployed sample site code, you can fork here, or your own code on github.com

Create devops toolchain on Bluemix

  1. Log into the new IBM Bluemix devops site
    ![Create Application]
    (../../img/bluemix-devops-simple/bluemix-devops-login.jpg)

  2. Create and configure a new toolchain

    ![Create and configure a new toolchain]
    (../../img/bluemix-devops-simple/bluemix-devops-create-toolchain.jpg)

  3. Pick Simple Cloud Foundry toolchain and then give it a name. I picked the same name as my github project - upkar-github-static-site-toolchain.

    ![Create and configure a new toolchain]
    (../../img/bluemix-devops-simple/bluemix-devops-name-toolchain.jpg)

When you click create, it takes you to the github section. It is easy to miss this. If you don't configure it here, you will get an error in the next step. I have steps on how to fix this next.

Configure github account

  1. At this point, you will be taken to the dashboard on IBM Bluemix Devops site

    IBM devops defines the simplest devops as CODE -> DELIVER -> LEARN
    1. CODE -> this is where you write your application code. This stage needs to somehow kick off the Deliver stage. This can happen via a push or pull request on github or directly from Eclipse Web IDE.
    2. DELIVER -> this is the actual build of the app. There a number of things that happen here. You can customize this stage by modifing the steps as well as changing the scripts for each step. More detail below.
    3. LEARN -> this is where you as a developer can gather some insights about your application that can be used to improve the application for the end clients.

    IBM follows the IBM Bluemix Garage Methodology, which consists of the following pieces. this artcile is not a good place to go through each step in detail, but I encourage you to read it on their site.

    ![Create Application]
    (../../img/bluemix-devops-simple/bluemix-garage-learn.jpg)

  2. If you get an error with github, you probably need to correct the git repo url in the code step

    ![Create Application]
    (../../img/bluemix-devops-simple/bluemix-devops-dashboard-1.jpg)

  3. Click on the menu on github state and select configure. Enter the right url in the Source repository URL field. You can either do clone or existing. I picked existing as this is my own repository and I have access. I would have picked clone if I was building somebody else's project.

    ![Create Application]
    (../../img/bluemix-devops-simple/bluemix-devops-configure-github.jpg)

  4. Click on save integration and the error should go away.

    ![Create Application]
    (../../img/bluemix-devops-simple/bluemix-devops-dashboard-1.jpg)

  5. Now, let's try a manual build. Click on Deliver stage to open it. A build has already and ran for you. If so, you may notice that it is failing. If not, move to step 11. If the build is failing, this could happen because github did not configure properly or because you chose clone. This created a test job in the build step which requires grunt.

    ![Create Application]
    (../../img/bluemix-devops-simple/bluemix-devops-build-stage-fail.jpg)

  6. You can click on view logs and history to see what went wrong

    
    Cloning the 'master' branch from repo 'https://github.com/lidderupk/upkar-github-static-site-toolchain.git'
    Repository successfully cloned
    express@4.13.4 node_modules/express
    ├── escape-html@1.0.3
    ├── array-flatten@1.1.1
    ├── cookie-signature@1.0.6
    ├── utils-merge@1.0.0
    ├── merge-descriptors@1.0.1
    ├── vary@1.0.1
    ├── methods@1.1.2
    ├── content-type@1.0.2
    ├── cookie@0.1.5
    ├── fresh@0.3.0
    ├── content-disposition@0.5.1
    ├── parseurl@1.3.1
    ├── range-parser@1.0.3
    ├── etag@1.7.0
    ├── path-to-regexp@0.1.7
    ├── depd@1.1.0
    ├── qs@4.0.0
    ├── on-finished@2.3.0 (ee-first@1.1.1)
    ├── finalhandler@0.4.1 (unpipe@1.0.0)
    ├── debug@2.2.0 (ms@0.7.1)
    ├── proxy-addr@1.0.10 (forwarded@0.1.0, ipaddr.js@1.0.5)
    ├── send@0.13.1 (destroy@1.0.4, statuses@1.2.1, ms@0.7.1, mime@1.3.4, http-errors@1.3.1)
    ├── accepts@1.2.13 (negotiator@0.5.3, mime-types@2.1.14)
    ├── type-is@1.6.14 (media-typer@0.3.0, mime-types@2.1.14)
    └── serve-static@1.10.3 (send@0.13.2)
    

    cfenv@1.0.4 node_modules/cfenv
    ├── ports@1.1.0
    ├── underscore@1.8.3
    └── js-yaml@3.7.0 (esprima@2.7.3, argparse@1.0.9)
    grunt-cli: The grunt command line interface. (v0.1.13)

    Fatal error: Unable to find local grunt.

    If you're seeing this message, either a Gruntfile wasn't found or grunt
    hasn't been installed locally to your project. For more information about
    installing and configuring grunt, please see the Getting Started guide:

    http://gruntjs.com/getting-started

    Finished: ERRORED

  7. Ah, the devops is looking for a grunt file, but we also used Bluemix to create the project, so either IBM boiler plate should have a gruntfile by default or remove this requirement from devops. You can do one of the following to fix this error

    1. Add a gruntfile with a dev-setup task. This is the task the build script is looking for

      
          #!/bin/bash
          export PATH=/opt/IBM/node-v4.2/bin:$PATH
          npm install
          grunt dev-setup --no-color
      
      
    2. You can remove this script from the build tool. This is what I am going to do here. Change to the following and save the step

      
          #!/bin/bash
          export PATH=/opt/IBM/node-v4.2/bin:$PATH
          npm install
      
      
  8. Click on play button on the build card to restart the build

    ![Create Application]
    (../../img/bluemix-devops-simple/bluemix-devops-build-running.jpg)

  9. The build fails again if you have a test component.

    1. It is the same problem. The devops default script uses grunt to test the application as part of the build. This is a good practice. But our boilerplate from last post does not depend on grunt.

      ![Create Application]
      (../../img/bluemix-devops-simple/bluemix-devops-grunt-fail.jpg)

    2. This time, let's remove the test job from the BUILD step. Make sure you save the step after deleting the job.

      ![Create Application]
      (../../img/bluemix-devops-simple/bluemix-devops-grunt-remove.jpg)

  10. Click on play button on the build card to restart the build

    ![Create Application]
    (../../img/bluemix-devops-simple/bluemix-devops-build-running.jpg)

  11. If all goes well, the build should pass.

    ![Create Application]
    (../../img/bluemix-devops-simple/bluemix-devops-dashboard-pass.jpg)

  12. Yay ! So now what? Let's try pushing something to github and see if the build is kicked. I am going to change a simple line in the index file. Here is the git diff

        
            $ git diff public/index.html 
                diff --git a/public/index.html b/public/index.html
                index c1b9119..d8f1da9 100755
                --- a/public/index.html
                +++ b/public/index.html            
                -          

    Thanks for creating a NodeJS Starter Application. +

    Thanks for creating a Welcome to my NodeJS static application - Upkar.
  13. Push to github master and this should push the next build.

        
            git add .
            git commit -am 'changing file to force build'
            git push origin master
        
    
  14. Remember from last screenshot, the build was Build1. Now it is Build2. Also the tool displays the correct last commit message !

    ![Create Application]
    (../../img/bluemix-devops-simple/bluemix-devops-build2-pass.jpg)

Open Issue

Back home