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

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

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

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

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

Or you can hit Ctrl+Shift+A.

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

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

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 outthis 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 outthis 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

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…

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:

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:

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:

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

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:

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.

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.

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 outthis 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 outthis 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:

Then you’ll see this window again:

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!