Cloud Recipes: Building a Facebook Canvas App using Azure and BitBucket

Welcome to the first official entry into Tech-Rash's Cloud Recipes. Cloud Recipes, I hope, will became a useful reference for cool things you can do on the Cloud in thirty minutes our under.

This Cloud Recipe has been shamelessly ripped off a talk given by Richard Conway from ElastaCloud who runs the UK Windows Azure User Group. In the talk he demonstrated setting up a Facebook application in 15 minutes based on a new .Net 4 MVC Facebook Template provided in the ASP.Net Fall 2012 Update. He used BitBucket as a Source Repository and rigged up an Azure Website to Auto-publish from the BitBucket Repo. I gave it a go and to see if I could achieve in 15 minutes and I failed but did learn a valuable lesson that churning out Facebook Apps can be a very quick process.


To complete this recipe you need:

• A Microsoft Azure Subscription - sign up for a three month free trial here.
• A Bit Bucket Account - sign up for a free account here
• Git  
• The .Net framework 4 or above
• The ASP.Net Fall Update - download here
• A Walkthrough for using the new template is available here
• The Azure SDK 1.8 and all the goodies 
• Visual Studio IDE 2012
• A steely outlook on life

Create BitBucket Repository

To get started, create a new BitBucket repository. 

1. Create a Private Git BitBucket Repository
2. Initialise a local Git Repository locally and add to BitBucket
1. Create a local directory e.g. C:\Code\MyFirstAzureFacebookApplication
2. Initialise a local git repository in that directory. GitBash > git init
3. Add repository to BitBucket Remote reposititory. GitBash > git remote add origin {url to git repo} * Note you can get these commands from BitBucket

Create Facebook MVC Project

Next, you need to create an ASP.Net MVC 4 web application using the new Facebook Application template. 

1. Create ASP.Net MVC 4 Web Site (not cloud service)
2. Select Facebook Template
3. Save into your local Git repostitory folder (C:\Code\MyFirstAzureFacebookApplication)
4. Push changes up to BitBucket Respository 

Create Azure Web Site

Next, you need to create a new Azure Web Site and setup and configure Automated deployment from your BitBucket repository. 

1. Log onto azure management portal http://windows.azure.com 
2. Create a new Web Site and view the web site dashboard.
3. Click "Set up Git publishing". An azure Git Repository will be created
4. Click "Deploy from my Bitbucket Repository", Associate your BitBucket Repository and select the Repository you created in BitBucket.
5. Authorise BitBucket and select Repo.
6. Make a note of site URL  {AzureWebSiteUrl}

Create Facebook App

Now the main pieces are in place, you need to Create a Facebook Application in Facebook and configure your project with the Facebook Settings.

1. Log into https://developers.facebook.com/apps 
2. Create a new App
1. Namespace
2. Contact Email
3. For Dev only
1. Enable Sandbox mode
2. Canvas Url {AzureWebSiteUrl}
4. For Live
5. Disable Sandbox Mode
6. Add HTTP and HTTPS Canvas URl  {AzureWebSiteUrl}

Add Facebook Settings to WebSite

No that your Facebook App is configured in Facebook, you need to copy the OAuth 2 Consumer Secret across to your app in Web.Config.

1. Copy Facebook App Id, App Secret, App Namespace, Realtime Callback Url into Web.Config
2. Push changes to BitBucket

All Done!

That's it. Once your changes are pushed to BitBucket, Azure will automatically pull in the latest code, build and deploy to your Azure Web site.

You can now start adding functionality to your app such as:

• Exploring all the types of permissions that can be granted by the user to your web site.
• Adding Business Logic
• Storing Data using SQL Azure, NoSQL or Table Storage.
• Using the Facebook C# API to make Graph API Calls

Happy baking.