step by step guides - microsoft · 3 see that actions pane at the bottom? it’s pretty handy: •...

Step by step guidesDeploying your first web app to your FREE Azure Subscription with Visual Studio 2015

Open Visual Studio Community 2015 Sign in to your Microsoft Account by clicking “Sign in” in the upper right corner (if you haven’t already). If you have multiple accounts, make sure this is the same one that you previously used with DreamSpark and Azure.

Open Visual Studio 2015 Cloud Explorer Cloud Explorer is Visual Studio 2015’s direct connection to Azure. Open that tool now from the menu by clicking:View / Other Windows / Cloud Explorer

Websites are a mainstay of online activities – whether you want a personal site for yourself or a band, or you’re running a business. In this Quick Start guide, we’ll highlight just how easy it is to set up your own web app on Azure services using Visual Studio 2015 and the Azure SDK, in the company of Microsoft Technical Evangelist Lee Stott.

Here’s what you need…Visual Studio Community 2015: https://www.dreamspark.com/Product/Product.aspx?productid=101Azure SDK 2.7:https://azure.microsoft.com/blog/2015/07/20/announcing-the-azure-sdk-2-7-for-net/You’ll also need to have activated your free Azure student subscription through Microsoft DreamSpark: https://www.dreamspark.com/Product/Product.aspx?productid=99See here for step by step instructions: http://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

Okay, let’s get started!

1

2

You’re in! Visual Studio 2015 will automatically recognize your Azure subscription key.

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

3

See that Actions pane at the bottom?

It’s pretty handy:

• “Open in portal” will open your web app within the Azure Portal

• “Open in Browser” pops open your default web browser and goes straight to your live web app.

Note: you can also bring up the Actions pane if you right click on one of your web apps.

Create a New Web Site Solution

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

Go to the menu and click:

File / New / Web Site…

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

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

4Make a Homepage

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

Add / Add New Item

Alternatively, 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:

By default, it’s called HtmlPage.html. You’re going to make this the homepage for your project, so it’s best to rename it to index.html. That’s a standard name for a homepage and web browsers will find it more easily.Tip: 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

window2) Look below Solution Explorer in the Properties window where it

shows the File Name field. Click HtmlPage.html there and re-name it to index.html.

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

5Code Your Web Page

Now it’s time to make a very simple web page, so that you can see Visual Studio 2015 and Azure in action. Your index.html file should now be open in the main window – if it isn’t, then double click it in the Solution Explorer.)

The file already has this HTML 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 the <title> and </title> tags (line 4). You need to give your web page a title – let’s call it Hello Cloud! Just type that between the tags.

1: <!DOCTYPE html>

2: <html>

3: <head>

4: <title>Hello Cloud!</title>


6: </head>

7: <body>

8: </body>

9: </html>

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

1: <h1>Hello Cloud!</h1>

2: Check out this sweet website I made in Visual Studio

3: 2015!

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

1: <!DOCTYPE html>

2: <html>

3: <head>



6: </head>

7: <body>



10: 2015!

11: </body>

12: </html>

Done! All you need to do is publish your page as a web app to Azure.

6Publish Your Web App

Back in Solution Explorer, right-click on your WebSite solution and click Publish 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. You’re going to name your web app and assign a bunch of Azure attributes to

it: an App Service plan, a Resource group, and a Region.

Here’s the window:

First up, 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”, so choose wisely!

In my example it’s called “myhellocloud”, so my website URL is 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 green tick will appear when you’ve typed a URL that nobody else has selected.

Now your window looks like this:

Here is what my window looks like now:

Now for the other Azure attributes.

• For App Service plan, click the dropdown and select “Create new App Service plan”. Another field will appear – we’ll deal with that in a moment.

• For Resource group, click the dropdown and select “Create new resource group”. As before, a new field will appear.

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

Now for the new App Service plan and resource group name fields.

What is an App Service plan? It’s 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 named mine “myappserviceplan”.

What is a Resource group? It’s a label that lets you group multiple Azure resources together, making it easy to select them all at once in the Azure Portal. Developers generally create resource groups for 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 named mine “myresourcegroup”.

What is a Region? The dropdown lists every Azure datacenter in the world that you can host your web app in. The rule of thumb is you want to put your data close to your Region, so for the UK select a European Data Centre.

Here’s the window – all you do is click the Publish button:

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

Want to see my site live for real? It’s right here: http://myhellocloud.azurewebsites.net/

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

Now click the Create button and 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.

7

8

Go back to Cloud Explorer

Remember Cloud Explorer back in Step 2?

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.

Make a Change and Publish Again!

THERE IT IS! Your new web app is right there in Cloud Explorer (the example shows myhellocloud).

You can right-click it (or use the Actions panel) to open it in your browser anytime.

You can also open it in the Azure Portal, but we can explore that some other time.

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

1: <!DOCTYPE html>

2: <html>

3: <head>



6: </head>

7: <body>



10: 2015!

11: </body>

12: </html>

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

1: Updating My web page which is being hosted on

2: Azure datacenter!

Whatever you type needs the paragraph tags, at the start and at the end.

So now my index.html looks like this:

1: <!DOCTYPE html>

2: <html>

3: <head>



6: </head>

7: <body>



10: 2015!

11: Updating My web page which is being hosted on Azure

12: datacenter!

13: </body>

14: </html>

To publish the page again

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

That’s it! You have made your first web page in Visual Studio 2015 and Azure. Of course, you’ll be able to produce a more impressive-looking page than mine in no time!

With thanks to Lee Stott, Microsoft Technical Evangelist

© 2015 Microsoft Corporation. All rights reserved.

Then you’ll see this window again:

All you do is click the Publish button.

The window goes away, that Output window at the bot-tom 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.

step by step guides - microsoft · 3 see that actions pane at the bottom? it’s pretty handy: •...

Documents