Visual Studio – Sick Gaming

Posted on June 11, 2020 by — Leave a comment

Introducing “Web Live Preview”

Tim

June 11th, 2020

If you work on any type of app that has a user interface (UI) you probably have experienced that inner-loop development cycle of making a change, compile and run the app, see the change wasn’t what you wanted, stop debugging, then re-run the cycle again. Depending on the frameworks or technology you use, there are options to improve this experience such as edit-and-continue, Xamarin Hot Reload, and design-time editors. Of course, nothing will show the UI of your app like…well, your app!

For ASP.NET WebForms we have had designers for a while allowing you to switch from your WebForms code view to the Design view to get an idea what the UI may look like. As modern UI frameworks have evolved and relied more on fragments or components of CSS/HTML/etc. this design view may not always reflect the UI:

And these frameworks and UI libraries are becoming more popular and common to a web developer’s experience. We ship them in the box as well with some of our Visual Studio templates! As we looked at some of the web trends and talked with customers in our user research labs we wanted to adapt to that philosophy that the best representation of your UI, data, state, etc. is your actual running app. And so that is what we are working on right now.

Starting today you can download our preview Visual Studio extension for a new editing mode we’re calling “web live preview.” The extension is available now so head on over to the Visual Studio Marketplace and download/install the “Web Live Preview” extension for Visual Studio 2019. Seriously, go do that now and just click install, then come back and read the rest. It will be ready for you when you’re done!

Using the extension

After installing the extension, in an ASP.NET web application you’ll now have an option that says “Edit in Browser” when right-clicking on an ASPX page:

This will launch your default browser with your app in a special mode. You should immediately notice a small difference in that your view has some adorners on it:

In this mode you can now interactively select elements on this view and see the selection synchronized with your source. Even if you select something that comes from a master page, the synchronization will open that page in Visual Studio to navigate to the selection.

So what you may say, well it’s not just selection synchronization, but source as well. You may have a web control and be selecting those elements and we know that, for example, that is an asp:DataGrid component. As you make changes to the source as well, they are immediately reflected in the running app. Notice no saving or no browser refresh happening:

When working with things like Razor pages, we can detect code as well and even interact within those blocks of code. Here in a Razor page I have a loop. Notice how the selection is identified as a code loop, but I can still make some modifications in the code and see it reflected in the running app:

So even in your code blocks within your HTML you can make edits and see them reflected in your running app, shortening that inner loop to smaller changes in your process.

But wait, there’s more!

If you already use browser developer tools you may be asking if this is a full replacement for that for you. And it probably is NOT and that is by design! We know web devs rely a lot on developer tools in browsers and we are experimenting as well with a little extension (for Edge/Chrome) that synchronizes in the rendered dev tools view as well. So now you have synchronization across source representation (including controls/code/static) to rendered app, and with dev tools DOM tree views…and both ways:

We have a lot more to do, hence this being a preview of our work so far.

Current constraints

With any preview there are going to be constraints, so here they are for the time of this writing. We eventually see this just being functionality for web developers in Visual Studio without installing anything else, so the extension is temporary. For now, we support the .NET Framework web project types for WebForms and MVC. Yes, we know, we know you want .NET Core and Blazor support. This is definitely on our roadmap, but we wanted to tackle some very known scenarios where our WebForms customers have been using design view for a while. We hear you and this has been echoed in our research as well…we are working on it!

For pure code changes outside of the ASPX/Razor pages we don’t have a full ‘hot reload’ story yet so you will have to refresh the browser in those cases where some fundamental object models are changing that you may rely on (new classes/functions/properties, changed data types, etc.). This is something that we hope to tackle more broadly for the .NET ecosystem and take all that we have learned from customers using similar experiments we have had in this area.

The extension works with Chromium-based browsers such as the latest Microsoft Edge and Google Chrome browsers. This also enables us to have a single browser developer tools extension that handles that integration as well. To use that browser extension, you will have to use developer mode in your browser and load the extension from disk. This process is fairly simple but you have to follow a few steps which are documented on adding and removing extensions in Edge. The location of the dev tools plugin is located at C:\Program Files (x86)\Microsoft Visual Studio\2019\Common7\IDE\Extensions\Microsoft\Web Live Preview\BrowserExtension (assuming you have the default Visual Studio 2019 install location and ensuring you specify Community/Professional/Enterprise you have installed). Please note this is also a temporary solution as we are in development of these capabilities. Any final browser tools extensions would be distributed in browser stores.

Summary

If you are one of our customers that can leverage this preview extension we’d love for you to download and install it and give it a try. If you have feedback or issues, please use the Visual Studio Feedback mechanism as that helps us get diagnostic information for any issues you may be facing. We know that you have a lot of tools at your disposal but we hope this web live preview mode will make some of your flow easier. Nothing to install into your project, no tool-specific code in your source, and (eventually) no additional tools to install. Please give it a try and let us know what you think!

On behalf of the team working on web tools for you, thank you for reading!

Posted on May 6, 2020 by — Leave a comment

Configuring Azure Services and emulators using Visual Studio

Angelos

May 6th, 2020

Starting with Visual Studio 16.6 Preview 2 the Connected Services tab offers a new experience called Service Dependencies. You can use it to connect your app to Azure services such as Azure SQL, Storage, Key Vault and many others. Wherever possible local emulation options are also available and more are planned for the future.

Add a new Service Dependency

You can easily and quickly get the right NuGet packages, start-up code and configuration added to your project for every supported Azure service. You simply click add, pick the service from the list and follow the 2-3 steps in the wizard. Here is an example of adding Azure Cosmos DB

Provision a new instance of an Azure service without leaving the IDE

In the above example we re-used an existing instance of Azure Cosmos DB, but you can also create new instances of all the supported Azure services without leaving the IDE. Here is Azure Cosmos DB again as an example of provisioning Azure resources from within Visual Studio

Configure service dependencies for remote environments

Using Visual Studio to publish your app to Azure App Service gives you the opportunity to configure these dependencies for the remote environment you are publishing to. Right click > Publish on your project in Solution Explorer and go through the wizard to create a new publish profile for Azure App Service. At the end you will see a Service Dependencies list already containing all of your application’s dependencies ready to be configured for this remote environment

How it works under the covers

To support all of this Visual Studio creates two new files visible in Solution Explorer under Properties called serviceDependencies.json and serviceDependencies.local.json. Both of these files are safe to check in as they do not contain any secrets.

Visual Studio also creates a file called serviceDependencies.local.json.user which is not visible in Solution Explorer by default. This file contains information that could be considered a secret (e.g. resource IDs in Azure) and we do not recommend you check it in.

Service References

While working on the Connected Services tab we took the opportunity to consolidate our UX and make it the new home for the existing OpenAPI & gRPC Service References table. With everything being in one place now we have routed the Right Click > Add > Service Reference… context menu item in Solution Explorer to the consolidated Connected Services tab.

Feedback

Please give all of the above a try and let us know what you think. Do you wish we supported a feature or Azure service that we don’t already? Please let us know! You can submit a new feature suggestion, leave us comments on this post and report any issues you may encounter using the built-in tools.

Posted on April 2, 2019 by — Leave a comment

Visual Studio 2019 now available: Download today to code faster, work smarter and create the future

John

April 2nd, 2019

Visual Studio 2019 is generally available today and available for download. With Visual Studio 2019, you and your teams will become more productive in building current and future projects as you benefit from the innovation in the IDE that makes every keystroke count.

As we’ve shared earlier, Visual Studio 2019 improves on Visual Studio 2017 in a few areas. It helps you get into your code more quickly by making it simpler to clone a Git repo or to open an existing project or folder. It also introduces improvements to the template selection screen to make it easier to start a new project. While you’re coding, you’ll notice that Visual Studio 2019 improves code navigation and adds many refactorings, as well as a document health indicator and one-click code clean-up to apply multiple refactoring rules. There are also improvements to the debugging experience, including data breakpoints for .NET Core apps that help you break only on value changes you’re looking for. It also includes get AI-assisted code completion with Visual Studio IntelliCode.

These capabilities work with both your existing project and new projects – from cross-platform C++ applications, to .NET mobile apps for Android and iOS written using Xamarin, to cloud-native applications using Azure services. The goal with Visual Studio 2019 is to support these projects from development, through testing, debugging, and even deployment, all while minimizing the need for you to switch between different applications, portals, and websites.

Check out the launch event

Be sure to tune in to the Visual Studio 2019 Launch Event today at launch.visualstudio.com, or watch it on-demand later, where we’ll go into a lot more depth on these features and many others. During the launch event, we’ll discuss and demo Visual Studio 2019. We’ll also share content on Visual Studio 2019 for Mac and Visual Studio Live Share, both of which are also releasing today. There are also almost 70 local launch events around the world you can join today and over 200 between now and end of June. Thank you for your enthusiasm about our best release yet.

To help kick-start your experience with Visual Studio 2019, we’ve partnered with Pluralsight and LinkedIn Learning to bring you new training content. Pluralsight has a new, free, Visual Studio 2019 course (available until April 22, 2019). A path and skill assessment are also available, so you can dive right in. On LinkedIn Learning you’ll find a new course (free until May 2^nd) covering the highlights in Visual Studio 2019. Of course, you can always head over to VisualStudio.com and our docs to find out what’s new, or dig into the release notes for all the details.

Thank you for your ongoing feedback

We could not have made this happen without you. Ever since we released Preview 1 of Visual Studio 2019 in December, we’ve received an incredible amount of feedback from you, both on what you like and what you want to see improved. As always, you can continue to use the Report a Problem tool in Visual Studio or head over to the Visual Studio Developer Community to track your issue or suggest a feature. We’ve made many tweaks and improvements along the way to address your feedback, rest assured that we will continue doing so in minor releases going forward.

We want to sincerely thank you for taking the time to provide the feedback that we use to shape Visual Studio 2019 into the best developer environment for you. We can’t wait to see what you’ll create with Visual Studio 2019.

Download Visual Studio 2019

Posted on February 6, 2019 by — Leave a comment

Changes to the web and JSON editor APIs in Visual Studio 2019

Andrew

February 6th, 2019

<!–Posted on February 6, 2019 (February 18, 2019) by Andrew B. Hall [MSFT]–>

In Visual Studio 2019 Preview 2, The Web Tools team made some changes to improve extensibility features for extension developers. To standardize interfaces, the CSS, HTML, JSON and CSHTML editors renamed their assemblies as per the following table:

Old	New
Microsoft.CSS.Core	Microsoft.WebTools.Languages.Css
Microsoft.CSS.Editor	Microsoft.WebTools.Languages.Css.Editor
Microsoft.Html.Core	Microsoft.WebTools.Languages.Html
Microsoft.Html.Editor	Microsoft.WebTools.Languages.Html.Editor
Microsoft.VisualStudio.Html.Package	Microsoft.WebTools.Languages.Html.VS
Microsoft.JSON.Core	Microsoft.WebTools.Languages.Json
Microsoft.JSON.Editor	Microsoft.WebTools.Languages.Json.Editor
Microsoft.VisualStudio.JSON.Package	Microsoft.WebTools.Languages.Json.VS
Microsoft.VisualStudio.Web.Extensions	Microsoft.WebTools.Languages.Extensions
Microsoft.Web.Core	Microsoft.WebTools.Languages.Shared
Microsoft.Web.Editor	Microsoft.WebTools.Languages.Shared.Editor

To avoid potential parse issues, the JSON parse tree changed behavior. When you call JsonParserService.GetTreeAsync, you now get a snapshot of the JSON parse tree. As an extension developer, you can now request and maintain snapshots of the JSON parse tree.

Posted on November 9, 2018 by — Leave a comment

When should you right click publish

Some people say ‘friends don’t let friends right click publish’ but is that true? If they mean that there are great benefits to setting up a CI/CD workflow, that’s true and we will talk more about these benefits in just a minute. First, let’s remind ourselves that the goal isn’t always coming up with the best long-term solution.

Technology moves fast and as developers we are constantly learning and experimenting with new languages, frameworks and platforms. Sometimes we just need to prototype something rather quickly in order to evaluate its capabilities. That’s a classic scenario where right click publish in Visual Studio provides the right balance between how much time you are going to spend (just a few seconds) and the options that become available to you (quite a few depending on the project type) such as publish to IIS, FTP & Folder (great for xcopy deployments and integration with other tools).

Continuing with the theme of prototyping and experimenting, right click publish is the perfect way for existing Visual Studio customers to evaluate Azure App Service (PAAS). By following the right click publish flow you get the opportunity to provision new instances in Azure and publish your application to them without leaving Visual Studio:

When the right click publish flow has been completed, you immediately have a working application running in the cloud:

Platform evaluations and experiments take time and during that time, right click publish helps you focus on the things that matter. When you are ready and the demand rises for automation, repeatability and traceability that’s when investing into a CI/CD workflow starts making a lot of sense:

Automation: builds are kicked off and tests are executed as soon as you check in your code
Repeatability: it’s impossible to produce binaries without having the source code checked in
Traceability: each build can be traced back to a specific version of the codebase in source control which can then be compared with another build and figure out the differences

The right time to adopt CI/CD typically coincides with a milestone related to maturity; either and application milestone or the team’s that is building it. If you are the only developer working on your application you may feel that setting up CI/CD is overkill, but automation and traceability can be extremely valuable even to a single developer once you start shipping to your customers and you have to support multiple versions in production.

With a CI/CD workflow you are guaranteed that all binaries produced by a build can be linked back to the matching version of the source code. You can go from a customer bug report to looking at the matching source code easily, quickly and with certainty. In addition, the automation aspects of CI/CD save you valuable time performing common tasks like running tests and deploying to testing and pre-production environments, lowering the overhead of good practices that ensure high quality.

As always, we want to see you successful, so if you run into any issues using publish in Visual Studio or setting up your CI/CD workload, let me know in the comment section below and I’ll do my best to get your question answered.

Posted on June 6, 2018 by — Leave a comment

Check out what’s next for Visual Studio

Since we launched Visual Studio 2017 in March of that year, it has become our most popular Visual Studio release ever. Your feedback has helped our team publish seven updates since our initial GA, which have improved solution load performance, build performance, and unit test discovery performance. We’ve also made Visual Studio 2017 our most accessible releases ever, helping developers with low-vision or no-vision be more productive.

Our team is focused on introducing features that make every developer more productive: better navigation features like “go to all” (Ctrl + ,), features to improve code quality like Live Unit Testing, and most recently, to enable real time collaboration with Live Share. And we have even started to show how we will use artificial intelligence to assist developers with IntelliCode.

Now, it’s time to start to look at what comes next.

The short answer is Visual Studio 2019

Because the Developer Tools teams (especially .NET and Roslyn) do so much work in GitHub, you’ll start to see check-ins that indicate that we’re laying the foundation for Visual Studio 2019, and we’re now in the early planning phase of Visual Studio 2019 and Visual Studio for Mac. We remain committed to making Visual Studio faster, more reliable, more productive for individuals and teams, easier to use, and easier to get started with. Expect more and better refactorings, better navigation, more capabilities in the debugger, faster solution load, and faster builds. But also expect us to continue to explore how connected capabilities like Live Share can enable developers to collaborate in real time from across the world and how we can make cloud scenarios like working with online source repositories more seamless. Expect us to push the boundaries of individual and team productivity with capabilities like IntelliCode, where Visual Studio can use Azure to train and deliver AI-powered assistance into the IDE.

Our goal with this next release is to make it a simple, easy upgrade for everyone – for example, Visual Studio 2019 previews will install side by side with Visual Studio 2017 and won’t require a major operating system upgrade.

As for timing of the next release, we’ll say more in the coming months, but be assured we want to deliver Visual Studio 2019 quickly and iteratively. We’ve learned a lot from the cadence we’ve used with Visual Studio 2017, and one of the biggest things we have learned is that we can do a lot of good work if we focus on continually delivering and listening to your feedback. There are no bits to preview yet, but the best way to ensure you are on the cutting edge will be to watch this blog and to subscribe to the Visual Studio 2017 Preview.

In the meantime, our team will continue to publish a roadmap of what we’re planning online, work in many open source repositories, and take your feedback through our Developer Community website. This blog post is just another example of sharing our plans with you early, so you can plan and work with us to continue to make Visual Studio a great coding environment.

John

John Montgomery, Director of Program Management for Visual Studio
@JohnMont

John is responsible for product design and customer success for all of Visual Studio, C++, C#, VB, JavaScript, and .NET. John has been at Microsoft for 17 years, working in developer technologies the whole time.

Posted on May 22, 2018 by — Leave a comment

Announcing ASP.NET Providers Connected Service Visual Studio Extension

Provider pattern was introduced in ASP.NET 2.0 and it gives the developers the flexibility of where to store the state of ASP.NET features (e.g. Session State, Membership, Output Cache etc.). In ASP.NET 4.6.2, we added async support for Session State Provider and Output Cache Provider. These providers provide much better scalability, and enables the web application to adapt to the cloud environment. Furthermore, , we also released SqlSessionStateProviderAsync, CosmosDBSessionStateProviderAsync, RedisSessionStateProvider and SQLAsyncOutputCacheProvider. Through these providers the web applications can store the Session State in Azure resources like, SQL Azure, CosmosDB, and Redis Cache, and Output Cache in SQL Azure. With these options, it may be not very straightforward to pick one and configure it right in the application. Today we are releasing ASP.NET Providers Connected Service Visual Studio Extension to help you pick the right provider and configure it properly to work with Azure resources. This extension will be your one-stop shop where you can install and configure all the ASP.NET providers that are Azure ready.

How to install the extension

The ASP.NET Providers Connected Service Extension can be installed on Visual Studio 2017. You can install it through Extensions and Updates in Visual Studio and type “ASP.NET Providers Connected Service” in the search box. Or you can download the extension from Visual Studio MarketPlace.

How to use the extension

To use the Extension, you need to make sure that your web application targets to .NET Framework 4.6.2 or higher. You can open the extension through right clicking on the project, selecting Add and clicking on Connected Service. You will see all the Connected Services installed on your VS which apply to your project.

After clicking on Microsoft ASP.NET Providers extension. You will see the following wizard window, you can choose the provider you want to install and configure for your ASP.NET web application. Currently we have two sets of providers, Session State providers and Output Cache provider.

Select a provider and click on the Next button. You will see a list of providers that apply to your application, which connects with Azure resources. Currently we have SQL SessionState provider, CosmosDB SessionState provider, RedisCache Sessionstate provider and SQL OutputCache provider.

After the provider is chosen, the wizard window will lead you to select an Azure instance which will be used by the provider selected. In order to fetch the Azure instances that apply to the selected provider, you will need to sign in with your account in Visual Studio. Then Select an Azure instance and click on the Finish button, the extension will install the relevant Nuget packages and update the web.config file to connect the provider with that selected Azure instance.

Things to be aware of

If the application is already configured with a provider and you want to install a same type of provider, you need to remove that provider first. E.g. your application is using SQL SessionState provider and you want to switch to CosmosDB SessionState provider. In this case, you need to remove the SessionState Provider settings in the web.config, then you can use ASP.NET Providers Connected Services to install and configure the CosmosDB SessionState provider.
If you are installing Async SQL SessionState provider or Async SQL OutputCache provider, you need to replace the user name and password in the connection string in web.config added by ASP.NET Providers Connected Services. As you may have multiple accounts in your Azure SQL Database instance.

Summary

ASP.NET Providers Connected Services helps you install and configure ASP.NET providers for your web application to consume Azure services. Our goal of this Visual Studio extension is to make it easier and provide a central place to help you configure different providers for the ASP.NET web applications and connect your web applications with Azure. Please install the extension from Visual Studio Marketplace today and let us know your feedback.

Posted on May 18, 2018 by — Leave a comment

Exploring Azure App Service – Web Apps and SQL Azure

There is a good chance that your web app uses a database. In my previous post introducing Azure App Service, I showed some of the benefits of hosting apps in Azure App Service, and how easy it is to get a basic site running in a few clicks. In this post I’ll show how to set up a SQL Azure database along with an App Service Web App from Visual Studio, and apply Entity Framework automatically as part of publish.

Let’s get going

To get started, you’ll first need:

Visual Studio 2017 with the ASP.NET and web development workload installed (download now)
An Azure account:
Any ASP.NET or ASP.NET Core app that uses a SQL Database. For the purposes of this post, I’ll create a new ASP.NET Core app with Individual Authentication:
- On the “New ASP.NET Core Web Application” dialog, click the “Change Authentication” button.
Then select the “Individual User Accounts” radio button and click “OK”.
Click OK.

I can now run my project locally (F5) and create user accounts which will be stored in a SQL Server Express Local DB on my machine.

Publishing to App Service with a Database

Let’s publish our application to Azure. To do this, I’ll right click my project in Solution Explorer and choose “Publish”

This brings up the Visual Studio publish target dialog, which will default to the Azure App Service pane with the “Create new” radio button selected. To continue click “Publish”.

This brings up the “Create App Service” dialog (see the “Key App Service Concepts” section of my previous post for an explanation of the fields). To create a SQL Database for our app to use, click the “Create a SQL Database” link in the top right section of the dialog.

This will bring up the “Configure SQL Database” dialog.

Note: If you are using a Visual Studio Enterprise subscription, many regions will not let you create a SQL Azure database so I recommend choosing “East US” or “West US 2” depending on where you are located (we are adding logic in in the Visual Studio 2017 15.8 update to remove those regions if that’s the case, but for now you’ll need to choose an appropriate region). To do this, click the “New…” button next to your “Hosting Plan Dropdown” and pick the appropriate region (“East US” or “West US 2”).
Since I don’t have an existing SQL Server, the first thing I need to do is create a server to host the database, so I’ll click the “New…” button next to the “SQL Server” dropdown,
Choose a location for the database.
Provide an administrator user name and password for the server
Click “OK”
Make sure the connection string name field matches the name of the connection string your application uses to access the database (if using a new project, it is “DefaultConnection” which will be prepopulated for you).
Click OK
Then click the “Create” button on the “Create App Service” dialog

It should take ~2-3 minutes to create all of the resources in Azure, then your application will publish and a browser will open to your home page.

Configuring EF Migrations

At this point there is a database for your app to use in the cloud, but EF migrations have not been applied, so any functionality that relies on the database (e.g. Registering for a user account) will result in an error.

To apply EF migrations to the database:

Click the “Configure…” button on the publish summary page
Navigate to the “Settings” tab
When it finishes discovering data contexts, expand the “Entity Framework Migrations” section, and check the “Apply this migration on publish” for all of the contexts it finds
Click “Save”
Click Publish again, in the output window you should see “Generating Entity framework SQL Scripts” and then “Generating Entity framework SQL Scripts completed successfully”

That’s it, your web app and SQL Azure database are both configured and running in the cloud.

Conclusion

Hopefully, this post showed you how easy it is to try App Service and SQL Azure. We believe that for most people, App Service is the easiest place to get started with cloud development, even if you need to move to other services in the future for further capabilities (compare hosting options). As always, let us know if you run into any issues, or have any questions below or via Twitter.

Posted on May 2, 2018 by — Leave a comment

Exploring Azure App Service – Introduction

Have you ever needed to quickly stand up a web site, or web API app that was publicly available? Is your team or organization thinking about moving to the cloud but aren’t sure the best place to start? One of the first places you should look is Azure App Service Web Apps. In this post we’ll look at how easy it is to get started, and a quick overview of key concepts.

App Service offers the following benefits:

A fully managed platform, meaning Azure automatically updates the operating system and runtime as security and stability fixes are released.
10 free plans to every subscriber, so it won’t cost you money or credits to try your app in Azure.
First class support in Visual Studio, meaning that you can go from your app running on your local machine to running in App Service in less than 2 minutes.
If offers deployment slots, which enable you to stage multiple versions of your app, and route varying amounts of traffic to the various versions (i.e. do A/B testing, or a ringed release model).
Scale up and down quickly and automatically based on load
For a more see Why use Web Apps?

In this blog post, I’ll provide an overview of App Service’s key features and concepts by walking through using Visual Studio to publish an ASP.NET application to Azure App Service.

Let’s get going

To get started, you’ll first need:

Visual Studio 2017 with the ASP.NET and web development workload installed (download now)
An Azure account:
Any ASP.NET or ASP.NET Core app, for the purposes of this post, I’ll use a basic ASP.NET Core app

To start I’ll right click my project in Solution Explorer and choose “Publish”

This brings up the Visual Studio publish target dialog, which will default to the Azure App Service pane. The “Create new” radio button is already selected to, so I’ll click the “Publish” button on the bottom right.

This will open the Create App Service dialog in Visual Studio.

Key App Service Concepts

The dialog has four fields that represent key concepts of creating an App Service:

App Name: Will be the default public facing URL in Azure (it will be of the form https://<App_Name>.azurewebsites.net –you can configure domain names later if needed).
Subscription: The Azure Subscription to create the resources in if you have more than one
Resource Group: Groups your application and any dependent resources (SQL Databases, Storage Accounts, etc., see resource group design to learn more). To edit the name, click “New…”.
Hosting Plan: The hosting plan is a set of reserved resources for your app. You can choose to host multiple apps in a single hosting plan (we’ll explore this further in a minute).

One concept that can be confusing is the relationship between the “Hosting Plan” (or App Service plan”) and the “App Service”:

The Hosting/App Service plan is the virtual machine resources you are reserving in Azure to host your application. This is what you are paying or using credits for.
The App Service is your app and associated settings that run inside of the plan. You can run multiple apps (App Services) in the same plan (virtual machine) with the same implications as sharing any other server or VM between apps.

To explore the App Service plan further, click the “New…” button next to the Hosting Plan dropdown to open the “Configure Hosting Plan” dialog that has three fields:

App Service Plan: A non-public facing name for the plan.
Location: Is the region your app will run in. You generally want to pick a region that is close to customers that will be accessing the site.
Size: The size of the virtual machine you want to reserve for your application and the capabilities you want (e.g. deployment slots require a Standard or Premium plan).
Note: Free and Shared plans run in the same VM as other App Service apps and are intended for development and testing, see App Service plan overview for more details

Publishing the app

At this point I’m ready to publish my app to App Service. The bottom right panel of the Create App Service dialog will show me all the resources I’m going to create in Azure (in this case a Hosting Plan and App Service). Everything looks good, so I just need to click “Create”:

Visual Studio will create all the resources on my behalf, publish my application, and open my default browser to the URL of the published application.

Conclusion

Hopefully, this overview of App Service concepts has been helpful and inspired you to give App Service a try. We believe that for many people, App Service is the easiest place to get started with cloud development, even if you need to move to other services in the future for further capabilities (compare hosting options to see additional choices). As always, let us know if you run into any issues, or have any questions below or via Twitter. If you’re interested in exploring more, see the next post in our series introducing how to setup and use SQL Server with App Service

Category: Microsoft Webdev

Tags: Azure, Visual Studio