Switching to Azure MySQL In-App from ClearDB

When I first moved my blog to Azure, there is no MySQL provided by Azure themselves, but from their partner ClearDB. But now since Microsoft already announced that they are providing Azure MySQL In-App server, though it is still in preview, I’m switching to Azure MySQL In-App, away from ClearDB.

The reason why I’m moving away from ClearDB is not because it is expensive, for my use case it is very affordable, I’m moving away because even with my Azure credit, I still have to pay for the service separately, making me not able to fully utilize my credit.



Install Let’s Encrypt in Azure

Azure’s App Service Plan D1 (Shared) doesn’t allow to use SSL and SNI, so after changed the plan to Basic B1, that support SSL, and now I can install Let’s Encrypt and use it for my blog.

However to setup everything needed for Let’s Encrypt to work and automate the process is tedious, but luckily for the this extension, stuff is easier (read easier, still not as easy as few button clicks). To get the started, get the extension.

Install Azure Let’s Encrypt Extension

Let's Encrypt Azure extension browser

Let’s Encrypt Azure Extension

Create Table Storage Account

The extension requires uses Azure Web Jobs and it require table storage to work with.

Azure Marketplace Storage Account

Azure Marketplace Storage Account

It’s easy to locate, just search in the marketplace.

Azure Storage Account creation

Azure Storage Account creation

Fill in the usual suspect. Once it’s created, we need to locate the key so that we can set it in our application settings.

Storage account access key

Storage Account Access Key

We can locate both storage account name (it’s the one we fill in when creating the account) and key in the Settings > Access keys section.

Azure Application Settings Storage Key

Azure Application Settings Storage Key

Create 2 keys, AzureWebJobsStorage and AzureWebJobsDashboard, and fill both keys with the same value of DefaultEndpointsProtocol=https;AccountName={storage account name};AccountKey={storage account key}.

Creating Service Principal

We required to create service principal so that the extension can install and update the certificate. They are PowerShell Azure Module around, since I do not have PowerShell on my machine, so I opt for using Azure CLI to configure my Azure. They are couple of ways to install it, I chosen the npm version.

1. Installing Azure CLI

Pretty straight forward, just do npm install -g azure-cli and we’re done.

2. Login to Azure

In terminal, do azure login, you will be given a link and a code, open the link in browser and key in the code, and it will login from the terminal.

3. Create AD application

Run the following in terminal azure ad app create -n {your new application name} --home-page {url for homepage, I put my home page url here} --identifier-uris {identifier uri} -p {long and strong password here}

After the command is finished, we’ll received status like this:

info:    Executing command ad app create

+ Creating application MyAppName

data:    AppId:                   11111111-1111-1111-1111-111111111111

data:    ObjectId:               11111111-2222-3333-4444-555555555555

data:    DisplayName:       MyAppName

data:    IdentifierUris:          0=http://www.myidentifier.com

data:    ReplyUrls:

data:    AvailableToOtherTenants: False

data:    HomePage:                http://www.stephensaw.me

info:    ad app create command OK

4. Create Service Principal

From previous command’s output, we can get the AppId, we’ll need it for this command. azure ad sp create -a {AppId from previous command}. After running this command we’ll receive another status something like this:

info:    Executing command ad sp create

+ Creating service principal for application 11111111-1111-1111-1111-111111111111

data:    Object Id:               22222222-2222-2222-2222-222222222222

data:    Display Name:            isawsomething

data:    Service Principal Names:

data:                             11111111-1111-1111-1111-111111111111

info:    ad sp create command OK

We need to note down the

5. Assign Contributor role to the Service Principal

With the ObjectId we get from previous command output, execute this azure role assignment create --objectId {object id given by previous command} -o Contributor -c /subscriptions/{azure subscription id}/.

Configure Azure Let’s Encrypt Extension

We’re almost there, now we only left the simple part. Go to the extension’s configuration page via opening in SCM site or clicking browse from the installed extension.

Browse Azure Let's Encrypt Extension's page

Azure Let’s Encrypt Extension Browse

We’ll see some configuration details and their explanation from the extension’s page.

Let's Encrypt Extension page details

Let’s Encrypt Extension Page Details

When we’re ready to configure, scroll to the bottom of the page and fill in the related.

Azure Let's Encrypt configuration page

Azure Let’s Encrypt Configuration

The Tenant is the *.onmicrosoft.com value. To get that, in Azure portal, click on the logged in user on top right corner, or mouse hover to review more information in a tooltip.

Azure user menu

Azure Tenant Menu

The ClientId is the AppId we get when we execute the azure ad app create command, while the ClientSecret is the password we key in when execute the azure ad app create.

Request for Certificate

After configured the extension, we finally get to last page before we can request certificate.

Azure Let's Encrypt custom domain list

Azure Let’s Encrypt Custom Domains

Clicking the Next button will bring us to the request certificate page.

Azure Let's Encrypt request certificate

Azure Let’s Encrypt Request Ceritifcate

Of course, we’ll need to have our custom domain for that. Clicking that last blue button Request and Install certificate and wait to reap the result of our hardwork.

SSL Configured

SSL Configured

We can see that our certificate been configured.

HTTPS lock on address bar

Sweet HTTPS Lock


Source: could not done it without reading this helpful tutorial.


How to Transfer Azure Subscription to Another Account

Recently I need to transfer Azure subscription from one of my account to another one. I was using Developer Program Benefit subscription for my blog for quite some times, until recently, I just realized that I have another subscription from another Microsoft Account, so I decided to transfer that subscription to my current account, having one subscription to maintain is easier.

But my problem is that my Visual Studio Enterprise subscription was with my other Microsoft account, and I don’t want to migrate my blog over to that account, so I decided to just transfer the subscription over.

While I can’t find the link to trigger the transfer, so I log a ticket with the support to ask about how to transfer Azure subscription. The support called me all over the U.S in 2 hours, and help me through the process. It was pretty straight forward, I just need to reply the email sent by the support to both of my email address, to approve the transfer, and it’s done within an hour.

After I got my Visual Studio Enterprise subscription transferred over, it is time for me to switch my resources in Azure to the new subscription, it is quite straight forward.



SharePoint sp.taxonomy.js Term.getTerms not Working

A while back I worked on a small library with the SharePoint Online’s taxonomy, building the tree structure, and filtering the taxonomy data from SharePoint using JavaScript.

While most of the information can be found at SP.Taxonomy.js namespace in MSDN and many resources online. But I’m struggling with one particular method of Term, according to the MSDN, the function to search for a term under a term will be

SP.Taxonomy.Term.getTerms(termLabel, lcid, defaultLabelOnly, stringMatchOption, resultCollectionSize, trimUnavailable)

This is different than searching for a term under the term store or term set level, which need to use the SP.Taxonomy.LabelMatchInformation for the request. So the code for searching for term in a term will look something like this:



404 Page Not Found After Migrate WordPress Database

Recently I lost my local WordPress development environment, so I need to get the copy from my server, I still have WordPress source files, so I just need to FTP back my themes folder and export the whole database in SQL file.

After I get the SQL file, I open the SQL file in text editor and replace all the server domain to my local domain, e.g. changing www.stephensaw.me to stephensaw.local. Then run the SQL on my local database to restore it, it works great, can access to stephensaw.local without problem, can access to admin, the site URL in admin also correct.




Set Initial View in Xcode 6

I was playing with Xcode 6 and messed up all the views in storyboard, so I’ve decided to delete all the view and drag in new view controller, and I wasn’t able to run the app because it can’t find the initial view. Previously I’ve learned that I can set which view to be initial view by dragging the starting point arrow, but since I dont’ have anything on my storyboard, that arrow was gone, even after I dragged in the new view controller

To get the starting point arrow back:

xcode 6.1 set initial view

  1. Click the view controller on storyboard.
  2. On the Attributes Inspector (on the right pane), under View Controller section, check the Is Initial View Controller box right under the Title box.

That’s it, two steps.

Note to myself: Next time look properly.


Google Chrome DevTools Source Maps

Google Chrome DevTools is getting better and better everyday, ridiculously fast performance with their Blink and V8, and they just got better with their DevTools. What I just found out recently was, editing source code right on the Chrome DevTools using source mapping.

Source Maps

To verify is source maps is turn on, go to the setting gear icon on DevTools, and then verify the Source Maps option are checked.



Simple Workflow Improvement with Sublime Text 2

Sublime Text 2 is a simple looking yet it is a very powerful editor, with the package system and keyboard shortcut, it mades writing codes fast and simpler. Here are some tips and tricks to improve our daily workflow a bit, I’m using Sublime Text 2 here because I found some plugin is not working properly on Sublime Text 3.

Install Package Control

First thing first when using Sublime Text is, install the package control. Head over to https://sublime.wbond.net/installation#st2, copy the long string and paste it into the Sublime Text console.



Creating Snippet in Visual Studio

There are times where we need to type out some skeleton codes, and if we smart enough, we copy it from existing one and change some variable, what if we can use shortcut to insert that skeleton codes, and using tab to change all the variable we needed to change?

To do this in Visual Studio (I’m using Visual Studio 2012)

Creating Snippet File

[cc lang=”xml” escaped=”true”]

<CodeSnippet Format=”1.1.0″ xmlns=”http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet”>

<Author>Stephen Saw</Author>
<Description>Code snippet QUnit test</Description>
<ToolTip>Class name for the testing class</ToolTip>
<ToolTip>Function name for the testing funciton</ToolTip>
<ToolTip>Description for the current test</ToolTip>
<ToolTip>Setup statement</ToolTip>
<ToolTip>Call the function</ToolTip>
<ToolTip>Assert for the test</ToolTip>
<Code Language=”JavaScript”>
test(“$ClassName$_$FunctionName$___$TestDescription$”, function () {




This is the snippet for QUnit test. The key here is the Literal, we can define ‘token’ that we want Visual Studio to tab into, so that we can quick change those ‘token’.

The ID in the Literal should be matched with the one we define in the <Code>, by wrapping the text with $ sign, e.g. $ClassName$. Visual Studio will pick this up and allow us to use tab to jump into the token.

Save the xml file as *.snippet in Visual Studio’s snippet folder. E.g. C:\Users\Stephen\Documents\Visual Studio 2012\Code Snippets\JavaScript\My Code Snippets

On Visual Studio, the default shortcut to call the snippet is Ctrl+K, Ctrl+X, then you can select from there:Snippet Selector

Then after select the snippet:


Then we can use tab to jump through those highlighted text and do modification, no mouse or arrow key required, we can press Esc to cancel off this anytime.