Using Visual Studio 2015 and Deploying your first web app to your FREE Azure Subscription


 

Deploying a Web App using Visual Studio

With Visual Studio 2015 and the Azure SDK you create website and publish it to Azure, all within Visual Studio 2015, and see how this works.

Perquisites

· Visual Studio Community 2015

· Azure SDK 2.7

· Activated your free Azure student subscription through Microsoft DreamSpark step by Step instructions at ://blogs.msdn.com/b/uk_faculty_connection/archive/2015/07/19/microsoft-azure-free-websites-and-blogs-via-microsoft-imagine-amp-dreamspark-and-setting-up-wordpress-on-azure-for-students.aspx

Open Visual Studio Community 2015

If you haven’t already, sign in to your Microsoft Account by clicking “Sign in” in the upper right corner. You need to use the same Microsoft Account that you used with DreamSpark and Azure already.

clip_image002

Once you sign in, Visual Studio 2015 will automatically recognize your Azure subscription key thing is ensure you login to Visual Studio with your DreamSpark account

Open Visual Studio 2015 Cloud Explorer

Cloud Explorer is Visual Studio 2015’s direct connection to Azure. Let’s open that tool now from the menu by clicking:

View / Other Windows / Cloud Explorer

clip_image004

And just like that, here’s your Azure subscription!

clip_image006

See that Actions pane at the bottom? (You can get the same thing if you right click on one of your web apps.) It’s pretty handy: “Open in portal” will open your web app within the Azure Portal while “Open in Browser” pops open your default web browser and goes straight to your live web app.

But we’re going to make something new! Let’s get started.

Create a New Web Site Solution

Go to the menu and click:

File / New / Web Site

clip_image008

You’ll then see this window where you click ASP.NET Empty Web Site:

clip_image009

Then you’ll see your Solution Explorer on the right with your brand new WebSite solution!

Make a Homepage

From Solution Explorer, right click on your WebSite solution and click:

Add / Add New Item

clip_image010

Or you can hit Ctrl+Shift+A.

This gives you a new window where you’ll click HTML Page and Add:

clip_image011

Now Solution Explorer will show your new empty web page file:

clip_image013

It’s called HtmlPage.html. We’ll make this your homepage for the project, so we should rename it to index.html. That’s a standard name for a homepage and web browsers will find it more easily.

Do you know how to rename a file in a Visual Studio project?

There are two ways:

1) Right-click on HtmlPage.html and click Rename from the pop-up window

2) Look below Solution Explorer in the Properties window where it shows the File Name field. Click HtmlPage.html there and rename it to index.html.

All set? Let’s do a little web coding!

Code Your Web Page

Let’s make as simple a web page as we can just so we can see Visual Studio 2015 and Azure in action. Your index.html file should now be open in the main window. (If not, double click it in the Solution Explorer.)

It already has this text:

   1: <!DOCTYPE html>
   2: <html>
   3: <head>
   4: <title></title>
   5: <meta charset="utf-8" />
   6: </head>
   7: <body>
   8: </body>
   9: </html>

Click the cursor in between <title> and </title>. We need to give your web page a title – let’s call it Hello Cloud! Just type that right in between.

   1: <!DOCTYPE html>
   2: <html>
   3: <head>
   4: <title>Hello Cloud!</title>
   5: <meta charset="utf-8" />
   6: </head>
   7: <body>
   8: </body>
   9: </html>

Then click on that blank link in between <body> and </body>. Type this in just as it appears:

   1: <h1>Hello Cloud!</h1>
   2: <p>Check out this sweet website I made in Visual Studio 
   3: 2015!</p>

So now you’ve got a complete web page! It should all look like this:

   1: <!DOCTYPE html>
   2: <html>
   3: <head>
   4: <title>Hello Cloud!</title>
   5: <meta charset="utf-8" />
   6: </head>
   7: <body>
   8: <h1>Hello Cloud!</h1>
   9: <p>Check out this sweet website I made in Visual Studio 
  10: 2015!</p>
  11: </body>
  12: </html>

Done! Let’s ship this thing and go home. All we need to do is publish it as a web app to Azure.

Publish Your Web App

Back in Solution Explorer, right-click on your WebSite solution and click Publish Web App:

clip_image015

This opens a Publish Web window. “Profile” should already be selected on the left. Click Microsoft Azure Web Apps, and then from the next pop-up window click New…

image

Now it’s time to do some serious Azure stuff. We’re going to name your web app and assign it a bunch of Azure attributes: an App Service plan, a Resource group, and a Region. Here’s the window:

image

 

Let’s do a few things:

1) Click in the blank field by Web App name and type a name for your web app.

This will be the URL for your website. Whatever you type will be put in front of “.azurewebsites.net”.

In my example its called “myhellocloud” so my website URL will be http://myhellocloud.azurewebsites.net. (In fact, you can go look at it right now if you want.) Since “myhellocloud” has been used you’ll need to type something else the greed tick will appear if the URL is valid.

2) For App Service plan, click the dropdown and select “Create new App Service plan”.

3) For Resource group, click the dropdown and select “Create new resource group”.

4) For Region, click the dropdown and select the region closest to you in the world.

Now your window looks like this:

image

So let’s fill in those two fields! You can name your App Service plan and resource group whatever you want.

What is an App Service plan? It’s just a set of attributes that you can reuse across multiple apps. The attributes include a pricing tier (SELECT FREE and a Subscription (if you have multiple Azure subscriptions).

The plan you create right now will probably work for all the web apps you build while you’re a student. You can name yours whatever you want. I’ve named mine “myappserviceplan”.

What is a Resource group? It’s just a label that lets you group multiple Azure resources together so it’s easy to select them all at once in the Azure Portal.

Developer generally create resource groups which simply group group together a bunch of specific resources so they can view them all at once, monitor them as a group, track the costs and billing for that group, and so on. Since it’s just a label you can name it whatever you want. I’ve named mine “myresourcegroup”.

What is a Region? The dropdown lists every Azure datacenter in the world that you can host your web app in.

Rule of thumb is you want to put data closed to your Region, So for the UK select a European Data Centre

Here is what my window looks like now:

image

Let’s click Create and see what happens! Oh, this happens:

clip_image025

After a little while, or maybe a few minutes, the web app is set up and it’s time to actually publish your web page. Here’s the window – all you do is click Publish:

clip_image027

Within Visual studio you can see the Output window, this shows the progress of publishing your homepage to the Azure datacenter in the region you selected.

Next your Web browser will open a window and display your new web site.

clip_image029

Want to see my site live for real? It’s right here:

http://myhellocloud.azurewebsites.net/

Back to Cloud Explorer

Remember Cloud Explorer? Why did we open that thing anyway? Let’s go back and check on it. Do two things:

1) Click the Refresh button. That’s the blue circle arrow near the top.

2) Double click Web Apps in the list to expand its contents.

clip_image031

THERE IT IS! My new web app, myhellocloud, is right there in Cloud Explorer. I can right-click it (or use the Actions panel) to open it in my browser anytime. I can also open it in the Azure Portal, but we can explore that some other time.

Make a Change and Publish Again!

Your index.html file is probably still open. If not, double click it in Solution Explorer.

   1: <!DOCTYPE html>
   2: <html>
   3: <head>
   4: <title>Hello Cloud!</title>
   5: <meta charset="utf-8" />
   6: </head>
   7: <body>
   8: <h1>Hello Cloud!</h1>
   9: <p>Check out this sweet website I made in Visual Studio 
  10: 2015!</p>
  11: </body>
  12: </html>

Click your cursor at the end of that </p> line and hit Enter to start a new line. Then type something like this:

   1: <p>Updating My web page which is being hosted on 
   2: Azure datacenter!</p>

Whatever you type has to have that <p> at the start and </p> at the end.

So now my index.html looks like this:

   1: <!DOCTYPE html>
   2: <html>
   3: <head>
   4: <title>Hello Cloud!</title>
   5: <meta charset="utf-8" />
   6: </head>
   7: <body>
   8: <h1>Hello Cloud!</h1>
   9: <p>Check out this sweet website I made in Visual Studio 
  10: 2015!</p>
  11: <p>Updating My web page which is being hosted on Azure
  12: datacenter!</p>
  13: </body>
  14: </html>

To publish the page again

Just right-click your Web Site solution again over there in Solution Explorer and click Publish Web App from the pop-up window:

clip_image032

Then you’ll see this window again:

clip_image034

All you do is click Publish. The window goes away, that Output window at the bottom of the screen goes crazy for a few seconds, and then BAM you’re at your updated homepage!

If you don’t see the change you made, hit F5 to refresh your browser.

Now you’ve made your first web page in Visual Studio 2015 and Azure.

Comments (7)

  1. Will BG says:

    Hey, Thanks this was just what I was looking for.

  2. Donald Otonnaa says:

    This is a good article on how to deploy to Azure.
    The step by step process is very explanatory
    Thanks

  3. Shifali Asoka says:

    Thank you so much. This was a better approach

  4. Thank you very much. This article is indeed useful!

  5. Nice article for the starters. Thanks!

  6. Levi Hobbs says:

    Uh, I’m using VS Community 2015 and there is no Cloud Explorer option under View > Other Windows…or anything similar…

    1. Lee Stott says:

      Hi Levi, you can install the cloud explorer addin via https://visualstudiogallery.msdn.microsoft.com/84e83a7c-9606-4f9f-83dd-0f6182f13add Cloud Explorer for Visual Studio 2015 enables you to view your Azure resources and resource groups, inspect their properties, and perform key developer and diagnostics actions from within Visual Studio.

Skip to main content