1. Home
  2. Training Library
  3. Microsoft Azure
  4. Courses
  5. 70-534 - Design Web and Mobile Apps

Creating a Web App

Contents

keyboard_tab
play-arrow
Start course
Overview
DifficultyIntermediate
Duration52m
Students516

Description

This course covers the Design Azure Web and Mobile Apps part of the 70-534 exam, which is worth 5–10% of the exam. The intent of the course is to help fill in an knowledge gaps that you might have, and help to prepare you for the exam.

Transcript

Welcome back. In this lesson, we'll be talking about creating a web app and we'll be deploying that web app to app service.

Since we'll be talking about web apps throughout this course, it makes sense to start by actually creating one with Visual Studio. Visual Studio 2013 and greater all make interacting with Azure rather trivial. It's certainly not a requirement that development happens with Visual Studio.

However, if you ask any software engineer who has .NET development, they're likely gonna tell you that it's the best IDE for .NET development so that's what we're gonna use to create a web app. It's worth mentioning web apps aren't new to Azure. They've existed for ages. The difference here is that we're deploying the app to Azure's app service platform as a service offering.

So let's start in Visual Studio, we're gonna select File, New and then Project. We'll select the web option under Templates and then we're just gonna leave the default option. We're not gonna go into detail on the other options since it's outside of the scope of this course. We're gonna give it a name and select OK.

Alright, for this example, I'm gonna use an MVC app. Now, it wants to know about creating our app service. I'm gonna leave the defaults here and just click Create and now our project has been created locally, however it doesn't exist in Azure until we publish it.

So creating a web app that we'll be hosting in Azure app service is not different than web apps that we've always created. The difference here is that it ends up living in a different place so let's see how to get this into Azure.

We're gonna right click on the app in our Solution Explorer and we'll select Publish. It'll use the web deploy option and it has the information from our connection already populated.

If we add an existing app in Azure already, we could download that profile and then use it here. However, we are just gonna create a new one so we'll click the Validate Connection option and in a moment hopefully it's gonna come back indicating that this was successful.

Okay, there it is. So you can see that we have some settings we can go through in the side nav here. We don't need to edit any of these in this example so I'm just gonna click Publish and it's gonna take just a moment and there we are.

This is a site running from Azure. So you can see why we're using Visual Studio. The integration is so nice that we never had to leave the IDE. Let's make a change to the text on the page and then redeploy it so let's just change this text here and save it, great.

Now, we're gonna publish this again and it's gonna take just another moment and there, our text is now live. So for our example we used C#, however app service also supports Python, PHP, Java, Node.js and while we did just use C#, any .NET language is supported. So we do have some limits on the supported languages, however we have pretty good coverage.

Okay, now that we've created an app, we should talk about debugging. I know that these tasks are often handled by developers. However, this is a useful skill for architects to have so let's check out how we can remotely debug our web app.

In order to remotely debug, we first need to deploy the app to Azure with the debug configuration so I've already done that and once that's set, we can use the Cloud Explorer to find our app and then we can attach a debugger.

Okay, the page is loaded and at the top of the page, we have this header here it says Deployed to Azure and below that you can see we have this H3 and it just say Hello World. What I'm gonna do is change that Hello World so let's use the breakpoint in the index method of the home controller to make that change.

Alright, so we've hit the breakpoint and now let's edit that message with the immediate window. We're gonna change it to live debugging and we'll continue. Okay and when the page loads, you can see that the H3 is now set to Live debugging. And you may be wondering what did we actually just do here? What we did is we debugged our web application that is running in Azure with our local developer tools.

As architects, if we're gonna recommend using Azure app service to host web apps, then the topic of debugging is bound to come up so knowing how to do this is very useful for the real world as well as for the exam. There are some additional tools that we can use for debugging and we can access those from the Azure portal.

Let's check those out. From the web app blade, we can scroll down to the development tools section and we have a few options here. The ones that we're gonna focus on are the console and the advanced tools.

Now what the console does is it's gonna spawn a command line shell from a sandbox environment and we can use this to run unprivileged commands to check environment variables, get system info, etc. And now the next one that I like is the advanced tools which launches Kudu and with Kudu, we have all kinds of diagnostic information with an intuitive user interface.

So we can see we have environment variables at a glance, we can list off running processes, we can spawn shells which is similar to the console that we looked at a moment ago and we can even spawn PowerShell terminals as an option so this is a very powerful tool and it gives us some additional options when it comes to debugging.

Alright, we've covered a lot in this lesson so let's summarize what we've done. Azure app service supports several languages including the .NET languages, Python, PHP, Java and Node.js.

Also, when it comes to building web apps, Visual Studio makes it easy because Visual Studio 2013 and greater is really well integrated. As you saw in the demo, we never had to leave Visual Studio to deploy our web app. Using pass can sometimes limit our ability to effectively debug. However, that's not the case here.

We can use Visual Studio to remotely debug, we can use Azure app service console as well as Kudu under the advanced options.

So now that we've created an app, let's talk more about the scalability and performance of app service hosted web apps in our next lesson so if you're ready to keep going then let's get started.

About the Author

Students35658
Courses29
Learning paths15

Ben Lambert is the Director of Engineering and was previously the lead author for DevOps and Microsoft Azure training content at Cloud Academy. His courses and learning paths covered Cloud Ecosystem technologies such as DC/OS, configuration management tools, and containers. As a software engineer, Ben’s experience includes building highly available web and mobile apps.

When he’s not building the first platform to run and measure enterprise transformation initiatives at Cloud Academy, he’s hiking, camping, or creating video games.