Welcome to Visual Studio 2015 with Azure!


With Visual Studio 2015 and the Azure SDK, you’re ready to get started coding for the cloud. Let’s create a simple website and publish it to Azure, all within Visual Studio 2015, and see how this works.

You should have already:

(If you haven’t done these steps yet, check out our other blog entry on how to get started with Visual Studio 2015 and Azure. Then come right back here and we’ll start coding.)

Launch & Connect

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.

Once you sign in, Visual Studio 2015 will automatically recognize your Azure subscription. It’s automagic

Open 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! Or rather, here is mine:


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:

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8" />

</head>

<body>



</body>

</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.

<!DOCTYPE html>

<html>

<head>

<title>Hello Cloud!</title>

<meta charset="utf-8" />

</head>

<body>



</body>

</html>

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

<h1>Hello Cloud!</h1>

<p>Check out this sweet website I made in Visual Studio 2015!</p>

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

<!DOCTYPE html>

<html>

<head>

<title>Hello Cloud!</title>

<meta charset="utf-8" />

</head>

<body>

<h1>Hello Cloud!</h1>

<p>Check out this sweet website I made in Visual Studio 2015!</p>

</body>

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

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 here, I named my web app “myhellocloud” so my website URL will be myhellocloud.azurewebsites.net. (In fact, you can go look at mine right now if you want.) Since I used “myhellocloud” you’ll need to type something else.
  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 (let’s stick with “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. Pro coders who use Azure might 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. Each datacenter is a giant warehouse full of computers running Azure resources. So when you select a Region, you’re choosing just where in the world is the computer that your web page will actually live on. That’s kind of cool! Usually you want the one closest to you, but hey, choosing a Region is cheaper than a plane ticket so why not send your web app someplace you always wanted to go? I chose the North Central US because apparently I like the Great Lakes a lot or something.

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:

The window goes away. Quick, look at the bottom of your screen! The Output window shows a bunch of mysterious things happening, which are really just the progress of publishing your homepage to the Azure datacenter in the region you selected.

And then whoa – your browser pops open a window and suddenly there’s your homepage, live on the Internet from North Central US! (Or wherever you selected your Region.)

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.

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!

Wow, that was a lot of steps! What if I want to change one little thing and republish my homepage? Let’s try it.

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

<!DOCTYPE html>

<html>

<head>

<title>Hello Cloud!</title>

<meta charset="utf-8" />

</head>

<body>

<h1>Hello Cloud!</h1>

<p>Check out this sweet website I made in Visual Studio 2015!</p>

</body>

</html>

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

 <p>Coming at ya live from the North Central US 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:

<!DOCTYPE html>

<html>

<head>

<title>Hello Cloud!</title>

<meta charset="utf-8" />

</head>

<body>

<h1>Hello Cloud!</h1>

<p>Check out this sweet website I made in Visual Studio 2015!</p>

<p>Coming at ya live from the North Central US datacenter!</p>

</body>

</html>

Sweet! Let’s publish this again. Think it’ll take forever? Wrong! 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!

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

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

Thanks for coming on this little journey. I wonder what you’ll make next?

 

John Scott Tynes
Microsoft Imagine Program Lead


Comments (60)

  1. grldsndrs says:

    What about the database?  We need to know how to configure entities (MySql) with this Azure subscription.

  2. We'll have a blog on setting up MySQL in Azure later this month!

  3. Lari says:

    Is it too late to take part at this contest?

  4. Ahmed M Gamal says:

    Hey Scott ,

    I didn't find Cloud Explorer on my Visual Studio 2015 Enterprise, what I can do to find it ?

    Also I want to know why we use Cloud Explorer ?

    Kindest Regards.

  5. Test says:

    Do we only require to create an HTML page?

  6. Adriel says:

    Hello,first i wanna say thank you for providing such tutorial for us beginners. I have been following all the steps in this tutorial but when I publish i get a blue web page saying there is nothing on this site. Can you help me ?

  7. Bradley says:

    I have imagine cup account and Microsoft account which uses the same account. I signed in using that account on Visual Studio and it needs me to sign up for Azure Account and it needs bank details.

    Can I get help from here.

  8. Mohd Hafiz says:

    how to use php instead of .net Guys please help me...

  9. No Cloud Explorer says:

    Fresh install of Visual Studio 2015 on Windows 10. And it is not in the menu. How do I get it then?

  10. Sathyamoorthy R says:

    I have been trying to install Azure SDK 2.7 through Extensions & Updates in Visual Studio 2015 Community Ed.

    It opens Web Platform Installer 5.0 and expects me to click Install Button.

    When I click that, I get following Error,

    "Azure Storage Emulator requires LocalDb to be installed. You must enable the Microsoft SQL Server Data Tools feature in Visual Studio 2015 to install Local Db before proceeding"

    What should I do?

    I'm newbie to Azure : )

    1. Mohamed Orabi says:

      Same problem here 🙁

  11. Neal says:

    @Sathyamoorthy R.

    Search for SSDT setup and install it. Then install Azure SDK 2.7. You will see the Cloud Explorer in VS2015.

  12. zawar says:

    When I am trying to create web App, a pop up window says: "You must correct the errors on the page before you can create the web app".

    I have checked everything is correct. Is this happening because database server is not available?

    how to correct it..?

  13. Samarth says:

    There was no cloud explorer.. I downloaded it..Even then I got no such options... Please help me fix this..

    1. Tianyu Zhang says:

      Try "Ctrl+\, Ctrl+X", Please!

  14. ahmed says:

    for who when

    It opens Web Platform Installer 5.0 and expects me to click Install Button.

    When I click that, I get following Error,

    "Azure Storage Emulator requires LocalDb to be installed. You must enable the Microsoft SQL Server Data Tools feature in Visual Studio 2015 to install Local Db before proceeding"

    this is the answer

    social.technet.microsoft.com/.../error-installing-27-azure-sdk-in-visual-studio-2015-community-ed

    1. Filipe Bezerra says:

      Thank you, solve the problem.

  15. Catch2T8 says:

    After clicking the "Microsoft Azure Web Apps" button after clicking the "Publish Web app," I cannot click neither "New..." nor  "Ok" from the dialog box. What happened? I cannot proceed with deploying my first web app on Azure.

    1. Umar says:

      i'm having the same problem bro
      what to now?
      who to ask?
      have you find a solution to your problem?

  16. Question RE DOWNLOADING a site from Azure says:

    It is not very clear to me why there is no update option to retrieve the files from the remote region...Can anyone help? Let's say I am abroad but I have access to visual studio and I want to download a site which is remotely published on azure.  How can I do that using Visual Studio?  Can please anyone guide me how to do this ? What I have seen here is the reverse. You create local stuff and publish / republish ... but what if I don't have the source code ? Am I bound to remotely edit it all the time?

  17. Will Soares says:

    I already have a subscription to Microsoft Visual Studio Community 2013. Is there any problem if I use it to develop the projects for the Hello Cloud contest?

  18. Waqar Suleman says:

    tell about how we create web application

  19. Metro => Please Answer! This seems to be something missing! says:

    It is not very clear to me why there is no update option to retrieve the files from the remote region...Can anyone help? Let's say I am abroad but I have access to visual studio and I want to download a site which is remotely published on azure.  How can I do that using Visual Studio?  Can please anyone guide me how to do this ? What I have seen here is the reverse. You create local stuff and publish / republish ... but what if I don't have the source code ? Am I bound to remotely edit it all the time?

  20. Nuhman says:

    Done with all the steps, but I can't deploy my Web App to Azure since it throws me an 'Microsoft.Windows.Monitoring.Exception' Error.

    Can anyone help me with this?

    Thanks

  21. Jagruti says:

    I am using Ubuntu Operating System, any idea how to get started without visual studio and Azure?

    Thanks

  22. Oratile says:

    i cant go online...can somebody please help

  23. Whenever i try to publish the website i got this error:

    "------ Build started: Project: Website1(1), Configuration: Debug Any CPU ------

    ------ Publish started: Project: Website1(1), Configuration: Debug Any CPU ------

    Can't find existing loaded project:C:UserskhaliDocumentsVisual Studio 2015WebsitesWebsite1

    ========== Build: 1 succeeded or up-to-date, 0 failed, 0 skipped ==========

    ========== Publish: 0 succeeded, 1 failed, 0 skipped ==========

    "

  24. Wim Tilburgs says:

    I get the same error as above Khalid Mostafa. It concerns an empty VS project with a simple website attached to it that only contains css/html and js

  25. Luis Beltran says:

    @Wim, @Khalid:

    In Visual Studio, go to View -> Other Windows -> Web Publish Activity and you will see the Azure App Service Activity window.

    Click on the Publish web icon that you will find there. It should work.

    1. Tobias says:

      Publishing using the Icon works, but this deploys all items, and I want to deselect some items before deploying ...

  26. Shahan says:

    Is it fine if I use Visual Studio 13 for this contest , VS'15 is heavy and get hanged always

  27. Morteza says:

    could you make guide for these task with visual code too?so i can do these on my MAC

  28. Gostei muito do Artigo...dá um introdução interessante com as ferramentes VS e Azure

  29. Fiquei em duvida quanto ao envio de aplicações para web. Porém, com este artigo nos apresenta de forma simples os primeiros passos para publicar uma aplicação na web com Azure.

  30. jesterbratt says:

    thanks sweet little tutorial, worked like a charm

  31. Ibrahim Patel says:

    When I attempt to Publish, I don't get the 'Microsoft Azure Web Apps' as a publishing target option. Please advise.
    Thanks.

    1. Ibrahim Patel says:

      Problem Solved, the interface is somehow different...

  32. Sarah Ahmad says:

    I'm trying to publish my website, but my NEW option while publishing is not enabled, I have my azure account, also I have signed via visual studio. what can be the problem?

  33. Andre Davis says:

    Is this instruction up to date? Once I get to the publish the web app section, Visual Studio hangs and I can't go any further. -

    "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…"

    The screenshot shows a button for "Microsoft Azure Web Apps" and I don't have that button. The icon looks different and it's called "Create App Service."

    I've tried uninstalling and reinstalling different combinations of Visual Studio Versions and the Azure SDK and continue to hit the same wall.

    1. Andre Davis says:

      On my most recent attempt, I installed VS Community 2015 without an Azure SDK and got the screens in the screenshots.

      I added a step before the publishing portion by setting up my site on Azure first so that I could select it from the list rather than create a new one during development.

  34. Andre Davis says:

    If you can't see the change after updating, just clear your browser's browsing data and refresh the page.

  35. ashwanidv100 says:

    i don't get an option "NEW" for publish web app as show in the image . i don't know what the problem is , reply me as fast as possible with a solution .

  36. Akarshan Mallik says:

    Thank you!John Scott Tynes sir for teaching us about web page designing.

  37. purush says:

    I am not able to publish my web app because the window is not having microsoft azure web app option in profile
    It has only app service as publish target and even in it i am not able to select anything in service plan or resource group because the dropdown is not showing anything can you help me

  38. Ranadhir Debnath says:

    I cannot find Microsoft Azure Web App option in the Publish Web dialog box.

  39. Muhammad Tayyab says:

    In the publish app step ," new" button is not enabled, so how do i publish it ???

  40. Dathu Gaddam says:

    Very Good explanation. Thanks a lot.

  41. I have not found Cloud Explorer by i have connected visual studio with azure and deployed a web apps
    Is there any special functionalities of cloud explorer than connecting vs to cloud?

  42. Andreea says:

    Can I use visual studio 2012 for this contest ?

  43. Andreea says:

    Can I use visual studio 2012 for this contest ?

  44. Felix says:

    I'm wondering... What if I want to test it on my local machine and then publish it?

  45. Yash Yadav says:

    There are no Publishing options available on the publish web app dialog box

  46. Faha says:

    I have done all accurately as said in the blog, But failing to publish it. It s showing that "" Can't find existing loaded project:C:\Users\Personal\Documents\Visual Studio 2015\WebSites\WebSite2\"".

  47. kirby says:

    do we have to use microsoft azure?

  48. Oluwasayo says:

    wow! pretty easy. Thanks for the wonderful tips.

  49. Haseeb says:

    Great Finally a challenge to test my own skills in technology.
    Website APP+data bases every thing that a business need like Online Cloud

  50. Souvik Haldar says:

    I can't find ASP.NET empty website! Please help!

Skip to main content