Enable AngularJS HTML5 Mode in Azure Websites

A brand new web application written in Javascript, e.g. AngularJS is often using the hashbang to build URIs which can be processed from the SPA router. These URIs can not be indexed by the most search engine crawlers. Also visitors have problems remembering specific resources.

This problem is addressed by the HTML5Mode of AngularJS or to be more technical by the History-API of the browser. With the HTML5Mode the Angular-App is able to change the browsers URI without performing a full page reload. The following URI

https://example.com/#/contract

becomes

https://example.com/contract

This article describes how to enable the HTML5Mode in an Angular application, including the customization of a development server: http://ericduran.io/2013/05/31/angular-html5Mode-with-yeoman/

Great, but when someone visits the app directly with that URI, the server needs to redirect the request to the index.html page of the application. This fact requires help from the server side normally realized with URL rewriting modules. Microsoft has everything on board to define the needed rules in a web.config as described in this article: http://coderwall.com/p/mycbiq/deep-linking-angularjs-on-windows-azure-iis

Hint: The same method can be used to enforce https when someone is visiting via http, just follow this link: http://stackoverflow.com/questions/9823010/how-to-force-https-using-a-web-config-file

This little changes should help to give your AngualarJS App more visibility in the web.

Deploy AngularJS-Apps to Azure WebSites with Codeship

The Azure Cost Monitor is a SaaS application which is extended and improved frequently. Updates take place several times a week without interrupting end users. This agile approach of software development requires continuous integration and a structured deployment process to keep quality and development on a high level. Written in javascript – nodejs for the backend and angularjs for the frontend – the application is deployed to Azure WebSites, the fully managed web hosting solution of Microsoft.

Azure supports deployment from GitHub which works very well for nodejs applications, but angularjs applications need to be compiled to minify the code and rename the images, what prevents caching issues in the browser. The guys from Codeship are offering one of the best cloud platforms to enable continuous deployment for Azure WebSites and many other services.

This tutorial describes a continuous deployment process for an angularjs application to Azure WebSites, based on Codeship. The source code is hosted in a public GitHub repository and the angularjs app is scaffolded with yeoman.

Step 1: Create your AngularJS application

First of all a new Angular application needs to be created with the following yeoman command:

yo angular

This example uses Sass with Compass and Bootstrap, so this options need to be selected in the creation wizard of yeoman. After creating the application it could make sense to test if everything is generated correctly, by starting the development server with this command:

grunt serve

grunt-wiredep is a grunt task which is responsible for updating all the HTML files and minify the JS/CSS files. This task has an issue in version 1.7.0 so it needs to be updated to version 1.9.0 via package.json. The following line needs to be replaced in the package.json:

“grunt-wiredep”: “^1.7.0”,

to

“grunt-wiredep”: “^1.9.0”,

Last but not least the updated package needs to be installed with

npm install

Bower is the component which is used to install all needed web components. The Codeship sandbox has no bower installed out of the box, so the dependency needs to be added with the following command to the package.json as well:

npm install bower –save-dev

Besides that, the commandline interface for grunt needs to be part of the package.json, so that it becomes installed into the Codeship sandbox:

npm install grunt-cli –save-dev

Step 2: Beam Compass & Sass into the Codship sandbox

YeoMan is using Sass and Compass for modern CSS compilation, so it’s required in the Codeship sandbox as well. All used tools are ruby gems so a simple Gemfile with the following content defines the dependencies:

source “https://rubygems.org”

gem ‘sass’, “3.2.9”
gem ‘sass-globbing’, “>= 1.1.0”
gem ‘compass’, “0.12.2”
gem ‘breakpoint’, “2.0.5”
gem ‘singularitygs’, “< 2.0.0”
gem ‘chunky_png’, “1.3.3”

Alle components need to be installed with the command

bundle install

which generates the Gemfile.lock.

Step 3: Activate the CI build in Codeship

All changes described in the steps above should be commited in a GitHub repository. After that everything is prepared to create a new project in Codeship which is connected to the GitHub repository:

Screen Shot 2014-12-20 at 23.11.09

The following setup commands of the Codeship projects should be entered to install all dependencies and kick off the angular build:

rvm use 1.9.3
bundle install
npm install
bower install
grunt build

All the build output is stored in the dist directory. After all preparation, a simple push to the projects GitHub repository lets Codeship start building your application instantly. The first build takes a little bit longer because Codeship prepares the dependency caches. The second one should be done in about 1:30 minutes.

Step 4: Prepare your Azure WebSite

A new Azure Website needs to be created in the Azure Management Portal. Every Azure WebSite supports different ways to publish content, besides traditional FTP Azure WebSites supports deployment from source control. In the specific case of this tutorial the deployment from source control feature should be set to the option “Local Git Repository”:

Screen Shot 2014-12-20 at 23.13.10

Screen Shot 2014-12-20 at 23.14.12

This means Azure hosts a git repository and everything that is committed into this repository will become active in the Azure Website. After that, the next goal is to let Codeship commit all changes into this repository after every successful build.

Step 5: Bring deployment online

Codeship allows to add a deployment script under the project settings for specific branches. In this sample every committed change from the master branch is deployed. In a production environment the system should only be triggered from a specific deployment branch, e.g. deploy/azure.

The following script deploys the compiled angular app to the Azure Website:

# Config git
git config –global user.email “$GITMAIL”
git config –global user.name “$GITUSER”
# Clone the whole azure repository
cd
git clone $GITREPO azure
# Add the compiled app
cd azure
rm -R -f *
cp -R -f ~/clone/dist/* .
git add -A
git commit -m “Code shipped”
# push to azure
git push origin

Last but not least, all used variables need to be stored as environmental settings in Codeship. This prevents that Codeship prints out sensitive data to the logs and decouples configuration settings from deployment script:

Screen Shot 2014-12-20 at 23.15.09

The GITREPO variable contains the https based git URL from the local git repository of the Azure WebSite. It includes username and password in the URL, e.g.

https://{{user}}:{{password}}@{{website}}.scm.azurewebsites.net:443/{{website}}.git

The deployment credentials can be found in the Azure portal for the Azure website.

Finally a simple push into the Git repository of the project triggers a build via Codeship and a deployment into the right Azure WebSite. Users do not loose access to the SaaS application except for a couple seconds after redeploying when the IIS load the new application.

This fully automated process supports every agile software development process and helps you to focus on making features and not updating servers.

Happy Deploying 🙂

Clear cost control based on service types

The Microsoft Azure Cloud offers many different resources, e.g. virtual machines, cloud services or websites. Some of these resources produce comprehensible costs e.g. virtual machines, but some resources produce costs that are indirect and hard to analyse, like costs for “Data Traffic”, “Visual Studio Online” or “Data Management”.

Screen Shot 2014-12-06 at 12.11.51

To solve this problem and facilitate the cost control, all service types are now visible in the Azure Cost Monitor. The new category for grouping this service types helps to identify the cost drivers in different subscriptions and projects.

Azure Cost management with resource tagging

Starting with Microsoft Azure teams or small departments often begin with one subscription. When time goes by the subscription contains more and more resources without a simple option to migrate them into new project specific subscriptions. Managing costs for this kind of subscription is not easy. Because of that the Azure Cost Monitor now offers a new feature which should really help to stay in control.

The new “Cost Tags” feature is an easy and comfortable way to categorize services. These tags can easily be used to visualize costs per responsible person, department, project or cost center. This allows cost management on a very granular level and aligned to the individual existing organisational structure.

The following screenshots show some best practices:

ScreenProjects
Categorize your services by project groups that are responsible for the costs

ScreenTypes
Categorize your services by resource type, e.g. storage or compute

This should really help to bring more control and transparancy into the Azure EA agreement. If you see any other requirements or needs feel free to drop the idea in our feedback portal.

BTW: As soon as Microsoft Azure delivers the new Azure resource tagging we will allow to mix up our custom tags and the Azure resource tags. There will be no need to do something manually from your side.

Azure Enterprise Agreement: Freedom & cost control

Microsoft offers a very lucrative deal for Azure customers: When your company is willing to do an upfront investment it’s possible to get an enterprise agreement. Besides dramatical price reduction this agreement gives your engineers the freedom to consume azure services as much as they need, the operations team is able to assign subscriptions for every team and your company gets an invoice that is compliant to local financial regulations.

But what about your financial controllers? How can they keep track of the costs to ensure that the the limits are not exceeded?

Here are some best practices that Microsoft offers to partly achieve this:

  1. Check your EA reports on a weekly basis
    Microsoft delivers weekly consumption report that need to be checked on a regular basis. A second important source is the monthly delivered summary e-mail about the monetary commitment balance.
  2. Assign your teams, business units or projects to different subscriptions
    Microsoft allows to create as many subscriptions as needed, this means it’s possible to give every team or project a separate subscription payed from the enterprise agreement. By that access rights and roles can be modelled.

After working with these two options I recognised that not all of my requirements to manage our costs efficiently were totally fulfilled:

  1. Multiple usage of the same service should be cumulated in one report entry.
  2. Analysing costs on subscription level without using a complex pivot table.
  3. Tagging different resources helps to manage multiple projects in a subscription.
  4. Cost-Prediction based on the data of the past months.
  5. Cost-Alerts when specific limits are exceed for enabled EA customers.

So I decided to build a little service based on the Azure platform, called Azure Cost Monitor:

The service is able to process the CSV files from the EA portal and gives a graphical overview including subscription drill down. It is based on modern cloud technologies exclusively e.g. Azure Table Store, Azure WebSites and Azure WebJobs. That’s why the Azure Cost Monitor scales as good as Azure scales and I would like to invite all of you to join this service (https://costs.azurewebsites.net).

login

Login with your existing Azure Account or LiveId. After that enter your EA number to start analysing your data. An useful report about the cost consumption of your subscriptions will be shown. If you don’t want to enter your personal data right now, feel free to check the demo mode by adding the demo EA number:

Screen Shot 2014-10-18 at 21.44.52

I would like to extend this service aligned to the requirements you bring from the field, so please visit the feedback portal of the Azure Cost Monitor and enter your ideas or vote and comment for existing ones.

private bower components, a simple solution

Bower is an amazing solution to bring structure into javascript based projects. Without bower the reusing of components on git repositories would be a mess. During my current project I searched for a solution to integrate private bower based components into my closed source project. All I had was a private git server with the option to create infinite repositories.

 

 

When you google you find many options to setup a separate bower registry which means the backend behind bower. This is very useful if you want to search in a database for a component. This approach also helps bigger organisations to allow everybody to publish a component and the rest of the research and development department should be able to find it.

In our case the situation was more simple. We are a very small team and everybody is able to see our official git repositories on our centralized git server. Only repositories on this server are allowed to be used in customer facing projects. There are many private git repositories but these do not contain public code. Coming from this situation we wanted a solution which comes without an extra server component.

Searching again made me sure that it should be possible to add a git url into the bower.json file. Our git server is configured for the https protocol only and for this just copying the repository url did not work. After checking out the bower code base a solution was on the horizon:

git+https://YOURGITREPO

The important thing here, git+https. This gives the bower code the hint to use the git protocol over http. Just using https:// would not work because bower thinks it’s a http based directory download.

Small teams should be able to work well with this solution, especially when the git server is part of a team management system which contains wiki and document components as well.

Ensure two div-elements will get the same height (jquery solution)

Currently I’m working on a small web application with the requirement to bring the height of two side-by-side div elements on the same level. The content of this two elements are different and the width depends on the browser window. This means the div content floats in the elements and the height depends on the height of the inner content. I tried to find a working solution based on CSS only. At the end I want to share a jquery based solution which works well for me

  1. The following markup can be found in many web apps
    https://gist.github.com/3965331/77a38858b214ae71c2cf521fa3ee0c0048e1bca8
  2. First I added  jquery and code to identify the div with the maximum height. After that this height will be set at the second div element as well
    https://gist.github.com/3965331/1fbbfbbd2a3116ad48ed03f874695d9bfb4d7589
  3. Finally moving out the code into a separate function helps to reuse this code in other apps as well. It could als be a good idea to build a small jquery plugin
    https://gist.github.com/3965331/81308dec45be018cd4f29220460ee6f770fa5005

 

 

HockeyApp your Rails App

I’m an excited user of HockeyApp and we are really successfully with collecting crash dumps and deploying our apps to beta users. Since I’m working on different rails backends I’m wondering why not using the same infrastructure for collection crash dumps as well. Based on the amazing airbrake gem I was able to hack an extension which redirect the crash report directly to HockeyApp. Check this out and feel free to give feedback, open issues or fork the project:

https://github.com/dei79/hockeybrake

Happy to get feedback 🙂

git-tf for Homebrew

A couple weeks ago Microsoft released a tool chain called git-tf. It’s a great working git-TFS bridge which is working much better then the old SVN-Bridge. The best at all now active component on the TFS server needs to be installed. Check out the blog comment and the project on codeplex:

http://gittf.codeplex.com/

http://www.infoq.com/news/2012/08/git-tf_oss

I’m using this tool for our MAC OS X Development and it’s awesome. To simplify the setup of this java based implementation I created a Homebrew Formula and created a pull request for merging  into the master. Cross the fingers and vote for it 🙂

https://github.com/mxcl/homebrew/pull/14423

If you want to use my fork in your brew installation pleas use the following command line

cd `brew --prefix`
git remote add git-tf-fork https://github.com/dei79/homebrew.git
git pull git-tf-fork master
brew install git-tf

Comments and contributions to this Homebrow Formula ar welcome