Michael Shogren's Blog

This post has been a while coming because I jumped down a couple of rabbit-holes while working on it. I have concluded that client side stuff is not as bad as it was during the worst days of the browser wars, and I still like angularjs but creating polished rich web applications is still much more difficult than implementing server side business rules. I will have some future posts about what I found down those rabbit-holes but first I wanted to finish this series.

The first step I took to extend the application was to create a new route (this creates a ui-router state with a url) using:

yo angular-fullstack:route thing

I also modified the server side thing API to require the Stormpath login for all operations but GET in this commit.

Next I spent some time thinking about a problem I had with the application design. The MainCtrl controller was currently getting things from the API, where that now seemed to be more correctly the job of the ThingCtrl controller. In addition, the view defined in the main.html template depends on things too. I decided a better solution offered by the ui-router was to use a nested view. Then I changed my mind and decided to use a named view. I encourage you to read all about these concepts on the ui-router wiki. There is a lot there to understand and I am afraid I haven't figured out a way to distill any of that into easily digestible tidbits for this blog yet.

I thought this would be the final post in the series, where I finally got around to adding at least another form to the application. As I was thinking about what need to be done I discovered that there was too much little stuff to be resolved, including the technical debt incurred by using a yeoman generator. I managed to clean up a lot of things working on this post which should make delivering new features to the deployed prototype faster in the future.

The first thing I did was configure social login from Facebook or Google using this as a guide. Things worked relatively well, but I discovered a minor issue with the default login page html template from the Stormpath Angular JS SDK, so I created and called my own modified template. You can have a look at what I did in these two commits:

• Fixing social login html template
• Fix OAuth Scope requested for social login

I am considering submitting a pull request to the Stormpath team to get this fixed. While I was doing these changes I decided it would be easier to switch off the Grunt steps that minify the JavaScript and CSS, so I can use debugging tools even on the deployed application. I did that by simply commenting out some lines in the Gruntfile.js.

Once the tests were working I decided to build a continuous deployment pipeline in Snap-CI which you can view here (Edit: This build was moved to Travis-CI when Snap-CI shutdown. Now this is where you can view it. The first stages run the npm install and bower install commands to get dependencies and then various grunt tasks to run tests and build (minify, etc) the project.

The last step runs grunt buildcontrol which uses configuration from the Gruntfile.js to deploy the built project to a new deploy branch of my repo. The configuration I used in my Gruntfile.js is:

buildcontrol: {
  options: {
    dir: 'dist',
    commit: true,
    push: true,
    connectCommits: false,
    message: 'Built %sourceName% from commit %sourceCommit% on branch %sourceBranch%'
  },
  deploy: {
    options: {
      remote: process.env.SNAP_CI ? 'git@github.com:mshogren/alsl-sandbox1.git' : 'https://github.com/mshogren/alsl-sandbox1.git',
      branch: 'deploy'
    }
  }
},

You can find out more about this task here.