• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Codemotion Magazine

We code the future. Together

  • Discover
    • Events
    • Community
    • Partners
    • Become a partner
    • Hackathons
  • Magazine
    • Backend
    • Frontend
    • AI/ML
    • DevOps
    • Dev Life
    • Soft Skills
    • Infographics
  • Talent
    • Discover Talent
    • Jobs
    • Manifesto
  • Companies
  • For Business
    • EN
    • IT
    • ES
  • Sign in
ads

Antonio Turibbio LiccardiDecember 3, 2019

A first web app on Microsoft Azure

Cloud
A first web app on Microsoft Azure
facebooktwitterlinkedinreddit

In this article you will learn how to create an ASP.NET core app and how to deploy that app on Microsoft Azure.

Required software

Let’s begin with a few mandatory requirements for the development machine. First, we must install .NET Core. This is a cross-platform framework for developing various kinds of apps (i.e., web, desktop, console). The latest version is available for download at this link, and the installer will provide the current version of .NET SDK (including the .NET CLI), the .NET Core runtime, and ASP.NET Core runtime according to the operating system with which it is performed.

The installation process is pretty straightforward. To check whether the installation has been properly completed, you can open a terminal and run the command:

dotnet

If everything is ok, you will get an output like this:

The .NET CLI
The .NET CLI

Next, we need an IDE. Currently, Visual Studio Code is considered one of the best lightweight IDE‘s out there, plus it has a public marketplace offering lots of extensions that help throughout the development process. The installer is available at this link.

Once started, on the left side you’ll see a few buttons, among which you’ll find ‘Extensions’. This button will open a section with a search feature to help you find the extensions you need on the marketplace. The extensions to install are:

  • C#
  • Azure Tools

Create an Azure Subscription

Microsoft Azure is one of today’s leading Cloud providers, offering a wide range of services and allowing companies to take full advantage of the Cloud. An Azure Subscription is mandatory to start provisioning resources, such as an Azure Web App. Subscriptions are available at this link and start at no cost.

Create the first application

It’s time to create an ASP.NET Web app. Let’s open the terminal and type the following command:

dotnet new webapp -o myfirstapp

In the same terminal window, run this app for the first time, using the command:

dotnet watch run

Then open a browser and go to https://localhost:5001. The watch command keeps watching for file changes to refresh the page while running.

The first run
The first run

Note that if any warning related to an invalid HTTPs certificate shows up, it is possible to remove it as explained here.

Finally, the code generated from the CLI can be inspected using Visual Studio Code: moving into the app directory and typing the code command will open the IDE in the app folder.

The source code explorer in Visual Studio Code
The source code explorer in Visual Studio Code

Create the Azure WebApp

To host our project on Microsoft Azure, we need a Web App instance. After logging in to the Azure portal, we should be able to create a new resource using the button ‘Create a resource’ first, then search for ‘Web App’ and click on the ‘Create’ button.

The Web App wizard in Microsoft Azure
The Web App wizard in Microsoft Azure

This step starts a wizard to configure the following settings:

  • Subscription: a valid Azure subscription;
  • Resource group: creates a new resource group with an explicit name (i.e., ‘codemotion’). A resource group is just a container for cloud resources;
  • Name: the name of the web app instance (i.e., ‘cdmt-webapp’). It’s interesting to note that Microsoft Azure will assign a subdomain of ‘azurewebsites.net’ to the app;
  • Publish: you have two options: ‘Code’ and ‘Docker Container’. In this example, the first choice is more appropriate;
  • Runtime Stack: defines the technology stack used to develop the app (i.e., ‘.NET Core 3.0 (Current)’);
  • Operating System: sets the app hosting platform (i.e., Linux). Bear in mind that .NET Core is cross-platform;
  • Region: defines which datacenter is used to create the resource (i.e., West Europe). For performance reasons, the closer the better;
  • App Service Plan: This option is a critical one. It defines the number of resources that the app needs and the amount of money to spend on it. For this sample, we can select the ‘Create New’ link and choose a free tier plan under the ‘Dev / Test’ section.

This section should look similar to the image below:

Azure Web App settings
Azure Web App settings

In the next section, related to Monitoring, disable ‘Application Insight’, which is not needed for now. Finally, we can hit the ‘Review + Create’ button and lastly, ‘Create’ itself. Azure Web app creation starts, and a few minutes later, the deployment completes, so we are ready to deploy our web app.

Deploy the app

Let’s go back for a moment to Visual Studio Code. Before we installed the Azure Extension we had this menu:

Azure Tools extension for Visual Studio Code
Azure Tools extension for Visual Studio Code

From here, we can use the button ‘Sign in to Azure’ to link our subscription, and the app just created will appear. Clicking on ‘Deploy to Web App’ will starts the deploy wizard as in the following image:

Deploy a web app from Visual Studio Code
Deploy a web app from Visual Studio Code

A popup will appear to let us select the folder our ASP.NET Core app is in.

Folder selection from Visual Studio Code
Folder selection from Visual Studio Code

A request to add a configuration file will pop up; select ‘Add Config’, and then select the Azure Web App from the list that appears. After a few warnings, the deployment will start as shown in the following images:

Adding a deploy configuration
Adding a deploy configuration
et a binding between the Visual Studio Code workspace and the Azure Web App
Set a binding between the Visual Studio Code workspace and the Azure Web App
Deployment completed
Deployment completed
Open the deployed website
Open the deployed website

Related Posts

Kubernetes Helm Guide

10 Tips and Tricks for Using Kubernetes Helm

Gilad David Maayan
June 18, 2024
10 years of kubernetes

Celebrating 10 Years of Kubernetes: A Journey Through Innovation

Codemotion
June 3, 2024
microservices digital transformation. From monolith to microservices concept.

Two feet in a shoe: more than one container in a single Pod

gregoriopalama
March 26, 2024
A-landscape-oriented-image-that-embodies-the-concept-of-a-lightweight-proxy-approach-in-a-cloud-native-scenario-with-a-special-focus

gRPC in a Cloud-native Environment: Challenge Accepted

Diego Petrecolla
February 22, 2024
Share on:facebooktwitterlinkedinreddit

Tagged as:Dot NET

Antonio Turibbio Liccardi
I'm a book author and trainer working as Cloud Developer and DevOps Engineer at Blexin. I love sharing, so I co-founded “DotNetCampania” (an Italian .NET community), to help other developers to improve their knowledge about .NET Ecosystem and coding in general. I'm also a frequent speaker at conferences, and I've been awared by Microsoft as MVP for Visual Studio Developer Technologies since 2015.
Tweet My Wedding Dress
Previous Post
Post Growth Entrepreneurship
Next Post

Footer

Discover

  • Events
  • Community
  • Partners
  • Become a partner
  • Hackathons

Magazine

  • Tech articles

Talent

  • Discover talent
  • Jobs

Companies

  • Discover companies

For Business

  • Codemotion for companies

About

  • About us
  • Become a contributor
  • Work with us
  • Contact us

Follow Us

© Copyright Codemotion srl Via Marsala, 29/H, 00185 Roma P.IVA 12392791005 | Privacy policy | Terms and conditions