Deploying your Own Website Files in Windows Azure

Introduction

Have you been confused on how does Windows Azure works? Have you been searching for tutorials and yet, you've been so helpless looking for the right and proper one? This article will show you step-by-step on how to upload your own custom files in Windows Azure Websites.

Pre-Requisites

I'm sure you already know in order to have a Windows Azure account, you will be needing a Microsoft Account (Outlook, Hotmail, or Live) and to have a Windows Azure account, it requires a credit card. I know it's a sad news especially for students but, I'll give you some alternatives on how to avail your own Windows Azure account:

• Debit Card - This is a lot quicker and easy to use. Unlike a credit card, a debit card doesn't need your salary, loans, properties, or any of those sensitive information. You can apply a debit card to your nearest bank. Just try asking some employee's on how to avail one. Don't worry, a debit card just costs around 500php(Philippines Peso) and usually takes a week for it to claim. If your from another country, just do the math for the foreign-exchange. The price and time of claim might vary from your country too so just check out into your local bank.

• Microsoft BizSpark - If your an enthusiast of making startups and your active in Microsoft community events, they sometimes give a raffle of Microsoft Bizpark accounts. You can also apply for a Bizpark account here. Just check out their procedure on how to do it.

• Borrow a Credit Card - I know this may sound crazy but the thing is we are not really going to get their entire credentials. Don't worry, once you sign up you get a free 1-month trial then after that, you get deducted based on how much you used after the free period. If the owner is too worried, when you register and it comes to the input of CC digits, let them do that job instead if their being overprotective. Then again, nothing will be deducted to your credits during the trial period. After that, if you still continue to use, then that's the time you get deducted.

Agenda

1. Creating your Azure website and Exploring the Dashboard
2. Resetting deployment Credentials
3. Creating a Custom Web File
4. Importing the File and Exploring the FTP

1.) Creating your Azure Website and Exploring the Dashboard

In this tutorial, we will be using Internet explorer 8+. Reason? It's because it supports FTP views in a directory which we will be doing later.

Now that your ready to go, open up your Internet Explorer and let's go to http://www.azure.microsoft.com/en-us/ and click on portal (located on the top portion of the site).

If your not yet logged-in to your Microsoft account, it will redirect you to the login page. Enter your credentials and sign in.

Now that were logged in, it should now direct you to the dashboard of your entire windows azure projects. From there click on + New located on the lower-left part.

Note: As you will notice, i've censored all of my projects.

Go to New > Compute > Website > Quick Create

From there, enter your URL. Make sure it's unique and not taken by any other users. Set your web hosting plan to free and Region to where you live (In my case, I'm at East Asia) the click on Create Website.

Your website should now be creating your URL and loading any other point necessary. It shouldn't take long. It should now appear on your Websites list like this:

As you can see, i've boxed our the websites tab and the URL. It's because that's our next step for later but right now, click on the URL located on the right and it should lead display the website running which would look like this:

As you can see, our website is running with this default page. Now as regards wo what i've said earlier, let's go back to the website and click on the name which is boxed on the picture (In my case it's codeproject-tutorial).

2.) Resetting Deployment Credentials

From there, click on dashboard. You would see the statistics of how the site has been doing. You can review it for up to 7days. If you scroll down below, you would see on right the quick glance portion. From there, click Reset your deployment credentials.

It will prompt a window in entering your username and password. Now enter your new credentials.

Remember those for you will be using them in your other websites.

Note: If you forgot your password, you can always do the same procedure.

3.) Creating a Custom Web File

Let's create a sample html page for us to import later on. I'll just create a simple page that displays only one line and name the file as index.html

<html>
<head>
    <title>Sample custom file</title>
</head>
<body>
    <h2>This is my website file.</h2>
    <p>I have my website running in windows azure!</p>
</body>
</html>

4.) Importing the File and Exploring the FTP

Let's now try importing our web file to azure. Go back to the dashboard, click on the FTP HOST NAME link and it should open up a new tab.

It will ask your credentials that you placed earlier. Enter them and it should show a directory.

The directory should look like this:

After that, press alt and a task bar would appear below the URL on your browser. From there, go to View > Open FTP site in File Explorer

After that, it will ask for your credentials again. Place it again and you now have access to your FTP server.

From the FTP window, go to site > wwwroot. You would see a file named hostingstart.html. That's the one you saw earlier from the URL, the one displayed "Your site has now been created". delete that file and replace it with the index.html we just made earlier.

Now lets go back to the dashboard and click on the URL. Let's see our new home page for our site.

Congratulations! We have successfully placed our custom web files in windows azure. As you can see i've only demo-ed only one file. It's also possible to place a lot of files all-in-one like css, js, and all other assets needed for your website on the same process too.

Anticipated Questions

• Is it possible for a local database to be stored there (e.g mdf files) without relying on any back-end configuration?

Yes it's possible. You can try out Visual Studio's Web application template which includes database files but there is a certain process for your project to get uploaded. You can try WebMatrix templates too.

• Is it possible to implement FileZilla for easier imports?

Yes you can. Read this article for a brief info.

• How do I remove the .azurewebsites subdomain and replace it with my desired url? (Eg. codeproject-tutorial.net)

Good question. You will be needing 2 things. An ANAME and a CNAME. You can get those in your hosting provider. Unfortunately if your using a free web hosting, it doesn't guarantee you a custom URL. It still gives you the providers subdomain. (E.g. Byhost is my provider, therefore my URL would still remain as <website>.bythost.com). Assuming that you already have those 2, your gonna have to register them in the server. Unfortunately I can't explain the entire process but if you wanted to learn it, I can create a separate article for that. To learn more, you can click here.

 

Thanks and I hope you enjoyed my article!