Azure App Service for beginners

Introduction

It must be hard to change the way you used to be and make new habits and new routines. It is a general rule of thumb, but sometimes you find a new path that is much easier than you used to. Using cloud services for the first time feels the same way. Maybe you are experienced in some on-premise environments, and you are familier with all efforts it takes to just get a simple website running. Well, it won’t bother you anymore with the cloud.

Here we want to experience how simple it is to have a dev/test environment in the Azure Cloud. It is the first step into the rabbit hole of the cloud concept! Hold tight!

Pre-requisites

1. A simple application of your preferred language. We will create one for testing if you don’t have one ready! Just install the latest .NET (I am using version 6).
2. A Microsoft account as a key to access the MS Azure realm.
3. An IDE or dev environment like VS Code.
4. A Terminal or shell environment.
5. A Browser.

Maybe it will take you some minutes or just a snap to be ready. I am waiting right here.

Make the project ready

Let’s first make our project ready!

• Browse to the folder you want to put your project.
• Open your terminal or shell in that folder.
• Enter the below command to create the project. This command will create a new folder with the given name containing the project files.

dotnet new webapp --name myWebApp

Now you can open your project with your IDE like VS Code and have a glimpse of it and run it.
Or, for the moment, you could build and test it with the dotnet CLI in the terminal.
Write the following command in the terminal to build the project:

dotnet build

Then write the following command to see the website in the browser:

dotnet watch

It must be something similar to the below image:

So we are done with the first item.

Access to Azure Portal

A Microsoft account makes creating a free Azure account easy and fast! If you don’t have it, create one, and I will wait for you.
Open Azure website and click on the Free account button. On the next page, select start free if it is the first time, and after filling out a couple of forms and payment options, you will get a free account with an initial balance. You will have 200 dollars for a month to use it based on the current information. Also, if you want to keep this amazing offer for later, you can select the Pay as you go option. You will have access to the Azure portal, which still has many free features for developers and test purposes.

In the end, you will redirect to the azure portal page. At first, you will see the dashboard page, which would look like the blow image.

Now everything we wanted is ready! Let’s create our piece of cloud!

Create Resources

There is a tiny step in the Azure cloud to create everything you need to deploy your application. We need to create an App Service! From the left menu, select “App Service”. Then on the new page, click on the “Create” button. You will see a page with a form.

• Select the target subscription, which for now, you have only one option.
• Then, choose a name for the resource group. In Azure, every resource should be in a resource group, and this feature makes it easy to manage various resources.
• Choose a unique name for your project.
• We will publish our project as code, so keep it on the Code option.
• Select your run-time stack. For the project which we created earlier, it is .NET 6.
• Select Linux for the operating system.
• Choose a region near where you live.
• And finally, select the plan for our operating system. I recommend choosing the F1 plan, which is free for the test, by clicking on the “Change size”. Also, select a name for your App Service Plan or keep the default name if you like.

Here is the way I filled it.

Now, click on the “Review + create” button, and then click again on the “Create” button. It will just take some moments for your App service to be ready!

Deploy to the Cloud using VS Code

Now we have an App service! Open your App service by going to the “App Service” page and clicking on your app service. Here you can see all the information about it plus a URL. If you open the URL now, you will see a page showing your web app is running but has no content! Awesome, let’s bring the content!

Open the folder of your application in the VS Code. Through the extensions tab, please search for the Azure Tools, Azure Account, Azure Resources, and Azure App Service extensions and install them.

Sign in to your azure account with the following command:

Azure: Sign In

Now, you can see your subscription and its content in the new Azure tab in the VS Code. Under your subscription, under the App Service, you can find the app service we just created in the last step. Right-click on it and select “Deploy to Web App”.

Then select the project name. Approve the popup to add config. Then approve another popup to start the deployment. It starts to build the project and send related files to the Azure portal. You will notify with a popup to view the website when all things get done. You can see that our application is now deployed to the cloud and is publicly accessible.

Conclusion

We had a very brief experience using Azure cloud and deploying our application. As you saw, it was straightforward and took only a few minutes to be done! Now, I think you are trapped by your curiosity and want to learn more about what we have just done together. Obviously, our experience was just a shallow touch of the cloud and MS Azure, and there is so much to learn about it. So here is the link to all resources, and here is the head of the clue! Wish you luck!

Who am I?

I am Peyman, a passionate Software (mostly Back-end) Engineer working for Techspire. I am interstead in cloud technologies and always want to discover more. I like to extend my knowledge by reading books and doing my own experimental projects. Tinkering with new technologies and concepts, is my thing in order to find better or easier ways to solve challenges.