Spur

Scott Hanselman & I created our imaginary startup HanselJosh and the first thing we did was to get DevOps going on Day 0.  Here is your 15 mins look on how to get your DevOps rolling by creating a new team Project, a web site with SQL database backing it, setting up continuous integration from a Git repository, coding within Visual Studio using ASP.NET and then browsing the deployed code in the new Azure portal.

Areas covered in this video:

Creating a new Team Project after choosing version control, process template, etc.

Create a web site + SQL and configure it

Create new database and configure it

Open the repository in Visual Studio from the new Azure Portal

Clone the repository using the Git integration in Visual Studio

Create a new ASP.NET web site

Set up continuous deployment/integration

Commit and sync the project to Azure

Browse the deployed code

Useful topics and links:

The Azure Preview Portal – Tour and learn more about the Azure portal.

Related Videos:

Overview of the new Azure Portal with Vishal Joshi

Nathan & I got an opportunity to join Chris on Cloud Cover show to discuss how to make building cloud based apps easier using Azure resource manager, Visual Studio Online and Azure portal.  We also talked about dashboards, Resource Groups, Journeys, Continuous Deployment, Visual Studio Online integration, Analytics, Monitoring, Hosting Plans, Billing etc. Hope you find it useful!

Useful links from the show:

The Azure Preview Portal

  Brad Olenick and I had a chance to sync with Cory about how we built the new Microsoft Azure Preview Portal. During this show we dig into the reasoning behind the new portal, what it is build with under the covers and the design decisions made along the way. This show actually contains early mocks of the portal, some point in time screenshots and other fun exclusive content hope you will enjoy it.

Technologies Used

ASP.NET Web API

HTML

LESS (CSS pre-processor) 

TypeScript (JavaScript superset)

Knockout

D3.js

In this Azure Friday video, Scott Hanselman and I dig into the new Azure Portal and explore how best to save money and be aware of your bill and resources. Areas covered in this video:

Azure Portal

Billing Hub

Subscriptions

Cost by resource

Dashboard

Useful topics and posts:

The Azure Preview Portal

Introducing Web Hosting Plans for Azure Web Sites

Visual Studio Online Integration in the Azure portal

Related Videos:

Overview of the new Azure Portal with Vishal Joshi

In this Azure Friday episode, I give a tour around the new Azure portal to Scott Hanselman.  We will talk about blades, hubs, journeys, lenses and more. Areas covered in this video:

Azure Portal

Azure hubs, blades, lenses, journeys

Customizing the Azure UI

Azure console

Azure templates

Useful topics and posts:

The Azure Preview Portal

Introducing Web Hosting Plans for Azure Web Sites

Visual Studio Online Integration in the Azure portal

Related Videos:

Exploring the New Azure Portal

On June 6th we released Windows Azure Web Sites, which is a rock solid and scalable way to host your .NET, PHP or Node.js websites. You can deploy to Azure Web Sites using Git. You can learn about that and many other Windows Azure Web Site features in this introductory video that I recently did for our Windows Server 2012 launch event. When you set-up Git publishing in Azure we create backend Git repo using our OSS project Kudu. You can then use this repos’ Git URL to happily git push azure master. Needless to say this option is still available to you. In addition, today we are taking the Git deployment features to the next level by enabling direct service integrations with CodePlex and Github. Many customers have been asking that instead of having to push to azure directly every time, wouldn’t it be nice if you and your team could simply continue pushing to CodePlex/Github and then behind the scenes Azure could wake up and take the latest commits from your central source repo and update the site. Well, I am glad to let you know that this is feasible now. In this post I am going to focus on showing you how to take your website source code hosted in Github and hook up deployment of the sources to Windows Azure in a continuous deployment fashion. I am hoping to make this into a guided step by step walkthrough with minimal expectation of pre-requisites so hopefully you can follow along and have a great experience along the way. If you prefer video over a walkthrough then checkout Enabling Continuous Deployment with Windows Azure Websites and Github To start you will need following 100% FREE pre-requisites. Required · You need to have an account on https://Github.com/ · You need to have Git on your machine. To get Git on your machine follow the instructions here · You need to have a Windows Azure Account. If not then get one for free here!! Recommended · I will use node.js during the walkthrough but this will work even if you want to use PHP or ASP.NET. You can have a clean machine and we will do the required setups along the way. · I will be using the free web development tool - WebMatrix, which will facilitate set-up of node.js if required. If you have not already, install WebMatrix 2 from here. · I will be using SSH based push to Github. If you want to use SSH then learn how to generate & use SSH keys for Github. Alternatively, you can ignore SSH part and use HTTPS and still follow along the walkthrough below. · Learn about Windows Azure Web Sites via video or article. With pre-requisites behind us let us get started.

Step 1 – Find web site sources hosted on Github which you want to deploy to Azure

I am going to use the ExpressStarter site which Justin Beckwith on our team wrote. I just made a fork to the site for demo purposes. Notice the highlighted “Fork” button, click it and you will get your own copy of the ExpressStarter template. Once you fork it you will get both SSH and HTTP end points to your git repo. My URL looks like below HTTPS: https://Github.com/VishalRJoshi/ExpressStarter.git SSH: [email protected]:VishalRJoshi/ExpressStarter.git I will be using these repo urls in the follow up steps:

Step 2 – Clone the Github repo locally on your machine

Open command prompt on your machine and navigate to a folder in which you would like to create the site. In my case I have navigated to C:\demos\GithubHooks. Now just type the command git clone URL Since I am using SSH my command is going look like below: Once the clone is complete the command prompt should look like:

Step 3 – Make a quick change locally and push to Github

I am going to use WebMatrix for making the change especially because it supports bunch of node.js features. You can get WebMatrix 2 for free from http://webmatrix.com Note: WebMatrix is not supported on Mac so if you are on Mac please use any other text editor that you would like and skip the WebMatrix steps: Once you open WebMatrix it should look like below: Click “Open Site” à “Folder as Site” and navigate to the folder “ExpressStarter” under the directory where you ran the git clone command: Hitting “Select Folder” will trigger WebMatrix to identify your site to be node.js site as below: Hit “Continue” and you will be presented with a EULA screen like below. Accept the EULA and at this point if you do not have node.js/npm/iisnode installed on your machine WebMatrix is going to install it for you. You should see a progress screen like below: And once all the installation is complete you should be able to run you site locally by hitting the “Run” button in the WebMatrix ribbon. If for any reason you see your browser saying something like below, please email me at [email protected] or send a tweet @vishalrjoshi. Ideally, you will not get the screen above and your running site should look as below: Now, Let us now make a quick change. Click on the “Files” workspace at the left bottom corner of WebMatrix Now expand the treeview to layout.jade and make the quick change from “Your logo here” to something like “My Awesome Github Site” You can hit the run button and see the change locally on the new node.js site if you like. With that, we are ready to push this change back to Github. Let us go back to the command prompt First change the directory to “ExpressStarter” as you will be one level above as shown below: Next type the command git status. This will tell you what all files have been modified by you locally. Your git status command should show only one file changed Now we want to commit this change to our local git repository. To do this we will type type the command git commit –am “My Awesome Github Site” Now that our change is committed locally we are going to push the change up to Github. To do that we simply have to type git push origin master Since I am using SSH keys I will not be asked for any password, but if you are using HTTPS then you might have to type your Github password at this point. Nevertheless the result should be as below: If we now go and check the Commit history on my repo in Github it should show something like: At this point you have a working local site with a local git repo. You have also remote central git repo in Github. You are also able to make changes locally and push them to Github. You can also authorize other developers in your team to this Github repository and they too can push their local changes to Github. Our next goal here is to keep your workflow with Github exactly the same but in the process of pushing to Github we also want to be able to have the site up and running in Windows Azure. Do note so far we did not have Windows Azure in picture at all but now let’s set that up next.

Step 4 – Create a new site in Windows Azure

By now I assume you already have a free Azure account created, if not, create one here!! Once you have the account click on “Portal” button near top right of http://windowsazure.com Now click on “+” icon on the bottom left of your Portal and you should get the below screen. Select Compute à Web Site à Quick Create and name your site something unique. You can choose the region and subscription of your choice. If you are using the free trial subscription than that is what will be selected by default. Now hit “Create Web Site” and wait for a few seconds. Your site should get running soon.

Step 5 – Enable Git Publishing for the new site

Next step is to enable “Git Publishing” for your new Azure site. To do that click on the site above to visit the dashboard and click “Setup Git Publishing” This should show you some progress message and then land you on the below screen: Open the flap which says “Deploy from my Github project” which should have the link “Authorize Windows Azure” as shown below: Clicking the “Authorize Windows Azure” to your Github repository will launch a wizard which will set up service hook in Github. Let us follow the Wizard.

Step 6 – Follow the Wizard for hooking up your Github repo with your Azure site

First the Wizard will launch Github UI for you to log into. Just log-in with your Github credentials On successful sign-in it will ask you to Authorize Windows Azure on Github like below: Click “Allow”. Doing so will take you to the below screen stating “Authorization succeeded” and listing all the repos that you have access to in your Github account. Select the ExpressStarter project that we have been checking into in Step 3 and click the “check” button. Within few seconds your Azure portal screen should show “Deployment progress” as below: This is a moment to pause again and think what just happened. What Windows Azure did was to use the authorization that you gave via oAuth wizard to access Github API to first list your projects for you. Once you picked your project then it went and setup a service hook. If you are really curious got to Github to your repository and click “Admin” as shown below Then on the admin page you will see Service Hooks and Webhook Urls (1). That URL is essentially the URL to your Azure Kudu Service which will be called by Github when there will be a push done on your Git repo within Github. As soon as Kudu Service receives a call from your Github account it wakes and pulls the latest commits from Github repo into the Azure repo. Currently we support only public repos to pull from but we are working on a solution to pull even from private Github repos over next few weeks. Once Azure repo gets a commit the usual flow of Azure deployment triggers which includes fetching npm packages in case of node, doing build in case of ASP.NET etc. And you see the deployment progress that you see above. Sometimes it might take time for the deployment progress to show, considering you now know what all happens behind the scene, please be patient, it will show up soon.

Step 7 – Check out your first auto deployment

Soon the deployment will be complete and you can see your first active deployment as shown below: At the bottom of your Azure portal you will always see a black bar, which we call as command bar. It should have a browse button as shown below: Click the “Browse” button and see your site launch live on Azure. Hopefully you are happy as I am J well now let us go and make one more change to our local site.

Step 8 – Make another change locally and push back to Github

Go to WebMatrix and in the same layout.jade file make one more change. I am this time saying “My Awesome Azure Site” and hit “Save” Rest of the deal is same as Step 3 above so I will avoid the repeat screenshots for most but the steps in command prompt essentially are: git status git commit –am “My Awesome Azure Site” Now that the change it done it is time to see push the change to Github.

Step 9 – Check out your change go live on Azure

Just to see the awesome UI integration, I recommend you have your Azure portal side by side to your command window as you hit enter on the next command: git push origin master As soon as the git push completes you will see the Azure portal “Deployments” tab wake up and very soon you will have your second deployment Now browse the site and notice that your second change has gone live as below:

Step 10 – Rollback to the first change with ease

For most part we are done but it is worth doing one last fun thing. Select the previous deployment and notice that in the command bar below you will have a “Redeploy” button as shown below: Click that and you will be asked for a confirmation like: Click “Yes” see the re-deploy kick in and notice that your “Active Deployment” changes within seconds On browsing the site you will see that you are back to previous deployment

Conclusion

On June 6th, I announced  RC version of WebMatrix 2.   I highly encourage you to read the post Announcing WebMatrix 2 RC as it covers most of the new features that we are releasing.

I also encourage you to visit www.webmatrix.com which has tons of user documentation.

Since the June RC release we primarily focused on getting polish on the product and as part of this post I am hoping to highlight the key changes since WebMatrix 2 RC.  This post is not intended to be flashy but hopefully will give you an understanding of the effort that the team took in taking WebMatrix 2 from RC to RTM.

In last few weeks we have worked to make WebMatrix 2 available in 14 languages below:

English Italian Czech German Korean Polish Japanese Russian Port-Brazil French Chinese-Simplified Turkish Spanish Chinese-Traditional  

The goal for the RTW release was not to add a ton of new features but to actually make only targeted changes to make your experience with the product even more awesome and raise the quality even more.  We had given “Go-Live” license with the RC release already but now hopefully there would be nothing stopping you upgrading from WebMatrix  1 to WebMatrix 2.  JFYI: we will soon turn on the “Upgrade” flag in WebMatrix which will prompt millions of users using WebMatrix 1 to move to WebMatrix 2.

WebMatrix 2 in my opinion is one of the best light weight web development tool out there.  With support for Node.js, PHP, ASP.NET, HTML5, CSS3, jQuery, SQL CE, SQL Server, MySQL, FTP, Web Deploy, Less, ScSS, Coffee Script, SEO, iPhone/iPad simulators and many many other features there is no doubt that it is probably the best web editing tool that one could possibly get for FREE, so if you are not already using it I hope you give it a try by downloading it below:

Since WebMatrix 2 RC we fixed over 100 bugs, many of them reported on Stackoverflow and user voice. Thanks for the taking the time to report issues, and helping us make WebMatrix 2 even better.  Below are some notable fixes that went in between WebMatrix 2 RC and RTM:

Accessibility:  Microsoft has pretty high bar when it comes to accessibility and the team spent quite some time in making sure the product is highly accessible.

Editor: Huge performance enhancements in editing of complex and big files.

Editor: Better detection of JavaScript errors within script blocks of any html files.

Editor: Formatting improvements on JavaScript Editor and enabling it to work more seamlessly with JSLint.

Editor: Making sure that we show function signature help in JavaScript editor.

Editor: Exposed extensibility points for Editor context menu.

FTP: FTP publishing improvements including sub-folder publishing and re-tries in case of failures.

Node.js: Code completion for Scoket.io for Node.js sites

Node.js: Code outlining fix-ups for SaaS editor

Node.js: Added a new template for package.json for Node.js sites

PHP: Support for the new short PHP tag.

PHP: Support for proper auto-completion for long PHP tags.

PHP: Support for detection of PHP/MySQL Apps when downloaded from a remote location

ASP.NET: Improved formatting of documents in ASP.NET Web Pages (Razor Syntax)

ASP.NET: Making Comment/Un-comment work nicely across different types of syntax (CSS, JS, HTML, Razor) within ASP.NET Web Pages file.

ASP.NET: Making C# colorization and intellisense more resilient in complex editing scenarios

ASP.NET: Proper validation for generic types in C# & VB editors

ASP.NET: Handling the nuances of Web Pages 1 vs. Web Pages 2 effectively

General: Support opening a random folder as a site in WebMatrix by right clicking on it in Windows.

General: Shipping RTW version of IIS Express, Web Pages, Web Deploy, SQL CE and every other component which makes WebMatrix 2 into a one stop shop for web development.

General: Making sure the product works seamlessly on Windows XP and beyond, both on x86 and x64 machines.

With all these improvements we hope you will have fun using WebMatrix 2 and will create more awesome website in time to come.   Here is once again a link to the download.

/*code awesomely */

Vishal

USA today released an article today on Top cities for technology startups.  It contains data from National Venture Capital Association.  It covered top 10 cities and gave a great writeup on what is happening in each place.  Their ranking was more or less based on amount of investment happening in each city and the usual suspects the winners as you can see.

I just thought of doing a little bit of hackery on top of the data to see how it would fair in case your parameters to select a city were different, here are quick results:

Top 10 cities based on most number of Startups

Rank City 1 San Francisco Area 2 New York 3 Los Angeles Area 4 Boston 5 Chicago 6 Austin 7 Seattle 8 Boulder/Denver 9 San Diego 10 Washington DC

Top 10 cities based on most number of Funded Startups

Rank City 1 San Francisco Area 2 New York 3 Boston 4 Washington DC 5 Los Angeles Area 6 Seattle 7 San Diego 8 Boulder/Denver 9 Chicago 10 Austin

Top 10 cities based on percentage of startups funded

Rank City 1 Washington DC 2 Boston 3 San Diego 4 Seattle 5 Boulder/Denver 6 New York 7 Austin 8 Chicago 9 San Francisco Area 10 Los Angeles Area

Top 10 cities based on total dollars invested (Usa today ranking)

Rank City 1 San Francisco Area 2 Boston 3 New York 4 Los Angeles Area 5 Washington DC 6 San Diego 7 Chicago 8 Austin 9 Boulder/Denver 10 Seattle

top 10 cities based on average funding across All startups

Rank City 1 Boston 2 Washington DC 3 San Francisco Area 4 San Diego 5 Boulder/Denver 6 New York 7 Chicago 8 Los Angeles Area 9 Austin 10 Seattle

top 10 cities based on average funding across Funded startups

Rank City 1 San Francisco Area 2 Los Angeles Area 3 San Diego 4 Boston 5 Chicago 6 Austin 7 New York 8 Boulder/Denver 9 Washington DC 10 Seattle

  The data correctly it is slightly skewed based on big players and huge investments happening in them e.g. Twitter/Facebook etc but nevertheless it tells us a little bit about patterns.  The full comparison data is listed below:

Conclusion

This was not intended to be a conclusive article at all. It is just a fun exercise but in very broad strokes you can say something like:

Your likelihood of getting funded is highest in Washington DC, Boston, San Diego, Seattle or Boulder/Denver.

If you want to raise big money then you rather be anywhere in California or in Chicago or Boston.

If you want to be cities filled with money then San Francisco, Boston, NYC, LA or DC are your best bets.

But based on all of the above diggings it feels like Boston might really be the all around champion of the study and if you are wanting to remain frugal yet immerse in startup scenes then DC, Seattle or Colorado might not be bad choices after Boston either!!

Hope this was a fun read!!  I also hang out on twitter @VishalRJoshi if you would like to follow.

-Vishal

Thankfully many websites are settling for Facebook, Twitter, Google, Linked In or Live authentication so that the rest of us do not have to go through the pain of remembering infinite number of login credentials.  I still wish there was one but that is for later. 

If you still have a reason to roll your own login controls please honor the tab order that users have grown to expect.  There are way too many sites who do not care about tab order for keyboard savvy users and hence mentioning this felt worthwhile.

There are only five standard controls on most login forms User Name, Password, Sign In, Remember Me and Forgot Password.  Considering that Login forms are among the first interactions of a repeat user with your site it is surprising that many sites do not care enough to leave the tab order of “Forgot Password” before “Sign In” button.  Do note that sub-consciously ample users type in UserName, Password and then hit tab-enter - if this redirects to forgot password then the site is leading users to pure frustration.  At the minimum please check all of your login forms and fix the tab order on your site to make sure “Forgot Password” does not follow the “Password” field.

The next control to care about is the check box for "Remember Me”.  The fundamental question worth asking is Whether to keep “Remember Me” checkbox or remove it all together?

Certainly sites like Linked In (below)

and also GitHub have chosen not to and directly use cookies to save the user information for next login.

It obviously is a deliberate decision on their part.  So, does your site need that checkbox or can you live without it? Let us ask:

Is the data presented in your site highly sensitive e.g. banking/medical? If yes, clearly you might not want to assume deemed approval from your users.

Are your users super tech savvy (like in case of GitHub)?  If so, then maybe you do not want to bother them with a checkbox, make the UI cleaner esp. if you are ok with the risk of 1 in 1000 people accidentally not hitting logout.

Is your user likely to access the site from shared computers? –Most likely yes.  Considering everyone has their own personal devices, plus Wifi being available at many public places one may say shared computers are going away.  Well they will someday but not yet I just came back from India and there are still cyber café’s there, there is one machine per household and every friend and family visiting each other shares the household computer.  Even here in US kids still grab every computer they can find to access internet and there are countless people who access shared computers in libraries, schools, conferences, events, computer stores etc.  If you aspire to have a popular site assume it will be accessed from a shared machine and people will forget to hit logout.

Is browser’s native remember password good enough for you?  These days all browsers allow storing credentials in their credential caches but that is quite different (at least one-two whole clicks different ) than not seeing the login screen all together so when it comes to Remember Me checkbox I will assume that browser’s remember password feature will not influence your choice, they are different.

So in nutshell unless you are GitHub who knows their users are tech savvy and are likely using their development machine to access GitHub OR some financial firm who will never offer users the benefit of remaining forever logged in you most likely want the “Remember Me” checkbox.

I am all for not having one more control on the screen if not required and will deliberate this question again on every site but for now the odds are in favor of the “Remember Me” checkbox.

Assuming you want the “Remember Me” checkbox, the next question is whether the default should be checked or not?

Let us say you are a user who would like to Remember yourself but find the checkbox unchecked by default.  You will click “Remember Me” and then will be remembered for a long time till you clear your browser cookies.  You would face one time inconvenience but then you are done.

Now let us say you are user who does not want to be remembered but the checkbox is checked by default. You will now have to uncheck everytime you log in causing you repeated pain.  Also even beyond that pain you will be surprised how many people will forget unchecking this and may not even know how to Log out (for reasonable number of people closing the browser window is still same as logging out).

Just by using these rationales I suggest keeping “Remember Me” unchecked by default.

That is what most of the login providers like Gmail

Facebook

and Twitter do:

So now assuming that we want the “Remember Me” checkbox and want it unchecked by default  the next thought is whether the tab order of “Remember Me” should before or after “Sign In”

Again “Remember Me” hopefully will not have to be used again and again so having it after Sign In feels reasonable.

If you want to go above and beyond then you could even remember the most recently used (MRU) state of the “Remember Me” checkbox in a cookie separate from the actual auth cookie. That way even if the authentication cookie expires after X number of days your choice of last “Remember Me” would persist eternally. Pro users will appreciate you for being thoughtful and it will further reduce the necessity of the “Remember Me” checkbox to be before “Sign In” in tab order.

Also many people land up having tab order independent of visual placement, I think that is wrong coz sub-consciously a user is going from left to right (except cases where the languages reads other way) and then then top to bottom.  Your controls and tab ordering should follow this too(i.e. forgot password does not have to be next to password field ).

In most general cases I would recommend following the pattern

UserName, Password, Sign In, Remember Me (unchecked), Forgot Password.

In conclusion, your login screen has to match your application scenario, data and user expectations.  Be deliberate about your choices on every login screen of every app

Technorati Tags: Web Development,Web

you create and give it the importance it deserves.

/* code awesomely */

We know that most of us are bombarded with infinite amount of information each day and sometimes 2-3 minutes is all we have to check a quick email or learn something new.

In that spirit we have released 2 Minute Magic videos for WebMatrix 2 which you can watch during your tiny power breaks.  Hope you enjoy them!!

Get Started

How to create a site using WebMatrix

How to use the Site Workspace inside of WebMatrix

How to create a site using the ASP.NET Starter Template in WebMatrix

Using the Node Starter Template in WebMatrix

Publish/Remote

How to create and publish a site in WebMatrix in less than 5 minutes

How to edit sites remotely using WebMatrix

Editor

How to use Find and Replace inside of WebMatrix

How to use the Color Picker inside of the WebMatrix CSS editor

Web Trends

Twitter/Facebook and other OAuth Logins with the Node Starter Template in WebMatrix

How to use Less CSS inside of WebMatrix

How to use the Sass editor inside of WebMatrix

How to use Coffee Script inside of WebMatrix

NuGet & WebMatrix Extensions

How to use the NuGet Gallery in WebMatrix

How to use the extension gallery in WebMatrix

Mobile Web

How to add mobile capabilities to your Node.js starter site in WebMatrix

How to use jQuery Mobile in WebMatrix

How to use the Windows Phone emulator inside of WebMatrix

How to use the iPhone simulator in WebMatrix

How to use the iPad simulator in WebMatrix

Databases

How to use the database manager in WebMatrix

  /*code awesomely*/

Create New Site & Enable Git Deployment

As you know you need to use your Live ID sign into Azure portal.  Once you log into the Azure portal you can create a new Web Site by clicking on the “New” command bar at the bottom:

Once your site is created then on the right side under Quick Glance there should see a way to “Set Git Publishing” which will setup your Git Repository and give you a Git URL to push to.   At that time if you have not set up your deployment credential then you will be asked to do so.

Git/FTP Credentials in Azure

If you set your deployment credentials before and do not remember now then you will be able to “Reset deployment credentials” from the Quick Glance section as highlighted below.  Clicking on “Reset deployment credentials” should give you the below screen:

We went back and forth on setting the text on this dialog to be as short and yet as meaningful as we could but I will try to re-iterate it here.  Live id credentials can only be used to sign into Azure portal and not to deploy via Git to Windows Azure Web Sites. For this very reason there are basic auth credentials available per user to be used for deployment. These are basic auth credentials which are used by both FTP and Git and are common for all the sites of the same user. 

When you Set up Git publishing on any site then a Git repository is created specifically for that site and you get a Git repository URL.   Do note that after the repository is setup you also see a “Deployments” tab on the page which contains Git instructions.  

Typical Git URL in Azure looks something like below:

https://[email protected]/TestSiteVishal.git

notice that vishal@ is appended in front of the Git site name denoting the user name.  If I had another site called FooBar the URL would look like:

https://[email protected]/FooBar.git

The common part being my user name and when I actually start pushing my site from command prompt the only thing I will need to enter is the password and it will be the same whether I am pushing to FooBar or TestSiteVishal.

I quickly created a Bakery site via WebMatrix 2 and git pushed it to my TestSiteVishal above and my “Deployments” tab now looks as below (notable pieces being my live id and Deployed By field in the deployment history):

When I try to FTP access any of my site the credentials are the same (except in case of FTP the username is usually SiteName\Username i.e. TestSiteVishal\Vishal or FooBar\Vishal)

Additional Deployment Users for your Git Repo

Now let us do a tiny bit of extrapolation here.  A user has single basic deployment credentials for FTP & Git within Azure Web Sites which are applicable to any site that the user has access to.  Any user gets access to Azure Web Sites based on their Azure Subscriptions, so as long as you can add users to Azure Subscription then other users should be able to get access to the same sites and thereby get access to the Git repo of that site as well.  It is possible to add more users to Azure Subscription by making them a co-admin.

So as long as you can make someone as a co-admin on the subscription which has access to the Website with Git Repo then on that user’s dashboard they should see a Git url with their user name and they can use the procedure above to start deploying to that Git Repo.

Setting up a Co-Admin

Setting up a co-admin is relatively simple.  You can go to http://windows.azure.com which is the original Azure silverlight based portal and follow the instructions on MSDN article at http://msdn.microsoft.com/en-us/library/windowsazure/gg456328.aspx and you should be all set.

If you are being redirected to the new Azure portal at https://manage.windowsazure.com then click on “Preview” in the middle of the title bar as shown below:

which should give you an option to go to the previous portal as shown below:

Once you are in the older Azure portal then click on “Hosted Services, Storage Accounts & CDN”, select the subscription of your choice and click “Add New Co-Admin” on the top Ribbon

which should then allow you to add other co-admins by using their Live Ids as below:

Now the second Live Id account which you added as co-admin should be able to create their own deployment credentials and should be able to use those deployment credentials to Git push to Azure.

When I logged into Azure portal as co-admin (which I just added above) I could see all the sites from the original account and was able to  “Reset deployment credentials” from the dashboard.  Note: Since the co-admin does not know the original users credential the step of “Reset deployment credentials” is an important step for the co-admin.  After doing that when I moved to my “Deployments” tab it looked as below:

Notice that the deployed by is vishal vs. the GitUrl has the user VishalRJoshi

As a co-admin I can now use the Git URL to clone my site locally on a different machine using my own co-admin basic credentials.  Notice the command git clone https://VishalRJoshi@…  below:

  I made some quick edits to the site and now I am ready to push to Azure again.  As a co-admin I need to add my Azure remote again so I will do so by using the command

git remote add azure https://VishalRJoshi@testSiteVishal…

and then simply git push azure master  and use the new reset deployment credentials.

Finally I can see my change deployed to my Azure site using the co-admin user (notice the Deployed by field now says VishalRJoshi:

I hope this helps you add contributors to you Azure Git repository and you have fun with git pushing to Azure.

/*code awesomely*/

When you git push to Azure there is a lot of diagnostic log and trace information is created.  This information is extremely useful for troubleshooting.  So if I was ever to face git push Azure master fail then looking into these is the first place I typically start.

What is also interesting is that since these log files belong to your site “only you (or your co-admin)” can access it.

Below is quick way to get to these files from Azure portal:

On your site dasboard on the right site you should notice “Quick Glance” section

scrolling to the bottom of that you will see Deployment Deployment User and Diagnostics Logs.

Click on the FTP link on the log and when you are asked for credentials enter fully qualified UserName i.e. SiteName\UserName

After doing that navigate to LogFiles/Git/trace/trace.xml

The trace.xml file contains tons of information regarding your git push azure master.  Even if you do not have any failures in your git push to Azure this is still a fascinating file to see as it gives you a ton of information of what is happening under the hood.

//code awesomely

Yesterday you met open, unified, powerful yet simplified Windows Azure. You can read more about it on Windows Azure Blog or on ScottGu’s blog

In the same spirit and as a great compliment to Windows Azure Web Sites, today I am super excited to announce the Release Candidate of our free web development tool WebMatrix.

Background

WebMatrix is designed to build modern standards based websites as effortlessly as possible. It aims to make your web development workflow easy i.e.

· It lets you get started with Open Source web applications or with built in pretty templates like bakery, personal site, photo galleries, Chat application, Simple CMS etc.

· It comes bundled with a web server so you do not have to configure anything on your machine.

· It has top notch support for web & industry standards like HTML5 , CSS3, JavaScript & jQuery

· It supports server side scripting of your choice - may it be ASP.NET, PHP or Node.js

· It will have built in database management tools for SQL Server or MySQL

· It also has SEO tool & performance optimization tools.

· Finally, it has great publishing tools whether you are using FTP/FTPS or Web Deploy. And now it supports publishing to Windows Azure too!!

Essentially right from getting started till publishing, WebMatrix will make your life easy and will do so for FREE. What is nice is that even after all this it continues to be lightweight installs under 2 minutes (assuming you have .NET 4 which most machines do today).

Installation

Just click the button below and within couple of minutes you should be good to go!!

By downloading and using the Web Platform Installer (WebPI), you agree to the license terms and privacy statement for WebPI. This installer will contact Microsoft over the Internet to retrieve product information

WebMatrix 2 – Web With Benefits

There are already many cool features introduced in WebMatrix 2 Beta (which was released in Sept 2011 at the //build conference). WebMatrix 2 RC release builds on top of Beta and collectively has so many cool new features that it is going to be tough for me to contain myself, although I will try J

HTML5 – WebMatrix now supports code completion for HTML5.

CSS3 – Needless to say also CSS3 code completion

JavaScript – And JavaScript & jQuery code completion as well

ASP.NET - WebMatrix 2 comes with ASP.NET Web Pages 2, which has several improvements over ASP.NET Web Pages 1. Some of my favorites are:

· Dead simple integration with Twitter, Facebook and other oAuth authentication

· Great helpers for embedding maps in your web pages.

· Built in features for User input validation.

You can read more about new ASP.NET WebPages features at – Top Features in Web Pages 2

In addition to runtime features there is a ton of tooling improvement within WebMatrix 2 for ASP.NET. WebMatrix 2 now uses Visual Studio code editors which will makes writing code a real pleasure. You will now have full C#/VB# intellisense within WebMatrix 2 e.g. check out HTML embedded C# intellisense on ASP.NET Web Pages helpers:

In addition to great intellisense on C# & VB WebMatrix 2 now also supports NuGet Gallery

More Awesome Web Stuff –In addition to above Webatrix 2 supports many other modern web goodies like: LESS, SaSS, Coffee Script. Just click Add new item and check out all of these and in fact many more file types supported, you just need to explore J Infact with a tiny bit of exploring you will also see that WebMatrix also provides code completion for LESS and compilation for both LESS & CoffeeScript. I am super jazzed about all this coz I really have wanted to use these features.

      PHP – WebMatrix 1 always supported PHP but now the support goes even further by providing code completion for PHP functions. This has been one of the top asks on WebMatrix User Voice and so we are excited to finally have this in.

Node.js – One of the big areas of investment in WebMatrix 2 RC was Node.js. We have tons of features coming in for Node.js. Some of my favorite ones are:

Awesome templates - If you have never used Node.js before but have always wanted to WebMatrix 2 is your opportunity. Trust me here and give it a try. Just install WebMatrix 2 from above big green button, go to “Templates” and pick one of the templates below (preferably Starter template)

Just by installing a Node.js template, WebMatrix 2 will install Node.js, NPM, IIS Node, NPM Packages for you and within seconds your machine will feel like a Node developer heaven. The Starter template comes with best practices on writing Node.js application and even gives you taste of some quick “Chat Room” functionality using very popular NPM package Socket.IO.

Node.js Code Completion – WebMatrix supports code completion for core Node modules and functions:

3rd Party Module Code Completion - Our team has been working with the community to come up with a common format to be able to be able provide you with 3rd party module code completion and I am super happy to share that we now do have code completion for all 3rd party modules who have jsdoc support e.g. check out the code completion on Recaptha below:

Jade/EJS Colorization – WebMatrix also supports colorization for Jade files making it friendly for people who love to use Express MVC framework with Node.js. Infact WebMatrix will also support EJS if you prefer that as your view engine.

We have lot more goodies for Node Developers check out post written by Justin on our team: Node.js meets WebMatrix

OSS App Development – OSS Apps have always been one of the top focuses for WebMatrix. In this release we have made even more progress on working with popular OSS apps. Some of my favorite improvements in this space are:

App Install Workflow – We aspired to ask almost zero questions when you install an open source app like WordPress or Joomla. We make the default choices for you and yeah we know that some of you want full control so we enabled full customized install as well.

App Specific Dashboard – With WebMatrix 2 OSS Apps can customize the dashboard content that is shown to us developers. If you want to try out a new app and want to be connected with its community then this serves as a great resource. Check out how Umbraco customizes the WebMatrix dashboard with super useful links (and pretty icons J). Similarly there are several other communities who do the same.

App Specific Code Completion - WebMatrix now goes one step ahead and provides code completion for App Specific function. Check out the WordPress example below. Similarly other OSS apps provide code completion for their functions too.

Needless to mention all ASP.NET apps get code completion just by the virtue of using the same editing surface as Visual Studio!

App Specific File locking – Most apps recommend not to modify their core files which ship with the app coz these files change from one app version to another. It is always a pain point for web developers to know which files are allowed to be modified and which are not. WebMatrix makes this easy by providing the App Specific File Locking feature. When you attempt to modify one of the core files WebMatrix warns you like below:

Mobile Web – We all know Mobile web is huge and we know it is only going to get bigger. With WebMatrix 2 we want you to be able to make your websites mobile enabled easily. To support that below are few top features:

ASP.NET Web Pages – In ASP.NET Web Pages we now have ability to render mobile specific views. The System.Web.WebPages namespace contains classes that let you work with display modes easily.

Node.js – In our Node.js templates we wrote sample code for you to take a look at how you could redirect calls to right views based on user agent of the browser.

Templates – We made all of our templates - ASP.NET, Node.js as well as PHP templates look nice on mobile devices so that you can have samples on how to use meta tags, mobile specific CSS or even different layout and scripts.

ASP.NET Starter Template

Node.js Starter Template

PHP Starter Template

Windows Phone Emulator – We hooked up Windows Phone emulator with WebMatrix so that you can take a look how your site will look like in Windows Phone

iPhone Simulators – Our partners in Electric Plum helped create iPhone Simulator which will allow you to validate your site for iPhone.

And Electric Plum actually did not stop there, they went ahead and even provided iPad Simulator for you as well.

jQuery Mobile – You might already know that we have been huge fans of jQuery project. This time around we used jQuery mobile to make many of our templates mobile enabled. Infact for you to be able to do this with your websites, we now ship jQuery mobile along with our templates and even beyond that we also support code completion for jQuery mobile.

So overall I think when it comes to mobile web you hopefully will not have to look further than WebMatrix 2

Database Management – In WebMatrix 1 we provided support for SQL CE which is a light weight, in memory DB engine which can actually ship with your site (i.e. with SQL CE you will not have to separately buy DBs from your hosting provider, it will just run inside your site process). In addition to that WebMatrix 1 already support for MySQL, MS SQL Server and even migration from SQL CE to SQL Server. In WebMatrix 2 we added more polished features around Data Management, Schema Management as well as Relationships & Keys management. Check out the screenshot below to get an idea around the possibilities.

In WebMatrix 2 we also added hugely requested feature for adding new MySQL and SQL Server DBs to your site, which can then be easily deployed remotely to your hosting provider.

Extensibility – Since WebMatrix is a free tool and even though we are inside Microsoft we are a small team. We thought that if we would make WebMatrix really extensible then hopefully many of the passionate users would help us out in taking the product to even greater heights. For this reason we made WebMatrix 2 extensible. We are already seeing awesome extensions come through like:

The Color Theme Manager which will allow you to change your editor themes by picking from several thousand community themes available on http://studiostyl.es

The iPhone, iPad and Windows Phone simulators/emulators you saw above are WebMatrix extensions too.

There are several other awesome extensions like OrangeBits Compiler(compiles CoffeeScript, LESS, minifies JS, CSS etc), Super Snippets (allows you to create snippets of code to use later), Node Power Tools (Includes integration with Node Inspector, Console window and more fun stuff), Image Viewer (allows you to open images inside WebMatrix) and many more. If I took screenshot of each of those I would probably never finish my post so will leave them to you to explore. WebMatrix has an extension gallery which you can access via the ribbon, do take time and check it out.

WebMatrix Extension Gallery

Most importantly we want you to try out creating a new extension as well so we have great documentation, videos and online site at http://extensions.webmatrix.com

If you are interested in creating an extension please do check out How to Create WebMatrix Extensions

Cloud Integration Whether you are starting to build your site, working on it now or ready to deploy, it is worth checking out the great Cloud integration features that WebMatrix has.

Cloud Enabled Apps - WebMatrix highlights OSS apps in the gallery which are ready to go to cloud (notice the blue border Azure icon around some of them). This will allow you to easily pick Windows Azure ready apps. I took this screenshot early on so there might be many other apps which might be Azure ready now they seem to be pouring in on almost daily basis:

Remote Editing – WebMatrix allows you to edit your site directly on Windows Azure or for that matter any other hosting provider who supports Web Deploy technology. To connect and edit your files remotely on WebMatrix dashboard simply click Open à Remote Site

Seamless Publishing – Even in WebMatrix 1 we supported seamless publish of both your files and databases. WebMatrix 2 takes that experience to Azure and now you can seamlessly deploy your sites to Windows Azure. Check out the screenshot below which is deploying PHP + My SQL site to Windows Azure.

Download from Windows Azure – In this wave of Windows Azure we release Windows Azure Web Sites. As I mentioned earlier WebMatrix is very tightly integrated with Windows Azure Web Sites and when you create a new Website in Windows Azure you will notice the below command bar:

The “WebMatrix” button on the command bar will allow you to install WebMatrix 2 RC if you don’t already have it, it will also upgrade your WebMatrix 1 to WebMatrix 2. Additionally if your Azure site is empty it will allow you to choose from WebMatrix templates or OSS app gallery. If you already have a site in Azure then WebMatrix will detect the type of site it is (e.g. WordPress in screenshot below) and will allow you to make a local copy of it by pulling down the files as well as databases. Even beyond pulling files and databases, WebMatrix will also fix up your app locally so that it can work without need any internet connection and whenever you are ready with your changes and back online again, it will allow you to seamlessly publish back to Azure again.

If lot of this feels unreal I suggest you give it a try by signing up for a FREE Windows Azure account today at http://windowsazure.com (Go to Manage – Create a new WebSite). You can also take a look at the video titled “Windows Azure Web Sites – OSS Apps & WebMatrix” demonstrating the experience here

WebMatrix.com

What I mentioned here is only a fraction of new feature information about WebMatrix 2. There is a ton more information available on http://webmatrix.com/next . Do take time to look at our “How To” documents and videos, I am hopeful that you will find them interesting.

Free Web Hosting

Lot of the above features not only work great in Windows Azure but work really REALLY WELL on FREE HOSTING OFFERS which our partners have put together for you. All these great companies worldwide are bringing you free web hosting so that you can create beautiful websites and easily share them with your friends and family.

These hosting offers are free only for limited set of developers so do not miss out on the opportunity to try them out by clicking them:

User Voice

Just around last September we opened up our User Voice forum and since then we have been getting user asks on several features. I am glad to let you know that just yesterday we marked 67 Feature Requests on User Voice as completed. That does not mean we are not hungry for more, in fact we would love to hear your feedback, if you have feature request please to go to our User Voice and leave a vote/suggestion

Have fun

We made this web development tool for you and we really hope you will love using WebMatrix 2 as much as we loved building it.

/*code awesomely */

Vishal

If I have to summarize in what is worth noting in WebMatrix 2 so far, here is how I would like to put it:

Inspiring Environment – Web development is an inspiring task and I believe having an inspiring environment for it is important.  In WebMatrix we have always aspired to give web developers a polished and fresh environment to achieve mundane tasks.   Some interesting things worth noting in WebMatrix 2 from this standpoint are:

App Install Workflow – We aspired to ask almost zero questions when you install an open source app like WordPress or Joomla.  We make the default choices for you and yeah we know that some of you want full control so we will enable that as well.

Color Picker – Yeah you would think that what is the big deal about a CSS color picker but we rejected the traditional design you see every other place, we wanted it to be more natural to use and what we have now is something which has tons of tiny details like showing colors which your site already uses, switching from hex to RGBA, color picking from any other window open on your machine and doing all this without using a mouse.  I am really proud of what we have built you should for sure check it out.

DB Manager – We made it beautiful, yet super functional, WebMatrix 1 design was cool but this one is like artic cool

 Remote View of Local site – In WebMatrix 2 we allow you to flip your views between local and remote to seamlessly troubleshoot server issues. Note the ribbon tabs “Home” == Local, “Remote” == Remote

 Work Remotely – What if you you are in a hotel and don’t have your dev box? You know WebMatrix installs blazing fast, so now it does not matter where you are and which machine you are using you can simply download & setup WebMatrix in just 2 minutes and open your site remotely.  You will still get the colorization that you are use to and without making any local copies of your site you can get quick fixes done.

Community Comfort – As web developers we know how many times we depend upon the community to find solutions to everyday issues.  In WebMatrix 2 we took the time and energy to open a window into the web community right from within WebMatrix 2.  So now you will see:

Deep engagement with web apps Community – We work even more closely with many OSS apps founders like WordPress, Joomla, Orchard, Drupal, DNN, Umbraco, Kentico and many others.  We have gathered their feedback and incorporated a lot of it into WebMatrix, as a result WebMatrix now looks like it is build for that particular app.

Site Dashborad -  If you open many apps in WebMatrix 2, you will immediately find getting started, tutorial, forums etc. links for each app right on the site dashboard.  If you are starting your development in Joomla or Umbraco, you will be almost on a self guided learning tour!

App Specific Code Completion – We have worked specifically to give you code completion for specific apps when you are developing within it.  E.g. you can now see WordPress functions when you are editing WordPress content files.

NuGet – You might be aware that NuGet is a way to pick up reusable pieces of code packaged into a format called NuGet package.  WebMatrix exposes a NuGet gallery which now allows you to directly consume this community content.  Just for context there are 4555 unique packages as of today on NuGet gallery with an average (my guessitmate) of 150 packages getting added daily.

Extension Gallery – We also wanted community to come in an add functionality to WebMatrix itself so that the tool can organically grow to suite needs of you all.  We know that investing in the extensibility will allow us to create more impact than we can create ourselves.  Now we are also working on Extension gallery where all the extension that community will create can be hosted.

Learning Community – We all have grown to love sites like Pluralsight, Learnable, AppendTo.  We worked with them and got that context sensitive learning content inside the product.  Now you can simply hit F1 wherever you are and it is likely that you will and up getting a bunch of tutorial for the things you are looking for.

Hosting Community – We have always been super hosting friendly and even this time around we are working with the hosting community members like  Applied Innovation, DiscountASP.NET, Awesome.NET, CBeyond & Citanium to give you free hosting offers to try out your site in live environment

Effortlessly Modern – Keeping up with fast moving modern web is not as easy as it should be, so we spent time to make sure you get all the support to easily keep up with the latest standards.  To that effect we have bunch of new features like:

Awesome templates – We have built in templates which are filled with best practices, you can feel free to steal from them or start from them as you choose.

Intellisense everywhere – We have intellisense (aka code completion) everywhere in the product.  It does not matter whether you want to use HTML5,  CSS3, jQuery, jQuery mobile, PHP, ASP.NET/C#/VB or JavaScript, we will have you covered.

Facebook | Twitter | oAuth – We understand that not everyone wants their users to go through elaborate sign up process so now for ASP.NET Razor we have Facebook/Twitter auth built in.  Just un-comment some code, give you app Id, consumer secret and you are all set.

I could type more but for now let you explore the product yourself.  You can download it from http://webmatrix.com/next.  Also recently I had an opportunity to get on WebCamps TV and talk a little bit about WebMatrix 2 and some of the above improvements in action..

Here is the quick 14 mins video, hope you enjoy it.

Btw, this product is created for you, the modern web developer and we actively want to hear from you.  That is the reason why in every site dashboard within WebMatrix there is a way to provide feedback about your experience.  If you have thoughts/comments/feedback do not hesitate to write here or on our UserVoice.

Thanks for reading.

Soon after starting work on WebMatrix engineering, I got an opportunity to launch WebMatrix 2 Beta at //build.  For those who are not familiar with WebMatrix it is all in one web development tool which is inspirational as well as functional at the same time.  It is lightweight enough that you get a web development tool, framework, db, web server and more under 50MB and based on our testing it installs in around 2 mins on a 2GB RAM, Windows 7 machine with .NET Framework pre-installed.  Typically such tools cost $50-100 but WebMatrix is yours for free

I was involved with WebMatrix 1 project which we launched on Jan 13th 2011 and it has only been few months since release of WebMatrix 1 that we have WebMatrix 2 Beta out.

If you have not installed WebMatrix 2, you should install it now:

There are bunch of NEW features in WebMatrix 2 Beta on top of WebMatrix 1, but I wanted to just call out few top items:

Even more seamless and awesome integration with Application Gallery where now you will not have to fill in the standard application installation parameters

OSS Application specific code completion which means users of popular apps like WordPress can get help customized to their applications

Custom look and feel for each Web Application which means if you are editing Umbraco you will feel like WebMatrix is designed for Umbraco with specific contextual actions called out by application authors.

Intlellisense for HTML, CSS, JS, C#, VB, ASP.NET Razor as well as PHP.

Support for HTML5, CSS3 as well as jQuery constructs.

New awesome tools like color picker.

Completely revamped Database workspace where you can now execute multiple queries.

Extensibility support by which you can write your own extension for WebMatrix.  And trust me it is so easy that you can whip out a ribbon button to do something cool just within minutes.

NuGet integration to allow you to build your app with community by your side.

Remote tools which will allow you to see the server files and even edit them within seconds.

Integrated learning experience with learnable, pluralsight and appendto

And more and more…

You can read all about it at http://webmatrix.com/next

  As I mentioned earlier I gave the WebMatrix 2 launch talk at //build/ in September 2011.  This talk was recorded and is now available for you to view below.  Hope you will enjoy it.