Step by step guides Deploying your first web app to your FREE Azure Subscription with Visual Studio 2015
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=101 Azure 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=99 See here for step by step instructions: http://blogs.msdn.com/b/uk_faculty_connection/archive/2015/07/19/microsoft-azure-free-websites-and-blogsvia-microsoft-imagine-amp-dreamspark-and-setting-up-wordpress-on-azure-for-students.aspx Okay, let s get started! 1 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. You re in! Visual Studio 2015 will automatically recognize your Azure subscription key. 2 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 And just like that, here s your Azure subscription!
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. 3 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!
4 Make a Homepage From Solution Explorer, right click on your WebSite solution and click: Add / Add New Item This gives you a new window where you ll click HTML Page and Add: Alternatively, hit Ctrl+Shift+A. 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 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!
5 Code 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> 5: <meta charset= utf-8 /> 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: <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! All you need to do is publish your page as a web app to Azure.
6 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. 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. First up, click in the blank field by Web App name and type a name for your web app. Here s the window: 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 for the other Azure attributes. Now your window looks like this: 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. Here is what my window looks like now: 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.
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. 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. 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. Want to see my site live for real? It s right here: http://myhellocloud.azurewebsites.net/
7 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. 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. 8 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 needs the paragraph tags, <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 WebSite 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 the Publish button. 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. 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.